/* ========================================
   DESIGN TOKENS — Vanguard Digital
   Aesthetic: "Atelier Dispatch"
   Editorial dark · sapphire navy · cool ivory
   Palette anchored to the shield-V brand mark.
   ======================================== */

/* ============================================
   TIER 1: PRIMITIVES
   ============================================ */
:root {
  /* Ink — deep navy-tinted night */
  --raw-ink-950: #060911;
  --raw-ink-900: #0B0F1C;
  --raw-ink-850: #10152A;
  --raw-ink-800: #151B36;
  --raw-ink-700: #1D2547;
  --raw-ink-600: #2A3560;

  /* Ivory — cool off-white, faint blue undertone */
  --raw-ivory-50:  #F4F6FC;
  --raw-ivory-100: #EDF0F8;
  --raw-ivory-300: #CCD3E5;
  --raw-ivory-500: #8E95AE;
  --raw-ivory-700: #5C617A;

  /* Sapphire / Royal — the brand accent family */
  --raw-sapphire-100: #D8E3FF;
  --raw-sapphire-300: #8FA6FF;
  --raw-sapphire-400: #6684FF;      /* primary accent */
  --raw-sapphire-500: #4361EE;
  --raw-sapphire-600: #2B45CC;
  --raw-sapphire-700: #1C3A87;      /* logo navy */
  --raw-sapphire-800: #132556;

  /* Oxblood — loss */
  --raw-oxblood: #B3414F;
  --raw-oxblood-deep: #7A1F2B;

  /* Sage / Teal — gain */
  --raw-sage: #5BCBA4;
  --raw-sage-deep: #2F8A6B;

  /* Radius */
  --raw-radius-xs: 4px;
  --raw-radius-sm: 8px;
  --raw-radius-md: 12px;
  --raw-radius-lg: 18px;
  --raw-radius-xl: 24px;
  --raw-radius-2xl: 32px;
  --raw-radius-pill: 999px;
}

/* ============================================
   TIER 2: SEMANTIC
   ============================================ */
:root {
  /* --- Backgrounds --- */
  --color-page: var(--raw-ink-950);
  --color-surface: var(--raw-ink-900);
  --color-surface-raised: var(--raw-ink-850);
  --color-surface-elevated: var(--raw-ink-800);

  /* --- Text --- */
  --color-text: var(--raw-ivory-50);
  --color-text-strong: var(--raw-ivory-100);
  --color-text-muted: var(--raw-ivory-500);
  --color-text-dim: var(--raw-ivory-700);
  --color-text-invert: var(--raw-ink-950);

  /* --- Accent: sapphire --- */
  --color-accent: var(--raw-sapphire-400);
  --color-accent-soft: var(--raw-sapphire-300);
  --color-accent-hot: var(--raw-sapphire-500);
  --color-accent-deep: var(--raw-sapphire-600);
  --color-accent-navy: var(--raw-sapphire-700);
  --color-accent-text: var(--raw-sapphire-300);
  --color-accent-hover: color-mix(in srgb, var(--raw-sapphire-400) 85%, var(--raw-ivory-50));
  --color-accent-subtle: color-mix(in srgb, var(--raw-sapphire-400) 14%, transparent);
  --color-accent-whisper: color-mix(in srgb, var(--raw-sapphire-400) 7%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--raw-sapphire-400) 34%, transparent);

  /* --- State colors --- */
  --color-loss: var(--raw-oxblood);
  --color-loss-glow: color-mix(in srgb, var(--raw-oxblood) 26%, transparent);
  --color-gain: var(--raw-sage);
  --color-gain-glow: color-mix(in srgb, var(--raw-sage) 28%, transparent);
  --color-success: var(--raw-sage);

  /* --- Borders / hairlines --- */
  --color-hairline: rgba(244, 246, 252, 0.08);
  --color-hairline-strong: rgba(244, 246, 252, 0.14);
  --color-border: rgba(244, 246, 252, 0.08);
  --color-border-hover: color-mix(in srgb, var(--raw-sapphire-400) 42%, transparent);

  /* --- Spotlight --- */
  --spotlight-color: color-mix(in srgb, var(--raw-sapphire-400) 14%, transparent);
  --spotlight-size: 420px;
  --spotlight-opacity: 0;

  /* --- Interactive --- */
  --color-focus-ring: var(--raw-sapphire-400);

  /* --- Selection --- */
  --color-selection-bg: color-mix(in srgb, var(--raw-sapphire-400) 40%, transparent);
  --color-selection-text: var(--raw-ivory-50);

  /* --- Radius --- */
  --radius-xs: var(--raw-radius-xs);
  --radius-sm: var(--raw-radius-sm);
  --radius-md: var(--raw-radius-md);
  --radius-lg: var(--raw-radius-lg);
  --radius-xl: var(--raw-radius-xl);
  --radius-2xl: var(--raw-radius-2xl);
  --radius-pill: var(--raw-radius-pill);

  /* --- Motion --- */
  --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-crisp: cubic-bezier(0.4, 0, 0.1, 1);
  --transition-smooth: all 0.42s var(--ease-editorial);
  --transition-soft: all 0.26s ease;
  --transition-snap: all 0.18s var(--ease-crisp);

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px var(--color-accent-glow), 0 24px 60px -18px var(--color-accent-glow);

  /* --- Font families --- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-heading: var(--font-display);

  /* --- Fluid type scale --- */
  --fs-xs: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --fs-sm: clamp(0.86rem, 0.82rem + 0.2vw, 0.98rem);
  --fs-base: clamp(1rem, 0.96rem + 0.24vw, 1.125rem);
  --fs-md: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  --fs-lg: clamp(1.26rem, 1.12rem + 0.6vw, 1.55rem);
  --fs-xl: clamp(1.7rem, 1.38rem + 1.2vw, 2.7rem);
  --fs-2xl: clamp(2.2rem, 1.78rem + 1.8vw, 3.6rem);
  --fs-3xl: clamp(2.8rem, 2.1rem + 2.5vw, 4.6rem);
  --fs-hero: clamp(2.8rem, 2rem + 3.6vw, 6.2rem);
  --fs-mega: clamp(4rem, 2rem + 9vw, 10rem);

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --space-section: clamp(4.5rem, 3.2rem + 4vw, 7.5rem);
  --space-section-lg: clamp(5.5rem, 4rem + 5vw, 9rem);

  --w-narrow: 720px;
  --w-default: 1180px;
  --w-wide: 1320px;
}