/* ============================================================================
   SMK & Co. — design tokens
   Loaded first. Contains custom properties and nothing else.
   A colour literal outside this file is a bug, not a style choice.

   Values are the amended §3 palette: warm graphite neutrals, one blue accent
   that means interactive and nothing else.
   ============================================================================ */

:root{
  /* --- grounds ------------------------------------------------------------ */
  --surface:#FFFFFF;                  /* primary ground, everywhere */
  --surface-warm:#FFFFFF;             /* 1 Oct 2026: pure white grounds. The warm greige bands
  --surface-tint:#FFFFFF;                (#FAF9F7, #F4F2EE) read as off-white; hairlines carry
                                         the band rhythm instead. Revisit with the palette round. */

  /* --- dark surfaces ------------------------------------------------------ */
  --ink:#1C1B19;
  --ink-2:#292724;

  /* --- text --------------------------------------------------------------- */
  --text:#57534E;
  --text-muted:#6B655F;

  /* --- on dark ------------------------------------------------------------ */
  --on-ink:var(--surface-warm);
  --on-ink-muted:#A8A29B;
  --line-on-ink:color-mix(in srgb,var(--surface) 15%,transparent);

  /* --- accent. Means interactive: links, hover, focus, active. Nothing else. */
  --accent:#2F6FA3;
  --accent-ink:#255A86;
  --accent-on-ink:#8FB8D8;            /* accent on dark grounds */
  --accent-wash:#EAF1F7;              /* interaction surface: active row, hovered row */
  --accent-line:color-mix(in srgb,var(--accent) 40%,transparent);

  /* --- status ------------------------------------------------------------- */
  --danger:#B4483A;

  /* --- lines -------------------------------------------------------------- */
  --line:#E7E4DF;
  --placeholder:#E4E0DA;              /* empty image slot. warm counterpart of the
                                         cool greys it replaces. Goes at Stage 9. */

  /* --- type --------------------------------------------------------------- */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- type scale. Nine steps, one ladder, every page. --------------------
     Each step clamps to its target at desktop; the ratio between steps holds
     at every width. D1 is the H1 on every page and nothing is larger. */
  --text-d1:clamp(2.25rem,5.2vw,4rem);        /* 36 -> 64 */
  --text-d2:clamp(1.75rem,3.6vw,2.75rem);     /* 28 -> 44 */
  --text-h1:clamp(1.5rem,2.6vw,2rem);         /* 24 -> 32 */
  --text-h2:clamp(1.25rem,1.9vw,1.5rem);      /* 20 -> 24 */
  --text-h3:1.125rem;                         /* 18 */
  --text-lead:1.125rem;                       /* 18 */
  --text-body:1rem;                           /* 16 */
  --text-sm:.875rem;                          /* 14 */
  --text-label:.75rem;                        /* 12 */

  --lh-d1:1.02;  --lh-d2:1.08;  --lh-h1:1.15; --lh-h2:1.2;  --lh-h3:1.3;
  --lh-lead:1.6; --lh-body:1.65; --lh-sm:1.55; --lh-label:1.4;

  --ls-d1:-.028em; --ls-d2:-.022em; --ls-h1:-.016em; --ls-h2:-.012em;
  --ls-h3:-.006em; --ls-label:.1em;

  --w-regular:400; --w-medium:500; --w-display:600;

  /* --- metrics ------------------------------------------------------------ */
  --nav-h:64px;                       /* fixed bar height; every offset reads this */
  --container:1240px;
  --gutter:clamp(20px,5vw,64px);
  --radius:3px;
  --radius-sm:2px;

  /* --- elevation ---------------------------------------------------------- */
  --shadow-panel:-30px 0 60px -30px color-mix(in srgb,var(--ink) 60%,transparent);
  --shadow-soft:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 18px 40px -24px color-mix(in srgb,var(--ink) 20%,transparent);
  --shadow-lift:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 34px 60px -30px color-mix(in srgb,var(--ink) 26%,transparent);

  /* --- motion ------------------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-pop:cubic-bezier(.3,1.4,.5,1);   /* ~5% overshoot: a pop, not a bounce */
}

/* --- the glass light. Where a soft light sits on a glass surface (the menu
   panels, the technology edge); js/site.js moves it with the pointer.
   Registered so the position can transition, which is what makes the light
   glide rather than jump. Inherited, because the pseudo-elements that paint
   the light read it from the surface. Each surface sets its own rest. */
@property --mx{syntax:"<length-percentage>";inherits:true;initial-value:50%}
@property --my{syntax:"<length-percentage>";inherits:true;initial-value:0%}