/* Hallmark · tokens.css · theme: custom "Bullion" — dark + metallic gold
 * Tuned to the Unlock AI brand (gold "U" monogram on near-black, premium
 * AI-automation consultant). Every colour and font in index.html references
 * one of these named tokens — never an inline value.
 * Axes: paper-band dark · display-style grotesk-sans · accent-hue warm-gold (86°)
 */
:root {
  /* ---- Colour · warm near-black ground, one metallic-gold signal ---- */
  --color-paper:       oklch(16% 0.010 80);   /* warm near-black base — never #000 */
  --color-paper-2:     oklch(20% 0.012 82);   /* elevated surface */
  --color-paper-3:     oklch(24% 0.013 83);   /* card / inset (higher = lighter on dark) */
  --color-ink:         oklch(95% 0.010 85);   /* headings — warm near-white, never #fff */
  --color-ink-2:       oklch(86% 0.012 85);   /* body text */
  --color-muted:       oklch(68% 0.014 84);   /* meta, helper, mono labels */
  --color-rule:        oklch(31% 0.010 82);   /* hairlines on dark */
  --color-rule-2:      oklch(42% 0.012 84);   /* stronger hairline / border */

  --color-accent:      oklch(74% 0.105 83);   /* THE one signal — antique gold (brand-matched) */
  --color-accent-ink:  oklch(19% 0.020 80);   /* dark text on the gold fill */
  --color-accent-hover:oklch(66% 0.095 80);   /* gold pressed/hover */

  /* Metallic gold gradient for the "U" monogram (champagne -> bronze) */
  --color-gold-hi:     oklch(86% 0.060 88);   /* champagne highlight (top) */
  --color-gold:        oklch(72% 0.100 82);   /* mid antique gold */
  --color-gold-lo:     oklch(48% 0.075 70);   /* deep bronze (bottom) */

  --color-graphite:    oklch(21% 0.016 84);   /* the distinct feature band + demo header */
  --color-graphite-2:  oklch(27% 0.016 84);   /* raised surface on the band */
  --color-graphite-ink:oklch(95% 0.010 85);   /* text on the band */
  --color-graphite-mut:oklch(70% 0.014 84);   /* muted text on the band */

  --color-focus:       oklch(78% 0.110 84);
  --color-accent-soft: color-mix(in oklch, var(--color-accent) 14%, transparent);
  --color-accent-glow: color-mix(in oklch, var(--color-accent) 24%, transparent);

  /* ---- Elevation · subtle on dark; depth comes from hairlines + lightness ---- */
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.40);
  --shadow-hover: 0 6px 20px oklch(0% 0 0 / 0.38);

  /* ---- Type · Space Grotesk display · Inter body · JetBrains Mono labels ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Type scale · major third (1.25) from 16px ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.1875rem;
  --text-3xl:  2.75rem;
  --text-display:   clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3rem);

  /* ---- Spacing · 4-pt named scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 200ms;
  --dur-mid:   600ms;
  --dur-long:  900ms;

  /* ---- Radius · drawn-with-a-ruler ---- */
  --radius-control: 6px;
  --radius-card:    10px;

  /* ---- Layering ---- */
  --z-base: 1;
  --z-sticky: 200;
  --z-sticky-cta: 250;
  --z-sticky-nav: 300;
  --z-overlay: 400;

  /* ---- Structure ---- */
  --nav-height: 60px;
  --rule-1: 1px;
}