/* tokens.css: the single source of truth for colour, type, spacing, easing, duration and stacking.
   SPEC §2.1 (motion) + §3.6 (palette, type scale, gutters). No other CSS file may contain a hex colour,
   except the hero mood gradients (sections.css) and the service card colours.
   SPEC-OWNER-2 O7 (restrained palette): every surface, accent, ring, glow, tint and mood is built from these six —
   light #f0f0fa · lilac #dfe2fa · ink #141522 · dark #0b0d18 · accent #6872f6 (+ the tints below) · ivory #f1f2fa.
   (--morph is a dark/ink step for the interlude; --muted / --line are neutral steps of ink.) No new hues. */

:root{
  /* ---------- palette (SPEC §3.6; the owner likes it, keep it) ---------- */
  --light:#f0f0fa; --ink:#141522; --muted:#686a78; --line:#d8d9e8; --accent:#6872f6;   /* muted ≥ 4.6:1 on light */
  --dark:#0b0d18; --dark-ink:#f1f2fa; --lilac:#dfe2fa; --morph:#101322;
  --white:#ffffff;
  --accent-soft:#b1bcf4;                     /* accent on dark surfaces (service card 3, chips) */
  --accent-deep:#4a54d6;                     /* accent as small text on light / lilac (5.3:1 / 4.6:1) */
  --accent-tint:#e4e6fd;                     /* accent wash on light surfaces (hover fills, rings' halos) */
  --muted-dark:#9497ad;                      /* muted text on dark / ink / morph (≥ 4.5:1 on #0b0d18 and #141522) */
  --line-dark:rgba(241,242,250,.14);         /* hairlines on dark themes */
  --scrim:rgba(11,13,24,.5);                 /* dialog backdrops */
  --glass-dark:rgba(11,13,24,.42);           /* cinema header pill */

  /* --bg / --fg: the page colour pair. theme.js paints the live blend straight onto <body> (background-color + color,
     never a custom property on <html>: that restyles the whole document every frame). The variables are static per
     band (below); bands marked [data-theme-live] also get the live pair while a blend crosses them. */
  --bg:var(--light); --fg:var(--ink);

  /* ---------- type ---------- */
  --font-latin:"Manrope","Heebo",system-ui,sans-serif;   /* Heebo second: Hebrew inside a Latin label still gets Heebo */
  --font-he:"Heebo","Arial Hebrew",sans-serif;
  --fs-mega:clamp(80px,16vw,280px);          /* drift rows */
  --fs-hero:clamp(48px,7.4vw,140px);         /* H1 */
  --fs-display:clamp(56px,10.5vw,190px);     /* contact headline */
  --fs-h2:clamp(48px,8.4vw,168px);           /* chapter titles, caption titles */
  --fs-h3:clamp(40px,6vw,108px);             /* craft title, work title */
  --fs-manifesto:clamp(44px,7.4vw,132px);
  --fs-lead:clamp(18px,1.6vw,26px);
  --fs-body:clamp(16px,1.15vw,19px);
  --fs-label:11px;                           /* every caps label; never smaller */
  --lh-display:.9; --lh-body:1.55;
  --tr-display:-.06em; --tr-label:.14em;

  /* ---------- layout ---------- */
  --gutter:clamp(16px,3.4vw,48px);
  --header-h:72px;
  --r-card:28px; --r-sheet:40px; --r-pill:999px;

  /* ---------- stacking ---------- */
  --z-canvas:0; --z-main:1; --z-hud:40; --z-cta:45; --z-header:50; --z-progress:60;
  --z-curtain:9000; --z-cursor:9999; --z-preloader:10000;

  /* ---------- motion (SPEC §2.1) ---------- */
  /* easings */
  --ease-out:    cubic-bezier(.16,1,.3,1);     /* every entry (expo-out) */
  --ease-in-out: cubic-bezier(.76,0,.24,1);    /* wipes, curtains, slats, page jumps, zooms */
  --ease-back:   cubic-bezier(.34,1.56,.64,1); /* pops, landings (≈10% overshoot) */
  --ease-in:     cubic-bezier(.7,0,.84,0);     /* exits (expo-in) */
  /* durations */
  --d-xs:180ms;   /* hover colour, micro feedback */
  --d-s:320ms;    /* small fades, small exits */
  --d-pop:520ms;  /* back-eased UI pops (chips, cursor blob) */
  --d-m:600ms;    /* UI transitions (header show, dialog) */
  --d-land:760ms; /* back-eased type (wave, stretch, CTA pops) */
  --d-l:900ms;    /* rise, flip, sides-soft, slats, menu links */
  --d-xl:1150ms;  /* sides headlines, media clip reveals */
  --d-fade:500ms; /* the opacity track of every reveal, linear */
  /* staggers */
  --st-char:24ms;  --cap-char:520ms;   /* per char; total never exceeds cap */
  --st-word:40ms;  --cap-word:450ms;
  --st-line:90ms;                      /* sides; rise and sides-soft use 70ms */
  --st-item:70ms;                      /* cards, list items, chips use 50ms */
  /* distances */
  --dx-far:70vw; --dx-near:8vw; --skew:12deg; --lag:1.4em; --dy-mask:112%;
  --exit-near:6vw; --exit-far:40vw;
  /* fast-scroll compression (JS sets .55 on a host) */
  --tempo:1;
}

/* Theme palettes: every [data-theme] band (and the header) exposes its own pair, so a section that paints
   its own background can write `background:var(--t-bg); color:var(--t-fg)`. Values match SPEC §3.9.2. */
[data-theme=light]{--t-bg:var(--light); --t-fg:var(--ink);      --t-muted:var(--muted);      --t-line:var(--line);      --t-type:light}
[data-theme=lilac]{--t-bg:var(--lilac); --t-fg:var(--ink);      --t-muted:var(--ink);        --t-line:var(--line);      --t-type:light}
[data-theme=morph]{--t-bg:var(--morph); --t-fg:var(--dark-ink); --t-muted:var(--muted-dark); --t-line:var(--line-dark); --t-type:dark}
[data-theme=dark] {--t-bg:var(--dark);  --t-fg:var(--dark-ink); --t-muted:var(--muted-dark); --t-line:var(--line-dark); --t-type:dark}
[data-theme=ink]  {--t-bg:var(--ink);   --t-fg:var(--dark-ink); --t-muted:var(--muted-dark); --t-line:var(--line-dark); --t-type:dark}
/* The static page pair inside each band (what --bg / --fg resolve to there), and the hover-roll ink (cursor.css reads
   --roll-ink): the plain accent fails as 11 px text on light and lilac (3.5 / 3.1:1), so those bands roll in the
   deep accent; dark bands keep the accent (≥ 4.6:1). */
[data-theme=light],[data-theme=lilac]{--bg:var(--t-bg); --fg:var(--t-fg); --roll-ink:var(--accent-deep)}
[data-theme=morph],[data-theme=dark],[data-theme=ink]{--bg:var(--t-bg); --fg:var(--t-fg); --roll-ink:var(--accent)}

html.mobile{--tempo:.85; --header-h:60px; --fs-label:12px}
:lang(he){--tr-display:-.02em; --lh-display:1}
:lang(he) :is(h1,h2,h3,.display){font-family:var(--font-he);font-weight:600}