/* =========================================================
   Design tokens — the single source of truth for the look.
   ========================================================= */
:root {
  color-scheme: dark;

  /* ---- Colour: surfaces ---- */
  --c-bg:          #06050a;
  --c-bg-raised:   #0c0a12;
  --c-surface:     #12101a;
  --c-surface-2:   #1a1724;
  --c-line:        rgb(255 255 255 / 0.08);
  --c-line-strong: rgb(255 255 255 / 0.16);

  /* ---- Colour: text ---- */
  --c-text:   #f3f1f7;
  --c-text-2: #bdb8ca;
  --c-text-3: #8a849c;

  /* ---- Colour: accents ----
     Violet = brand / moonlight. Green = the cat's eyes.
     Use green sparingly: it marks "the cat is here". */
  --c-violet:      #8b5cf6;
  --c-violet-hi:   #b18cff;
  --c-violet-deep: #4c1d95;
  --c-green:       #9be15d;
  --c-green-hi:    #c6ff8a;
  --c-green-deep:  #3f7a1f;

  --grad-accent: linear-gradient(100deg, var(--c-violet-hi) 0%, var(--c-violet) 55%, #7c3aed 100%);

  /* ---- Glows ---- */
  --glow-violet: 0 0 24px rgb(139 92 246 / 0.45), 0 0 64px rgb(139 92 246 / 0.18);
  --glow-green:  0 0 18px rgb(155 225 93 / 0.55), 0 0 48px rgb(155 225 93 / 0.18);

  /* ---- Typography ---- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand:    "Caveat", "Segoe Script", cursive;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-xl:   clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --fs-hero: clamp(2.1rem, 4.4vw, 5.6rem);
  --fs-mega: clamp(2.6rem, 1rem + 6vw, 7rem);

  --tracking-wide:  0.32em;
  --tracking-tight: -0.02em;

  /* ---- Spacing (4px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-pad: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --container: 1320px;

  /* ---- Shape ---- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* ---- Layers ---- */
  --z-cat: 40;
  --z-header: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}