/* assets/css/tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette — BEZENT Full Dark Theme Tokens */
  --ink: #000000;                   /* Primary pure-black canvas */
  --ink-secondary: #12141A;         /* Secondary card/panel elevation */
  --ink-elevated: #181B24;          /* Tertiary hover/elevated element surface */
  --paper: #000000;                 /* Baseline pure-black canvas */
  --surface: #12141A;               /* Elevated dark card/panel surface */
  --surface-alt: #1C1F2B;           /* Slightly lighter dark contrast surface */
  /* Monochrome text system: every text color token resolves to pure white.
     Hierarchy comes from font-weight/size (base.css, components.css), never
     from color — the brand color is reserved for non-text elements only. */
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --muted: #FFFFFF;
  --text-lede: #FFFFFF;
  --line: #222530;                  /* Subtle dark borders and dividers */
  --line-dark: #2A2E3D;             /* Strong dark borders */
  
  /* BEZENT Accent — Primary Brand Electric Purple #931cf5 */
  --brand: #931cf5;                 /* Primary brand purple (rgb: 147, 28, 245) */
  --brand-rgb: 147, 28, 245;        /* Raw RGB tuple for alpha compositions */
  --brand-ink: #6E15B8;             /* Deep rich brand purple for hovers */
  --brand-light: #C27EFA;           /* Luminous electric violet tint for text & lines on dark */
  --brand-tint: rgba(147, 28, 245, 0.15); /* Subtle purple dark surface tint */

  /* Zero-radius geometry throughout */
  --radius: 0px;

  /* Fluid Gutter & Spacing Tokens */
  --gutter: clamp(16px, 4vw, 120px);
  --space-section: clamp(48px, 8vw, 128px);
  --space-section-sm: clamp(32px, 5vw, 80px);
  --gap-grid: clamp(20px, 3vw, 48px);

  /* Header Heights */
  --header-utility-h: 0px;
  --header-primary-h: 72px;
  --header-subnav-h: 52px;
  --header-total-h: 124px;
  --header-mobile-h: 60px;
  
  /* Subnav Dark Purple Tone — same hue family as --brand, just darker/muted */
  --subnav-bg: #22053D;             /* Darkened brand-hue purple for the persistent subnav bar */
  --subnav-active: #6E15B8;         /* Filled active pill background, same hue as --brand-ink */

  /* Typography Families */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-caption: 'Inter', Georgia, serif;
  --font-serif: 'Inter', Georgia, serif;

  /* Fluid Clamp Type Scale & Tracking
     Bands below follow the reference spec: hero display / H1 / large
     section H2 / H3 / H4 / body / nav / fine print. */

  /* Hero display (word-reveal / oversized statement text) — up to 100px, 400, lh 1.1 */
  --text-display-xl: clamp(2.5rem, 6.2vw, 6.25rem);
  --tracking-display-xl: -0.01em;
  --leading-display-xl: 1.1;
  --weight-display-xl: 400;

  /* H1 (page headline) — 60px, 600, lh 1.15 (69/60) */
  --text-display-lg: clamp(2rem, 4.6vw, 3.75rem);
  --tracking-display-lg: -0.01em;
  --leading-display-lg: 1.15;
  --weight-display-lg: 600;

  /* H3 (Graphik variant, card/article headlines) — 40px, 600, lh 1.2 (48/40) */
  --text-display-md: clamp(1.75rem, 3vw, 2.5rem);
  --tracking-display-md: -0.01em;
  --leading-display-md: 1.2;
  --weight-display-md: 600;

  /* H2 default (section headings) — ~21-28px, 700, lh 1.25 */
  --text-display-sm: clamp(1.3125rem, 2.2vw, 1.75rem);
  --tracking-display-sm: -0.005em;
  --leading-display-sm: 1.25;
  --weight-display-sm: 700;

  /* H3 serif variant (GT Sectra Fine stand-in) — 28px, 300, lh 1.25 (35/28) */
  --text-h3-serif: 1.75rem;
  --leading-h3-serif: 1.25;
  --weight-h3-serif: 300;

  /* H4 — 24px / 18px / 14px, 500-700, lh ~1.3-1.5 */
  --text-h4-lg: 1.5rem;
  --leading-h4-lg: 1.29;
  --text-h4-md: 1.125rem;
  --leading-h4-md: 1.4;
  --text-h4-sm: 0.875rem;
  --leading-h4-sm: 1.5;
  --weight-h4: 600;

  /* Body copy — 16px / 14px, 400-500, lh 1.5 */
  --text-body: 1rem;
  --tracking-body: 0;
  --leading-body: 1.5;

  --text-body-sm: 0.875rem;
  --leading-body-sm: 1.5;

  /* Nav, footer links, small buttons — 14px, 400-500, lh 1.5 (21/14) */
  --text-label: 0.875rem;
  --tracking-label: 0.02em;
  --leading-label: 1.5;

  /* Fine print — captions, dates, legal, cookie text — 12-13px, lh 1.5 */
  --text-fine: 0.8125rem;
  --leading-fine: 1.5;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 260ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}