/* ==========================================================================
   Actra — design tokens
   Single source of truth for colour, type, space, motion.
   ========================================================================== */

:root {
  /* --- Surface -------------------------------------------------------- */
  --ink-950: #04030b;
  --ink-900: #07050f;
  --ink-850: #0b0719;
  --ink-800: #100a22;
  --ink-700: #1a1138;

  /* --- Brand (sampled from the mark) ---------------------------------- */
  --violet-700: #2a1c9e;
  --violet-600: #3b2bd4;
  --violet-500: #5a4cfb;
  --violet-400: #7c6dff;
  --lilac-300: #b6adff;
  --lilac-200: #dad6ff;
  --paper: #f4f2ff;

  /* --- Text ----------------------------------------------------------- */
  --text: #ece9ff;
  --text-dim: #a49bd0;
  --text-mute: #7a719d;
  --text-faint: #564e78;

  /* --- Lines & fills -------------------------------------------------- */
  --line: rgba(182, 173, 255, 0.11);
  --line-strong: rgba(182, 173, 255, 0.22);
  --line-hot: rgba(124, 109, 255, 0.55);
  --fill-soft: rgba(124, 109, 255, 0.05);
  --panel-bg: rgba(10, 7, 24, 0.72);

  /* --- Type ------------------------------------------------------------
     Archivo carries a width axis. Display type runs expanded and heavy so it
     reads as engineered rather than editorial; metadata runs monospaced.
     -------------------------------------------------------------------- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wide-xl: 118%;
  --wide-lg: 112%;
  --wide-md: 106%;

  --step--2: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --step--1: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
  --step-0:  clamp(0.938rem, 0.9rem + 0.19vw, 1.031rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.38vw, 1.313rem);
  --step-2:  clamp(1.313rem, 1.15rem + 0.81vw, 1.75rem);
  --step-3:  clamp(1.625rem, 1.32rem + 1.53vw, 2.5rem);
  --step-4:  clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.3rem + 6vw, 5.75rem);

  /* --- Space ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 60px;
  --s-9: 80px;
  --s-10: 104px;
  --s-11: clamp(64px, 6.5vw, 116px);

  --gutter: clamp(20px, 3.4vw, 60px);
  --shell-max: 1880px;
  --measure: 62ch;

  /* --- Radius --------------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 10px;

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-mid: 380ms;
  --t-slow: 720ms;

  /* --- Layers --------------------------------------------------------- */
  --z-backdrop: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-overlay: 90;

  --nav-h: 68px;
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; }
}