/* ═══ tokens.css — OWNER: ORCHESTRATOR. Brand tokens, glass system, shared primitives.
   Subagents READ this file; they never edit it. ═══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ═══ v5 PREMIUM PALETTE — warm ink/charcoal, navy retired. ORCHESTRATOR ONLY. ═══
     Semantic tokens (the contract): */
  --primary:#131110;        /* ink base — page background */
  --surface:#1D1A16;        /* card / panel */
  --surface-alt:#1A1815;    /* alternating section fill */
  --accent:#C8A96E;         /* champagne gold — the one metallic (matches logo) */
  --text:#DCD6CC;           /* warm parchment body */
  --text-muted:#A39C8F;     /* warm stone — 6.8:1 on --primary, AA everywhere */
  /* RGB triplets for alpha composites — rgba(var(--x-rgb), a) */
  --ink-rgb:19,17,16;--surface-rgb:29,26,22;--surface-alt-rgb:26,24,21;
  --accent-rgb:200,169,110;--paper-rgb:244,241,236;--shadow-rgb:8,7,6;
  --raised-rgb:36,32,25;--white-rgb:255,255,255;
  --surface-solid:#201D18;      /* opaque chip over glass gaps (e.g. .step-arr) */
  --aurora-a:#1C1913;--aurora-a-rgb:28,25,19;  /* aurora fallback stop (warm) */
  --aurora-b:#171410;--aurora-b-rgb:23,20,16;  /* aurora fallback stop (deep) */
  --ok:#8BC9A1;--ok-rgb:139,201,161;        /* status: clear/pass */
  --warn:#E08B8B;--warn-rgb:224,139,139;    /* status: gap/error (AA on all surfaces) */

  /* Legacy aliases — SAME var names the whole codebase uses, remapped to ink.
     (Nothing may reference the old navy hexes literally; migration enforces.) */
  --navy:var(--primary);--navy-mid:var(--surface-alt);--navy-light:#242019;--navy-card:var(--surface);
  --gold:var(--accent);--gold-light:#DCC49C;--gold-dim:rgba(var(--accent-rgb),0.15);
  --white:#F4F1EC;--muted:var(--text-muted);
  --border:rgba(var(--accent-rgb),0.18);--border-subtle:rgba(255,255,255,0.07);

  /* Glass system — layered rgba surfaces over ink */
  --glass-bg:rgba(var(--surface-rgb),0.55);        /* default card glass */
  --glass-bg-strong:rgba(22,20,17,0.78);           /* nav / modal glass */
  --glass-strong-rgb:22,20,17;
  --glass-bg-soft:rgba(255,255,255,0.03);          /* faint inner layer */
  --glass-bg-light:rgba(var(--paper-rgb),0.06);    /* light glass variant */
  --glass-border:rgba(255,255,255,0.10);           /* 1px hairline */
  --glass-border-gold:rgba(var(--accent-rgb),0.22);
  --glass-blur:14px;
  --glass-blur-strong:22px;
  --glass-shadow:0 8px 32px rgba(var(--shadow-rgb),0.35);
  --glass-shadow-lift:0 18px 44px rgba(var(--shadow-rgb),0.45);
  --glass-highlight:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0) 40%);

  /* Z-depth scale */
  --z-mesh:0;--z-content:2;--z-nav:100;--z-progress:200;--z-modal:500;--z-float:999;

  /* 8pt spacing scale */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:48px;--s-7:64px;--s-8:80px;--s-9:96px;

  /* Modular type scale (1.25 ratio on 16px base; display uses clamp) */
  --fs-xs:0.72rem;--fs-sm:0.8rem;--fs-base:0.95rem;--fs-md:1.05rem;--fs-lg:1.25rem;
  --fs-xl:1.5rem;--fs-2xl:2rem;--fs-3xl:clamp(2rem,3.5vw,3rem);--fs-display:clamp(3rem,5.5vw,5.2rem);

  /* Motion tokens — transform/opacity only, nothing >600ms */
  --dur-micro:150ms;--dur-fast:250ms;--dur-reveal:450ms;--dur-max:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.4,0,.2,1);
  --lift:-5px;                                /* card hover lift */
}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--text);line-height:1.65;overflow-x:hidden;}

/* ── Glass utilities ── */
.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);}
.glass-strong{background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur-strong));-webkit-backdrop-filter:blur(var(--glass-blur-strong));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);}
.glass-light{background:var(--glass-bg-light);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);}
.glass-gold{border-color:var(--glass-border-gold);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-light{background:rgba(var(--surface-rgb),0.92);}
  .glass-strong{background:rgba(var(--glass-strong-rgb),0.96);}
}

/* ── Shared buttons ── */
.btn-gold{background:var(--gold);color:var(--navy);padding:15px 34px;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:background var(--dur-micro),transform var(--dur-micro),box-shadow var(--dur-micro);display:inline-block;}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);}
.btn-gold:active{transform:translateY(0);}
.btn-ghost{background:transparent;color:var(--white);padding:15px 34px;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;text-decoration:none;border:1.5px solid rgba(255,255,255,0.28);cursor:pointer;transition:border-color var(--dur-micro),color var(--dur-micro);display:inline-block;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}

/* ── Section primitives ── */
section{padding:100px 64px;}
.section-inner{max-width:1240px;margin:0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--gold);}
.section-h{font-family:'Cormorant Garamond',serif;font-size:var(--fs-3xl);color:var(--white);line-height:1.1;margin-bottom:16px;}
.section-h em{font-style:italic;color:var(--gold);}
.section-sub{font-size:0.95rem;color:var(--muted);max-width:540px;line-height:1.8;margin-bottom:56px;}

/* ── Focus visibility (global) ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.btn-gold:focus-visible{outline-color:var(--white);}

/* ── Link underline draw ── */
.wa-underline{position:relative;text-decoration:none;}
.wa-underline::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-out);}
.wa-underline:hover::after,.wa-underline:focus-visible::after{transform:scaleX(1);}

/* ── Scroll-reveal base (active only under html.wa-anim; see head bootstrap) ── */
.wa-anim .eyebrow,
.wa-anim .section-h,
.wa-anim .section-sub,
.wa-anim .wa-r{opacity:0;translate:0 24px;transition:opacity var(--dur-max) var(--ease-out),translate var(--dur-max) var(--ease-out);}
.wa-anim .wa-stagger>*{opacity:0;translate:0 24px;transition:opacity var(--dur-max) var(--ease-out),translate var(--dur-max) var(--ease-out);}
.wa-anim .eyebrow.wa-in,
.wa-anim .section-h.wa-in,
.wa-anim .section-sub.wa-in,
.wa-anim .wa-r.wa-in,
.wa-anim .wa-stagger>.wa-in{opacity:1;translate:0 0;}

/* ── Reduced motion: neutralise all animation/transition, reveal everything ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .slide.active .slide-bg{transform:none!important;}
  .slide.active .slide-glow{animation:none!important;}
  #wa-progress{display:none;}
}
