/* ==========================================================================
   Design tokens. Everything visual is derived from these custom properties,
   so a palette or scale change happens in exactly one place.
   ========================================================================== */

@layer tokens {
  :root {
    color-scheme: dark;

    /* Lets height/block-size animate to and from `auto`. */
    interpolate-size: allow-keywords;

    /* --- Surfaces ------------------------------------------------------- */
    --ink-900: #070a12;
    --ink-800: #0b0f1a;
    --ink-700: #111726;
    --ink-600: #182033;
    --ink-500: #232d45;

    /* --- Accents --------------------------------------------------------
       Each accent pairs a light hue with a deeper one; gradients mix from
       the first into the second. */
    --sand: #d89584;
    --sky: #5ec8f2;
    --violet: #8b7bf7;
    --emerald: #4ade80;
    --amber: #fbbf24;

    --sky-deep: #3b82f6;
    --violet-deep: #a855f7;
    --emerald-deep: #14b8a6;
    --amber-deep: #f97316;

    /* --- Text ----------------------------------------------------------- */
    --paper: #f4f4f4;
    --text-strong: color-mix(in srgb, var(--paper) 95%, transparent);
    --text: color-mix(in srgb, var(--paper) 72%, transparent);
    --text-muted: color-mix(in srgb, var(--paper) 55%, transparent);
    --text-faint: color-mix(in srgb, var(--paper) 38%, transparent);

    /* --- Lines & fills -------------------------------------------------- */
    --line: color-mix(in srgb, var(--paper) 10%, transparent);
    --line-strong: color-mix(in srgb, var(--paper) 22%, transparent);
    --fill: color-mix(in srgb, var(--paper) 4%, transparent);
    --fill-hover: color-mix(in srgb, var(--paper) 6%, transparent);

    /* --- Type ----------------------------------------------------------- */
    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Fluid scale: grows with the viewport, no breakpoints needed. */
    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
    --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.35rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.9rem);
    --step-3: clamp(1.8rem, 1.45rem + 1.75vw, 3rem);
    --step-4: clamp(2.6rem, 1.8rem + 4vw, 5rem);

    /* --- Space & shape -------------------------------------------------- */
    --shell: 72rem;
    --gutter: clamp(1.25rem, 4vw, 2rem);
    --section-gap: clamp(4.5rem, 10vw, 7.5rem);

    --radius-sm: 0.5rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;

    /* --- Motion --------------------------------------------------------- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --speed-fast: 180ms;
    --speed: 300ms;
    --speed-slow: 700ms;
  }
}