/* ================================================================
   INNERFLECT DESIGN TOKENS — v1.0 · 2026-05-19
   Single source of truth for all visual decisions.

   ARCHITECTURE: 3 tiers
     Tier 1  →  Primitives   (raw values — never reference directly)
     Tier 2  →  Semantics    (intent-named tokens — use in all CSS)
     Tier 3  →  Compatibility aliases (maps legacy names → semantics)

   HOW TO CONSUME:
     In HTML:  <link rel="stylesheet" href="tokens.css"> (first, before page styles)
     In CSS:   Use semantic tokens (--if-*) for all new code
               Legacy variable names still work via Tier 3 aliases
     In AI:    See DESIGN.md for full specification and rules
   ================================================================ */


/* ================================================================
   TIER 1 — PRIMITIVES
   Raw values. Never use directly in component CSS.
   ================================================================ */
:root {

  /* ── Color Primitives ── */
  --if-prim-dark-950:  #0F0F0F;   /* deepest background */
  --if-prim-dark-900:  #1A1A1A;   /* elevated surface */
  --if-prim-dark-800:  #2A2A2A;   /* raised surface */
  --if-prim-dark-700:  #383838;   /* subtle lift */

  --if-prim-cream-50:  #FFFFFF;
  --if-prim-cream-100: #F9F8F5;   /* main bright bg */
  --if-prim-cream-200: #ECE6E1;   /* soft layer */
  --if-prim-cream-300: #E1D9D2;   /* deeper layer */
  --if-prim-cream-400: #D6CEC6;   /* border territory */

  --if-prim-gold-200:  #DEC79B;   /* lightest — hero gradient */
  --if-prim-gold-300:  #C6B496;   /* light accent */
  --if-prim-gold-400:  #A8977A;   /* primary gold */
  --if-prim-gold-500:  #A18F7A;   /* mid — bright-mode accent */
  --if-prim-gold-600:  #8A7762;   /* dark — diagram strokes */
  --if-prim-gold-700:  #7A6452;   /* deep — Indias person colour */

  --if-prim-blue-400:  #8A9BAA;   /* John person colour */
  --if-prim-green-400: #8AA496;   /* Chris person colour */
  --if-prim-sand-300:  #B89E8A;   /* Sara person colour */

  --if-prim-red-500:   #B84A38;
  --if-prim-amber-500: #8A7030;
  --if-prim-green-500: #2E7A52;

  /* ── Space Scale (4px base grid) ── */
  --if-prim-space-0:   0px;
  --if-prim-space-1:   4px;
  --if-prim-space-2:   8px;
  --if-prim-space-3:   12px;
  --if-prim-space-4:   16px;
  --if-prim-space-5:   20px;
  --if-prim-space-6:   24px;
  --if-prim-space-8:   32px;
  --if-prim-space-10:  40px;
  --if-prim-space-12:  48px;
  --if-prim-space-14:  56px;
  --if-prim-space-16:  64px;
  --if-prim-space-20:  80px;
  --if-prim-space-24:  96px;
  --if-prim-space-28:  112px;
  --if-prim-space-32:  128px;
  --if-prim-space-36:  140px;
  --if-prim-space-40:  160px;

  /* ── Radius Primitives ── */
  --if-prim-radius-0:   0px;
  --if-prim-radius-xs:  4px;
  --if-prim-radius-sm:  8px;
  --if-prim-radius-md:  12px;
  --if-prim-radius-lg:  16px;
  --if-prim-radius-xl:  20px;
  --if-prim-radius-2xl: 24px;
  --if-prim-radius-3xl: 32px;
  --if-prim-radius-full: 9999px;

  /* ── Duration Primitives ── */
  --if-prim-dur-50:    50ms;
  --if-prim-dur-100:   100ms;
  --if-prim-dur-130:   130ms;
  --if-prim-dur-200:   200ms;
  --if-prim-dur-250:   250ms;
  --if-prim-dur-400:   400ms;
  --if-prim-dur-700:   700ms;
  --if-prim-dur-1000:  1000ms;
  --if-prim-dur-1150:  1150ms;
  --if-prim-dur-1400:  1400ms;
  --if-prim-dur-2500:  2500ms;
}


/* ================================================================
   TIER 2 — SEMANTIC TOKENS
   Intent-named. Use these in all component CSS.
   ================================================================ */
:root {

  /* ── Surfaces ── */
  --if-surface-dark:           var(--if-prim-dark-950);
  --if-surface-dark-elevated:  var(--if-prim-dark-900);
  --if-surface-dark-raised:    var(--if-prim-dark-800);
  --if-surface-dark-lift:      var(--if-prim-dark-700);

  --if-surface-bright:         var(--if-prim-cream-100);
  --if-surface-layer-1:        var(--if-prim-cream-100);
  --if-surface-layer-2:        var(--if-prim-cream-200);
  --if-surface-layer-3:        var(--if-prim-cream-300);
  --if-surface-line-bright:    var(--if-prim-cream-400);

  /* ── Text — on dark backgrounds ── */
  --if-text-dark-primary:      #F7F6F4;
  --if-text-dark-sub:          rgba(247, 246, 244, 0.58);
  --if-text-dark-faint:        rgba(247, 246, 244, 0.38);
  --if-text-dark-ghost:        rgba(247, 246, 244, 0.22);
  --if-text-dark-muted:        rgba(247, 246, 244, 0.48);
  --if-text-dark-dim:          rgba(247, 246, 244, 0.44);

  /* ── Text — on bright backgrounds ── */
  --if-text-bright-primary:    #1A1A1A;
  --if-text-bright-sub:        rgba(26, 26, 26, 0.55);
  --if-text-bright-faint:      rgba(26, 26, 26, 0.32);
  --if-text-bright-ghost:      rgba(26, 26, 26, 0.22);
  --if-text-bright-muted:      rgba(26, 26, 26, 0.40);

  /* ── Brand Accent (Gold) ── */
  --if-accent:                 var(--if-prim-gold-400);
  --if-accent-light:           var(--if-prim-gold-300);
  --if-accent-mid:             var(--if-prim-gold-500);
  --if-accent-hero:            var(--if-prim-gold-200);  /* hero wave gradient */

  /* ── Borders & Dividers ── */
  --if-border-on-dark:         rgba(255, 255, 255, 0.07);
  --if-border-on-dark-strong:  rgba(255, 255, 255, 0.14);
  --if-border-on-dark-hover:   rgba(255, 255, 255, 0.20);
  --if-border-on-bright:       rgba(15, 15, 15, 0.07);
  --if-border-on-bright-strong: rgba(15, 15, 15, 0.14);

  /* ── Glass Effects ── */
  /* Light glass — used on bright (cream) backgrounds */
  --if-glass-light-bg:         rgba(255, 255, 255, 0.45);
  --if-glass-light-bg-hover:   rgba(255, 255, 255, 0.70);
  --if-glass-light-bg-deep:    rgba(255, 255, 255, 0.60);
  --if-glass-light-border:     rgba(255, 255, 255, 0.80);
  --if-glass-light-blur:       blur(24px) saturate(180%);
  --if-glass-light-blur-sm:    blur(12px) saturate(160%);

  /* Dark glass — used on dark (#0F0F0F) backgrounds */
  --if-glass-dark-bg:          rgba(255, 255, 255, 0.04);
  --if-glass-dark-bg-hover:    rgba(255, 255, 255, 0.07);
  --if-glass-dark-bg-active:   rgba(255, 255, 255, 0.08);
  --if-glass-dark-border:      rgba(255, 255, 255, 0.08);
  --if-glass-dark-border-hover: rgba(255, 255, 255, 0.14);
  --if-glass-dark-border-gold: rgba(168, 151, 122, 0.30);
  --if-glass-dark-blur:        blur(18px);

  /* Nav glass — special: dark with blur */
  --if-glass-nav-bg:           rgba(15, 15, 15, 0.92);
  --if-glass-nav-blur:         blur(18px);
  --if-glass-nav-border:       rgba(255, 255, 255, 0.05);

  /* Inset glass highlight (top edge shimmer) */
  --if-glass-inset-shine:      inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.10);

  /* ── Shadows ── */
  --if-shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.10);
  --if-shadow-md:              0 2px 8px rgba(0, 0, 0, 0.14);
  --if-shadow-lg:              0 4px 24px rgba(0, 0, 0, 0.18);
  --if-shadow-xl:              0 8px 48px rgba(0, 0, 0, 0.22);
  --if-shadow-gold-glow:       0 0 40px rgba(168, 151, 122, 0.15);
  --if-shadow-gold-glow-sm:    0 0 20px rgba(168, 151, 122, 0.10);

  /* ── Spacing (semantic names) ── */
  --if-space-1:   var(--if-prim-space-1);    /* 4px  — micro gap */
  --if-space-2:   var(--if-prim-space-2);    /* 8px  — tight gap */
  --if-space-3:   var(--if-prim-space-3);    /* 12px — compact gap */
  --if-space-4:   var(--if-prim-space-4);    /* 16px — base unit */
  --if-space-5:   var(--if-prim-space-5);    /* 20px */
  --if-space-6:   var(--if-prim-space-6);    /* 24px — component gap */
  --if-space-8:   var(--if-prim-space-8);    /* 32px — section sub-gap */
  --if-space-10:  var(--if-prim-space-10);   /* 40px */
  --if-space-12:  var(--if-prim-space-12);   /* 48px — section content gap */
  --if-space-16:  var(--if-prim-space-16);   /* 64px — section separator */
  --if-space-20:  var(--if-prim-space-20);   /* 80px — section pad */
  --if-space-24:  var(--if-prim-space-24);   /* 96px */
  --if-space-28:  var(--if-prim-space-28);   /* 112px */
  --if-space-32:  var(--if-prim-space-32);   /* 128px */
  --if-space-40:  var(--if-prim-space-40);   /* 160px — section breathing */

  /* Named semantic spacers */
  --if-gap-xs:    var(--if-prim-space-1);    /* 4px */
  --if-gap-sm:    var(--if-prim-space-2);    /* 8px */
  --if-gap-md:    var(--if-prim-space-4);    /* 16px */
  --if-gap-lg:    var(--if-prim-space-6);    /* 24px */
  --if-gap-xl:    var(--if-prim-space-8);    /* 32px */
  --if-gap-2xl:   var(--if-prim-space-12);   /* 48px */

  /* ── Border Radius ── */
  --if-radius-xs:   var(--if-prim-radius-xs);   /* 4px  — small badge */
  --if-radius-sm:   var(--if-prim-radius-sm);   /* 8px  — nav link bg */
  --if-radius-md:   var(--if-prim-radius-md);   /* 12px — input fields */
  --if-radius-lg:   var(--if-prim-radius-lg);   /* 16px — step cards */
  --if-radius-xl:   var(--if-prim-radius-xl);   /* 20px — panels */
  --if-radius-2xl:  var(--if-prim-radius-2xl);  /* 24px — main cards */
  --if-radius-3xl:  var(--if-prim-radius-3xl);  /* 32px — hero blocks */
  --if-radius-pill: var(--if-prim-radius-full); /* 9999px — buttons, badges */

  /* ── Typography — Fonts ── */
  --if-font-sans:   'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --if-font-serif:  Georgia, 'Times New Roman', serif;  /* editorial/quote accent */

  /* ── Typography — Font Sizes ── */
  --if-text-2xs:    10px;
  --if-text-xs:     11px;
  --if-text-sm:     12px;
  --if-text-base:   13px;
  --if-text-md:     14px;
  --if-text-lg:     15px;
  --if-text-xl:     16px;
  --if-text-2xl:    17px;
  --if-text-3xl:    19px;
  --if-text-4xl:    22px;

  /* Fluid display sizes — always use clamp() for headlines */
  --if-display-xs:  clamp(22px, 2.6vw, 30px);   /* blockquotes */
  --if-display-sm:  clamp(26px, 3.4vw, 40px);   /* story slides */
  --if-display-md:  clamp(28px, 4vw,   44px);   /* section h2 */
  --if-display-lg:  clamp(30px, 4vw,   48px);   /* systems headline */
  --if-display-xl:  clamp(38px, 5vw,   68px);   /* delivery-model hero */
  --if-display-2xl: clamp(42px, 7vw,   88px);   /* service page hero */
  --if-display-3xl: clamp(48px, 6.4vw, 88px);   /* index hero */
  --if-display-4xl: clamp(36px, 4.8vw, 60px);   /* story conclusion */

  /* ── Typography — Weights ── */
  --if-weight-light:    300;
  --if-weight-regular:  400;
  --if-weight-medium:   500;
  --if-weight-semibold: 600;
  --if-weight-bold:     700;

  /* ── Typography — Line Heights ── */
  --if-leading-tightest: 1.05;
  --if-leading-tight:    1.10;
  --if-leading-snug:     1.15;
  --if-leading-heading:  1.25;
  --if-leading-body:     1.60;
  --if-leading-relaxed:  1.70;
  --if-leading-loose:    1.75;
  --if-leading-spacious: 1.80;

  /* ── Typography — Letter Spacing ── */
  --if-tracking-tightest: -0.035em;
  --if-tracking-tighter:  -0.030em;
  --if-tracking-tight:    -0.025em;
  --if-tracking-snug:     -0.020em;
  --if-tracking-normal:   -0.015em;
  --if-tracking-base:     -0.010em;
  --if-tracking-relaxed:  0.005em;
  --if-tracking-wide:     0.010em;
  --if-tracking-wider:    0.020em;
  --if-tracking-label:    0.060em;
  --if-tracking-caps:     0.100em;
  --if-tracking-widest:   0.120em;
  --if-tracking-spaced:   0.180em;
  --if-tracking-ultra:    0.200em;
  --if-tracking-mega:     0.220em;

  /* ── Animation — Durations ── */
  --if-dur-instant:    var(--if-prim-dur-100);   /* 100ms — micro feedback */
  --if-dur-fast:       var(--if-prim-dur-130);   /* 130ms — hover states */
  --if-dur-quick:      var(--if-prim-dur-200);   /* 200ms — nav transitions */
  --if-dur-base:       var(--if-prim-dur-250);   /* 250ms — general transitions */
  --if-dur-medium:     var(--if-prim-dur-400);   /* 400ms — card hover */
  --if-dur-slow:       var(--if-prim-dur-700);   /* 700ms — reveal animations */
  --if-dur-reveal:     var(--if-prim-dur-1000);  /* 1000ms — scroll reveals */
  --if-dur-cinematic:  var(--if-prim-dur-1150);  /* 1150ms — hero reveals */
  --if-dur-draw:       var(--if-prim-dur-1400);  /* 1400ms — SVG line draw */
  --if-dur-wave:       var(--if-prim-dur-2500);  /* 2500ms — wave intro */

  /* ── Animation — Easing Curves ── */
  --if-ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);   /* primary ease — cinematic */
  --if-ease-in-out:    cubic-bezier(0.40, 0.00, 0.20, 1);   /* smooth in-out */
  --if-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */
  --if-ease-decel:     cubic-bezier(0.00, 0.00, 0.20, 1);   /* enter transitions */
  --if-ease-accel:     cubic-bezier(0.40, 0.00, 1.00, 1);   /* exit transitions */
  --if-ease-linear:    linear;

  /* ── Animation — Reveal Parameters ── */
  --if-reveal-y:           14px;   /* standard scroll reveal translateY */
  --if-reveal-y-cinematic: 24px;   /* hero/cinematic reveal translateY */
  --if-reveal-y-word:      22px;   /* word-by-word cascade translateY */
  --if-reveal-blur:        6px;    /* blur filter on reveal start */
  --if-reveal-blur-word:   8px;    /* blur on word cascade */

  /* ── Z-Index Layers ── */
  --if-z-base:      0;
  --if-z-above:     10;
  --if-z-diagram:   20;
  --if-z-content:   2;    /* relative content above canvas */
  --if-z-dropdown:  100;
  --if-z-sticky:    150;
  --if-z-nav:       200;
  --if-z-modal:     300;
  --if-z-toast:     400;
  --if-z-tip:       500;

  /* ── Layout ── */
  --if-nav-height:        64px;
  --if-layout-max:        1200px;   /* systems grid, delivery model */
  --if-layout-content:    1160px;   /* service page content */
  --if-layout-narrow:     860px;    /* proof, apply content */
  --if-layout-reading:    640px;    /* hero copy, hero sub */
  --if-layout-tight:      540px;    /* modals, tight copy */

  --if-section-pad-v:     100px;    /* standard section vertical padding */
  --if-section-pad-v-lg:  120px;    /* hero/apply top padding */
  --if-section-pad-h:     48px;     /* desktop horizontal padding */
  --if-section-pad-h-sm:  24px;     /* mobile horizontal padding */
  --if-section-pad-h-md:  28px;     /* tablet horizontal padding */

  /* ── Diagram System ── */
  --if-diag-stroke:           #8A7762;              /* connector lines, node borders */
  --if-diag-stroke-faint:     rgba(138,119,98,0.55); /* dashed audit lines */
  --if-diag-fill-bg-dark:     #0F0F0F;              /* node fill on dark bg */
  --if-diag-fill-bg-bright:   #F9F8F5;              /* node fill on bright bg */
  --if-diag-fill-gold:        rgba(168,151,122,0.30); /* solid filled node */
  --if-diag-fill-gold-soft:   rgba(168,151,122,0.12); /* subtle highlight node */
  --if-diag-text-size:        12px;
  --if-diag-text-sm-size:     11px;
  --if-diag-node-r:           10px;                 /* circle node radius */
  --if-diag-stroke-width:     1.4px;
  --if-diag-stroke-width-sm:  1.2px;
  --if-diag-stroke-width-lg:  1.6px;
  --if-diag-dash:             2 4;                  /* dasharray for faint lines */
  --if-diag-dash-tight:       2 3;                  /* tighter dash */

  /* ── Person Colors (Team) ── */
  --if-person-indias: var(--if-prim-gold-700);   /* #7A6452 — deep warm taupe */
  --if-person-jonas:  var(--if-prim-gold-400);   /* #A8977A — primary gold */
  --if-person-sara:   var(--if-prim-sand-300);   /* #B89E8A — warm sand */
  --if-person-john:   var(--if-prim-blue-400);   /* #8A9BAA — steel blue */
  --if-person-chris:  var(--if-prim-green-400);  /* #8AA496 — sage green */

  /* ── State Colors ── */
  --if-state-error:    var(--if-prim-red-500);    /* #B84A38 */
  --if-state-warning:  var(--if-prim-amber-500);  /* #8A7030 */
  --if-state-success:  var(--if-prim-green-500);  /* #2E7A52 */
  --if-state-info:     var(--if-prim-blue-400);   /* #8A9BAA */

  /* ── Section Tone Helpers ── */
  --if-tone-1-bg:  var(--if-surface-bright);     /* #F9F8F5 */
  --if-tone-2-bg:  var(--if-surface-layer-2);    /* #ECE6E1 */
}


/* ================================================================
   TIER 3 — COMPATIBILITY ALIASES
   Maps legacy variable names used across existing pages to
   canonical semantic tokens. This ensures:
   - Existing pages work unchanged after linking tokens.css
   - A single value change in Tier 1/2 propagates everywhere
   - New code can use canonical --if-* names exclusively
   ================================================================ */
:root {

  /* ── delivery-model.html / what-we-build.html style names ── */
  --dark:         var(--if-surface-dark);
  --dark-s2:      var(--if-surface-dark-elevated);
  --text-d:       var(--if-text-dark-primary);
  --text-d-sub:   var(--if-text-dark-sub);
  --bright:       var(--if-surface-bright);
  --layer-2:      var(--if-surface-layer-2);
  --layer-3:      var(--if-surface-layer-3);
  --text-b:       var(--if-text-bright-primary);
  --text-b-sub:   var(--if-text-bright-sub);
  --text-b-faint: var(--if-text-bright-faint);
  --line:         var(--if-border-on-bright);
  --gold-b:       var(--if-accent-mid);

  /* ── index.html style names ── */
  --bg:      var(--if-surface-dark);
  --s2:      var(--if-surface-dark-elevated);
  --s3:      var(--if-surface-dark-raised);
  --text:    var(--if-text-dark-primary);

  /* ── service page style names ── */
  --text-sub:      var(--if-text-dark-sub);
  --layer2:        var(--if-surface-layer-2);
  --layer3:        var(--if-surface-layer-3);
  --text-dark:     var(--if-text-bright-primary);
  --text-dark-sub: var(--if-text-bright-sub);

  /* ── Shared across all pages ── */
  --gold:       var(--if-accent);
  --gold-light: var(--if-accent-light);
  --radius:     var(--if-radius-2xl);   /* canonical: 24px */

  /* ── Team person colours ── */
  --owner: var(--if-person-indias);
  --jonas: var(--if-person-jonas);
  --sara:  var(--if-person-sara);
  --john:  var(--if-person-john);
  --chris: var(--if-person-chris);
}


/* ================================================================
   BASE RESET & GLOBAL DEFAULTS
   Applied once via this file — no need to repeat in page styles.
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--if-font-sans);
  font-weight: var(--if-weight-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  overflow-x: hidden;
  line-height: var(--if-leading-body);
}


/* ================================================================
   UTILITY CLASSES — GLASS
   Reusable glass effect compositions.
   ================================================================ */

/* Light glass — for bright (cream) section backgrounds */
.glass-light {
  background: var(--if-glass-light-bg);
  border: 1px solid var(--if-glass-light-border);
  backdrop-filter: var(--if-glass-light-blur);
  -webkit-backdrop-filter: var(--if-glass-light-blur);
}
.glass-light:hover {
  background: var(--if-glass-light-bg-hover);
}

/* Dark glass — for dark (#0F0F0F) section backgrounds */
.glass-dark {
  background: var(--if-glass-dark-bg);
  border: 1px solid var(--if-glass-dark-border);
  backdrop-filter: var(--if-glass-dark-blur);
  -webkit-backdrop-filter: var(--if-glass-dark-blur);
}
.glass-dark:hover {
  background: var(--if-glass-dark-bg-hover);
  border-color: var(--if-glass-dark-border-hover);
}

/* Frosted step card — light glass with stronger border */
.glass-step {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.80);
  backdrop-filter: var(--if-glass-light-blur-sm);
  -webkit-backdrop-filter: var(--if-glass-light-blur-sm);
}


/* ================================================================
   UTILITY CLASSES — REVEAL ANIMATIONS
   Standard scroll-reveal pattern. Activate with JS:
   new IntersectionObserver → add .visible class.
   ================================================================ */

/* Standard reveal (most sections) */
.reveal {
  opacity: 0;
  transform: translateY(var(--if-reveal-y));
  transition:
    opacity   var(--if-dur-reveal)   var(--if-ease-out),
    transform var(--if-dur-reveal)   var(--if-ease-out);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cinematic reveal (hero content, index approach) */
.reveal-cinematic {
  opacity: 0;
  transform: translateY(var(--if-reveal-y-cinematic));
  filter: blur(var(--if-reveal-blur));
  transition:
    opacity   var(--if-dur-cinematic) var(--if-ease-out),
    transform var(--if-dur-cinematic) var(--if-ease-out),
    filter    var(--if-dur-cinematic) var(--if-ease-out);
  will-change: opacity, transform, filter;
}
.reveal-cinematic.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reduced motion: strip blur, shorten duration */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-cinematic {
    filter: none;
    transition:
      opacity   0.4s ease,
      transform 0.4s ease;
  }
  .reveal-cinematic { filter: none; }
}


/* ================================================================
   UTILITY CLASSES — SECTION TONE BACKGROUNDS
   ================================================================ */

.tone-dark    { background: var(--if-surface-dark);    color: var(--if-text-dark-primary); }
.tone-bright  { background: var(--if-surface-bright);  color: var(--if-text-bright-primary); }
.tone-layer-2 { background: var(--if-surface-layer-2); color: var(--if-text-bright-primary); }
.tone-layer-3 { background: var(--if-surface-layer-3); color: var(--if-text-bright-primary); }


/* ================================================================
   UTILITY CLASSES — TYPOGRAPHY ATOMS
   ================================================================ */

/* Eyebrow / label — small caps, gold, tracking */
.label-eyebrow {
  font-size: var(--if-text-xs);
  font-weight: var(--if-weight-semibold);
  letter-spacing: var(--if-tracking-label);
  text-transform: uppercase;
  color: var(--if-accent);
}

/* Section label — on dark context */
.label-section-dark {
  font-size: var(--if-text-xs);
  font-weight: var(--if-weight-semibold);
  letter-spacing: var(--if-tracking-label);
  text-transform: uppercase;
  color: var(--if-accent);
  margin-bottom: var(--if-space-4);
  display: block;
}

/* Section label — on bright context */
.label-section-bright {
  font-size: var(--if-text-xs);
  font-weight: var(--if-weight-semibold);
  letter-spacing: var(--if-tracking-label);
  text-transform: uppercase;
  color: var(--if-text-bright-muted);
  margin-bottom: var(--if-space-4);
  display: block;
}

/* Running text */
.body-lg   { font-size: var(--if-text-3xl);  font-weight: var(--if-weight-light); line-height: var(--if-leading-loose); }
.body-md   { font-size: var(--if-text-xl);   font-weight: var(--if-weight-light); line-height: var(--if-leading-relaxed); }
.body-base { font-size: var(--if-text-lg);   font-weight: var(--if-weight-light); line-height: var(--if-leading-body); }
.body-sm   { font-size: var(--if-text-md);   font-weight: var(--if-weight-regular); line-height: var(--if-leading-body); }
.body-xs   { font-size: var(--if-text-base); font-weight: var(--if-weight-regular); line-height: var(--if-leading-body); }


/* ================================================================
   UTILITY CLASSES — BUTTON ATOMS
   ================================================================ */

/* Primary gold CTA */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--if-space-2);
  padding: 14px 32px;
  border-radius: var(--if-radius-pill);
  background: var(--if-accent);
  color: var(--if-surface-dark);
  font-family: var(--if-font-sans);
  font-size: var(--if-text-md);
  font-weight: var(--if-weight-semibold);
  letter-spacing: var(--if-tracking-wide);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition:
    background  var(--if-dur-fast) var(--if-ease-out),
    transform   var(--if-dur-fast) var(--if-ease-out);
}
.btn-gold:hover {
  background: var(--if-accent-light);
  transform: translateY(-1px);
}

/* Ghost outline — light (on dark bg) */
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: var(--if-space-2);
  padding: 14px 32px;
  border-radius: var(--if-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: transparent;
  color: var(--if-text-dark-primary);
  font-family: var(--if-font-sans);
  font-size: var(--if-text-md);
  font-weight: var(--if-weight-regular);
  letter-spacing: var(--if-tracking-wide);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--if-dur-fast)  var(--if-ease-out),
    background   var(--if-dur-fast)  var(--if-ease-out),
    transform    var(--if-dur-fast)  var(--if-ease-out);
}
.btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

/* Text link with arrow */
.btn-text-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--if-space-1);
  font-size: var(--if-text-base);
  font-weight: var(--if-weight-regular);
  color: rgba(168, 151, 122, 0.85);
  text-decoration: none;
  letter-spacing: var(--if-tracking-wide);
  transition: color var(--if-dur-fast) var(--if-ease-out);
}
.btn-text-arrow:hover { color: var(--if-text-dark-primary); }
.btn-text-arrow .arrow { transition: transform var(--if-dur-fast) var(--if-ease-out); }
.btn-text-arrow:hover .arrow { transform: translateX(3px); }


/* ================================================================
   UTILITY CLASSES — CARD ATOMS
   ================================================================ */

/* Standard dark glass card */
.card-dark {
  background: var(--if-glass-dark-bg);
  border: 1px solid var(--if-glass-dark-border);
  border-radius: var(--if-radius-2xl);
  padding: 40px 36px;
  transition:
    border-color var(--if-dur-quick) var(--if-ease-out),
    transform    var(--if-dur-quick) var(--if-ease-out),
    background   var(--if-dur-quick) var(--if-ease-out);
}
.card-dark:hover {
  border-color: var(--if-glass-dark-border-hover);
  transform: translateY(-2px);
  background: var(--if-glass-dark-bg-hover);
}

/* Standard light glass card */
.card-light {
  background: var(--if-glass-light-bg);
  border: 1px solid var(--if-border-on-bright);
  border-radius: var(--if-radius-2xl);
  padding: 32px 28px;
  backdrop-filter: var(--if-glass-light-blur);
  -webkit-backdrop-filter: var(--if-glass-light-blur);
  transition:
    background  var(--if-dur-quick) var(--if-ease-out),
    transform   var(--if-dur-quick) var(--if-ease-out);
}
.card-light:hover {
  background: var(--if-glass-light-bg-hover);
  transform: translateY(-2px);
}

/* Signal card — left gold accent border */
.card-signal {
  background: var(--if-glass-light-bg);
  border: 1px solid var(--if-border-on-bright);
  border-left: 3px solid var(--if-accent);
  border-radius: var(--if-radius-2xl);
  padding: 32px 28px;
  backdrop-filter: var(--if-glass-light-blur);
  -webkit-backdrop-filter: var(--if-glass-light-blur);
}


/* ================================================================
   UTILITY CLASSES — NAV COMPONENT
   ================================================================ */

.nav-glass {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--if-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--if-section-pad-h);
  height: var(--if-nav-height);
  background: var(--if-glass-nav-bg);
  backdrop-filter: var(--if-glass-nav-blur);
  -webkit-backdrop-filter: var(--if-glass-nav-blur);
  border-bottom: 1px solid var(--if-glass-nav-border);
}
@media (max-width: 768px) {
  .nav-glass { padding: 0 var(--if-section-pad-h-sm); }
}


/* ================================================================
   FALLBACK — No backdrop-filter support
   ================================================================ */
@supports not (backdrop-filter: blur(1px)) {
  .glass-light,
  .glass-step        { background: rgba(255, 255, 255, 0.97); }
  .glass-dark        { background: rgba(26, 26, 26, 0.97); }
  .nav-glass         { background: rgba(15, 15, 15, 0.98); }
}