/* ===========================================================================
   TOKENS — palette, type, scale, themes.
   Design language: "device chrome" — cool light greys, near-black ink, and
   saturated app-icon accents that each product owns.
   =========================================================================== */

/* Registering --accent as a real colour lets it TRANSITION when the scroll
   takeover swaps it. Without this it would snap. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #4f2bff;
}

:root {
  /* --- surface + ink ---------------------------------------------------- */
  --paper: #edeef2;
  --paper-2: #e4e6ec;
  --surface: #f7f8fa;
  --ink: #0b0c12;
  --ink-2: #4b4e5c;
  --line: rgba(11, 12, 18, 0.14);
  --line-strong: rgba(11, 12, 18, 0.28);
  --accent-ink: #ffffff;
  /* Accents are tuned so white text on them clears 4.5:1. For accent-COLOURED
     text we nudge toward the background's opposite so small labels stay legible.
     Verified against #F7F8FA (light panel) and #14161F (dark panel). */
  --accent-text: color-mix(in srgb, var(--accent) 96%, #000);
  --shadow-lift: 0 1px 0 rgba(11, 12, 18, 0.06), 0 18px 40px -24px rgba(11, 12, 18, 0.4);

  /* --- type ------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
  --display: clamp(3.2rem, 1rem + 11vw, 11rem);

  /* --- space + shape ---------------------------------------------------- */
  --gutter: clamp(1.15rem, 4vw, 4rem);
  --measure: min(1220px, 100% - var(--gutter) * 2);
  --band: clamp(4.5rem, 9vw, 9rem);
  --radius: 16px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 620ms;
}

:root[data-theme="dark"] {
  --paper: #0b0c12;
  --paper-2: #05060a;
  --surface: #14161f;
  --ink: #edeef2;
  --ink-2: #9aa0b2;
  --line: rgba(237, 238, 242, 0.16);
  --line-strong: rgba(237, 238, 242, 0.32);
  --accent-text: color-mix(in srgb, var(--accent) 72%, #fff);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 46px -26px rgba(0, 0, 0, 0.9);
}