/* ==========================================================================
   Design tokens — single source of truth for color, type, spacing, radius.
   Every component must consume these variables, never raw values.
   ========================================================================== */

:root {
  /* Site is dark-only, no light variant — this tells the browser to
     render native widgets (a <select>'s own dropdown popup, scrollbars,
     etc, none of which page CSS can reach) in their dark variant instead
     of defaulting to a plain white one. */
  color-scheme: dark;

  /* --- Color: surface & text (dark theme, matches reference header) --- */
  --color-bg: #050506;
  --color-bg-elevated: rgba(255, 255, 255, 0.035);
  --color-bg-elevated-hover: rgba(255, 255, 255, 0.07);
  --color-border: rgba(246, 241, 232, 0.12);
  --color-border-strong: rgba(246, 241, 232, 0.24);
  --color-text: #f6f1e8;
  --color-text-muted: rgba(246, 241, 232, 0.68);
  --color-text-faint: rgba(246, 241, 232, 0.44);
  --color-surface-translucent: rgba(5, 5, 6, 0.74);
  --backdrop-blur: blur(18px) saturate(1.35);

  /* --- Color: brand (derived from logo — purple > magenta > orange) --- */
  --color-purple: #5b2a86;
  --color-magenta: #c0298b;
  --color-orange: #ff7a1a;
  /* Hover accent for card/link titles across listing pages (Shop, Blog,
     Portfolio, article carousel) — a brighter violet than --color-purple. */
  --color-hover-accent: #9200b0;
  --gradient-brand: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 52%, var(--color-orange) 100%);
  /* Same gradient, deepened purple stop — buttons only (.btn--cta), so the
     lighter --color-purple used everywhere else (wordmark, roadmap line,
     stat numbers, etc.) stays untouched. */
  --gradient-brand-btn: linear-gradient(135deg, #48006d 0%, var(--color-magenta) 52%, var(--color-orange) 100%);
  --shadow-brand: 0 10px 28px 0 rgba(192, 41, 139, 0.28);

  /* --- Typography --- */
  --font-heading: "Unbounded", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-body: 16px;
  --fs-small: 14px;
  --fs-nav: 15px;
  --lh-body: 1.5;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* --- Spacing scale (8px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Layout --- */
  --container-max: 1450px;
  --container-pad: 44px;
  --header-height: 86px;

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 375ms;
  --duration-base: 550ms;
}