/**
 * ViaTravelers Brand Design Tokens (CSS Custom Properties).
 * Matches @bbm/design-tokens/brands/viatravelers.css and DS-v2 OKLCH palette.
 */

:root {
  /* Brand Primary & Hues */
  --vt-ocean-900: #001a4d;
  --vt-ocean-800: #002b80;
  --vt-ocean-700: #003db3;
  --vt-ocean-600: #0047cc; /* Canonical Ocean */
  --vt-ocean-500: #1a5fe6;
  --vt-ocean-400: #4d82eb;
  --vt-ocean-300: #80a6f2;
  --vt-ocean-200: #b3caf8;
  --vt-ocean-100: #e6eeff;
  --vt-ocean-50: #f4f7fd;

  /* Brand Coral Accent (22-28deg hue) */
  --vt-coral-700: #c2410c;
  --vt-coral-600: #ea580c;
  --vt-coral-500: #f97316;
  --vt-coral-400: #fb923c;
  --vt-coral-300: #fdba74;
  --vt-coral-200: #fed7aa;
  --vt-coral-100: #ffedd5;
  --vt-coral-50: #fff7ed;

  /* Brand Aqua Fresh (~190deg hue) */
  --vt-aqua-700: #0369a1;
  --vt-aqua-600: #0284c7;
  --vt-aqua-500: #0ea5e9;
  --vt-aqua-400: #38bdf8;
  --vt-aqua-300: #7dd3fc;
  --vt-aqua-200: #bae6fd;
  --vt-aqua-100: #e0f2fe;
  --vt-aqua-50: #f0f9ff;

  /* Brand Sand Earth Neutral */
  --vt-sand-500: #8c8273;
  --vt-sand-400: #b8b0a2;
  --vt-sand-300: #d6d0c4;
  --vt-sand-200: #e8e4dc;
  --vt-sand-100: #f8f6f0;
  --vt-sand-50: #fdfcf9;

  /* Semantic roles (surface, text, border, link, accent) live in
     color-scheme.css so they can change between light and dark. The legacy
     names below are aliases kept for older markup and the editor canvas. */
  --vt-surface-canvas: var(--vt-surface, #ffffff);
  --vt-surface-chrome: var(--vt-surface-translucent, rgba(255, 255, 255, 0.85));
  --vt-surface-dark: #0f172a;
  --vt-text-primary: var(--vt-text, #0f172a);
  --vt-text-body: var(--vt-text-body-role, #334155);
  --vt-text-inverted: var(--vt-text-inverse, #ffffff);
  --vt-border-decorative: var(--vt-border, #e2e8f0);
  --vt-control-border: var(--vt-border-strong, #cbd5e1);

  /* Typography Families */
  --vt-font-sans: 'Geist Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vt-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --vt-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radii */
  --vt-radius-sm: 4px;
  --vt-radius-md: 8px;
  --vt-radius-lg: 12px;
  --vt-radius-xl: 16px;
  --vt-radius-pill: 9999px;

  /* Gradients */
  --vt-bg-aurora: linear-gradient(135deg, #0047cc 0%, #0ea5e9 50%, #f97316 100%);
  --vt-bg-depth: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --vt-bg-sand: linear-gradient(180deg, #f8f6f0 0%, #ffffff 100%);
}