/* ============================================================
   Design tokens — the single source of truth for the UI.
   See DESIGN_SYSTEM.md before adding a value or token.
   ============================================================ */
:root{
  /* Color */
  --color-bg:#FFFFFF;
  --color-ink:#0B0B0A;
  --color-ink-soft:#242422;
  --color-muted:#76746E;
  --color-muted-on-dark:#A5A39B;
  --color-accent:#0B0B0A;
  --color-accent-contrast:#FFFFFF;
  --color-line:rgba(11,11,10,.1);
  --color-line-on-dark:rgba(255,255,255,.18);
  --color-line-on-dark-strong:rgba(255,255,255,.28);
  --color-on-dark:rgba(255,255,255,.75);
  --color-on-dark-strong:rgba(255,255,255,.9);
  --color-media:#F2F2F0;
  --color-overlay:rgba(11,11,10,.92);
  --color-surface-on-dark:rgba(11,11,10,.5);
  --color-card-overlay:rgba(255,255,255,.94);

  /* Typography */
  --font-display:'Syne',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;
  --text-base:15px;
  --leading-base:1.6;

  /* Layout */
  --container:min(1680px,96vw);
  --section-space:clamp(64px,8vw,120px);
  --radius-pill:999px;
  --radius-sm:0px;

  /* Motion */
  --ease-brand:cubic-bezier(.22,1,.36,1);

  /* Layers */
  --z-float:800;
  --z-nav:900;
  --z-menu:950;
  --z-nav-control:1001;
  --z-progress:1002;
  --z-modal:1200;
  --z-grain:2000;
  --z-toast:3000;
  --z-preloader:9000;
  --z-cursor:9990;
}

/* Dark surfaces invert the neutral tokens without swapping bg/ink. */
.sec--ink,
.pre,
.menu,
.lb{
  --color-line:var(--color-line-on-dark);
  --color-muted:var(--color-muted-on-dark);
  --color-accent:var(--color-bg);
  --color-accent-contrast:var(--color-ink);
}