/* ==========================================================================
   Design tokens — the single source of truth for colour, type, space, motion
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Colour: surfaces ------------------------------------------------- */
  --c-void:        #04040b;
  --c-abyss:       #070713;
  --c-deep:        #0b0b1b;
  --c-surface:     rgba(20, 20, 42, 0.66);
  --c-surface-2:   rgba(28, 26, 56, 0.78);
  --c-surface-3:   rgba(38, 34, 72, 0.55);
  --c-line:        rgba(168, 85, 247, 0.28);
  --c-line-soft:   rgba(255, 255, 255, 0.08);

  /* --- Colour: accents -------------------------------------------------- */
  --c-violet:        #a855f7;
  --c-violet-bright: #c77dff;
  --c-magenta:       #ff4ecd;
  --c-cyan:          #5ee7ff;
  --c-lime:          #8ef0a8;

  /* --- Colour: text ----------------------------------------------------- */
  --c-text:      #eeecf8;
  --c-text-dim:  #b7b3d2;
  --c-text-mute: #8a86a8;

  /* --- Gradients & glows ------------------------------------------------ */
  --grad-accent:  linear-gradient(100deg, var(--c-violet-bright), var(--c-magenta) 52%, var(--c-violet));
  --grad-cool:    linear-gradient(100deg, var(--c-cyan), var(--c-violet-bright));
  --grad-surface: linear-gradient(160deg, rgba(48, 42, 96, 0.55), rgba(12, 12, 28, 0.72));
  --glow-violet:  0 0 0 1px rgba(168, 85, 247, 0.35), 0 0 32px -8px rgba(168, 85, 247, 0.55);
  --glow-strong:  0 0 0 1px rgba(199, 125, 255, 0.55), 0 0 48px -6px rgba(199, 125, 255, 0.7);

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.2vw,  1.06rem);
  --step-1:  clamp(1.1rem,  1.03rem + 0.35vw, 1.3rem);
  --step-2:  clamp(1.32rem, 1.18rem + 0.65vw, 1.7rem);
  --step-3:  clamp(1.6rem,  1.35rem + 1.2vw,  2.3rem);
  --step-4:  clamp(1.95rem, 1.5rem + 2.2vw,   3.2rem);
  --step-5:  clamp(2.4rem,  1.6rem + 3.8vw,   4.6rem);

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-body:  1.68;
  --tracking-wide: 0.16em;

  /* --- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);
  --space-3xl: clamp(5rem, 3rem + 8vw, 9rem);

  /* --- Layout ----------------------------------------------------------- */
  --container:       75rem;   /* 1200px */
  --container-wide:  84rem;
  --container-text:  46rem;
  --gutter:          clamp(1.15rem, 0.7rem + 2.2vw, 2.75rem);
  --header-h:        4.5rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 40px -12px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, 0.85);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index scale ---------------------------------------------------- */
  --z-backdrop: 0;
  --z-content:  1;
  --z-float:    70;
  --z-header:   80;
  --z-drawer:   90;
  --z-overlay:  100;
}

@media (min-width: 60em) {
  :root { --header-h: 5.25rem; }
}