/* ============================================================
   NEXO · Creator Monetization Network — DESIGN TOKENS
   Single source of truth. Layer 1: primitive -> Layer 2: semantic
   ============================================================ */

:root {
  /* ——— Primitive colors ——— */
  --c-white: #FFFFFF;
  --c-paper: #F5F8FD;
  --c-paper-deep: #EAF1FB;
  --c-ink: #0A1E3D;
  --c-ink-2: #122A52;
  --c-ink-soft: #3E4F6E;
  --c-muted: #5D6B85;
  --c-faint: #8A97AE;
  --c-blue-500: #3D78FF;
  --c-blue-600: #1E5EFF;
  --c-blue-700: #1646D1;
  --c-blue-900: #0B2A8A;
  --c-navy-800: #0C2549;
  --c-navy-900: #081A36;
  --c-orange-400: #FF8A3B;
  --c-orange-500: #FF7A1A;
  --c-orange-600: #FF6B1A;
  --c-orange-700: #E8540B;
  --c-sky-100: #E4EDFC;
  --c-sky-200: #CFE0FB;
  --c-border: #DCE6F5;
  --c-border-strong: #C3D4EF;
  --c-green-500: #10B981;
  --c-red-500: #E5484D;

  /* ——— Primitive fonts ——— */
  --f-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* ——— Semantic (purpose aliases) ——— */
  --color-bg: var(--c-white);
  --color-bg-alt: var(--c-paper);
  --color-surface: var(--c-white);
  --color-ink: var(--c-ink);
  --color-body: var(--c-ink-soft);
  --color-muted: var(--c-muted);
  --color-brand: var(--c-blue-600);
  --color-brand-dark: var(--c-blue-700);
  --color-brand-ink: var(--c-navy-900);
  --color-accent: var(--c-orange-600);
  --color-accent-strong: var(--c-orange-700);
  --color-border: var(--c-border);
  --color-success: var(--c-green-500);
  --color-danger: var(--c-red-500);

  --font-display: var(--f-display);
  --font-body: var(--f-body);
  --font-mono: var(--f-mono);

  /* ——— Typographic scale (fluid) ——— */
  --text-hero: clamp(2.7rem, 6.2vw, 4.9rem);
  --text-h1: clamp(2.15rem, 4.6vw, 3.4rem);
  --text-h2: clamp(1.65rem, 3.4vw, 2.45rem);
  --text-h3: clamp(1.2rem, 2vw, 1.55rem);
  --text-body: clamp(1.02rem, 1.1vw, 1.125rem);
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;

  /* ——— Spacing rhythm ——— */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --section-gap: clamp(4.5rem, 9vw, 8.5rem);

  /* ——— Radii & elevation ——— */
  --radius-card: 22px;
  --radius-pill: 999px;
  --radius-md: 14px;
  --shadow-sm: 0 2px 10px rgba(10, 30, 61, 0.06);
  --shadow-md: 0 12px 34px rgba(10, 30, 61, 0.10);
  --shadow-lg: 0 28px 64px rgba(10, 30, 61, 0.16);
  --ring-focus: 0 0 0 4px rgba(30, 94, 255, 0.28);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
}