/* ==========================================================================
   Opalo Design Tokens — DARK MODE ONLY
   Source: opalo-design-system.md + Theme.swift
   Philosophy: "95% neutral, 5% opal fire."
   ========================================================================== */

:root {
  /* --- Backgrounds (blue-violet tinted, not pure black) --- */
  --bg-primary: #0D0D12;
  --bg-surface: #141419;

  /* --- Text (cool-tinted for opal cohesion) --- */
  --text-primary: #EEEEF2;
  --text-secondary: #9999A8;
  --text-placeholder: #9999A8;

  /* --- Opal Accents (desaturated, ~25% saturation) --- */
  --accent: #7BA4C7;
  --accent-secondary: #9B8FC4;

  /* --- Opal Gradient Stops (the brand moment) --- */
  --opal-teal: #7CB5AD;
  --opal-blue: #7BA4C7;
  --opal-violet: #9B8FC4;
  --opal-rose: #B89AA0;
  --opal-peach: #C4A08A;

  /* --- Icons --- */
  --icon-active: #FFFFFF;
  --icon-inactive: #2A2A36;

  /* --- Composites --- */
  --opal-gradient: linear-gradient(
    135deg,
    var(--opal-teal),
    var(--opal-blue),
    var(--opal-violet),
    var(--opal-rose),
    var(--opal-peach)
  );

  /* --- CTA --- */
  --cta-bg: #FFFFFF;
  --cta-text: #0D0D12;

  /* --- Spacing --- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* --- Radius (matches iOS components) --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* --- Typography --- */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'SF Pro Text', system-ui, sans-serif;

  --font-size-hero: clamp(36px, 8vw, 56px);
  --font-size-subhead: clamp(18px, 3.5vw, 24px);
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;

  /* --- Layout --- */
  --content-max-width: 480px;
  --page-padding-x: 24px;

  /* --- Animation --- */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --opal-rotation-duration: 8s;
}