/*
  Launch Lap design tokens.
  Indigo/violet primary + warm orange accent — modernized version of the
  brand's existing color identity. Dark is primary; light is a fully
  specified second mode, not a fallback.
*/

:root {
  /* ---- Type ---- */
  --font-display: 'Clash Display', 'General Sans', -apple-system, sans-serif;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --type-display-lg: clamp(3rem, 2.1rem + 4vw, 5.75rem);
  --type-display-md: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
  --type-heading-lg: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --type-heading-md: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --type-heading-sm: 1.125rem;
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-caption: 0.75rem;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---- Radius & elevation ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* ---- Semantic (mode-independent) ---- */
  --color-success: oklch(72% 0.16 155);
  --color-warning: oklch(78% 0.15 80);
  --color-error: oklch(64% 0.21 25);
  --color-info: oklch(70% 0.14 260);

  --color-risk-low: oklch(72% 0.15 155);
  --color-risk-medium: oklch(78% 0.14 75);
  --color-risk-high: oklch(64% 0.21 25);

  /* ---- Brand: indigo/violet primary + orange accent ---- */
  --color-brand-500: oklch(58% 0.19 290);
  --color-brand-400: oklch(66% 0.17 290);
  --color-brand-300: oklch(74% 0.14 290);
  --color-orange-500: oklch(72% 0.17 50);
  --color-orange-400: oklch(78% 0.15 52);
}

/* ---------------------------------------------------------------- */
/* Dark — the default, primary mode                                   */
/* ---------------------------------------------------------------- */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --color-surface-0: oklch(14% 0.025 288);
  --color-surface-1: oklch(18% 0.028 288);
  --color-surface-2: oklch(22% 0.03 288);
  --color-surface-3: oklch(27% 0.032 288);
  --color-surface-glass: oklch(22% 0.03 288 / 0.55);

  --color-border: oklch(32% 0.03 288);
  --color-border-strong: oklch(42% 0.035 288);

  --color-text-primary: oklch(97% 0.006 288);
  --color-text-secondary: oklch(80% 0.02 288);
  --color-text-tertiary: oklch(60% 0.025 288);

  --color-primary: var(--color-brand-400);
  --color-primary-strong: oklch(72% 0.15 290);
  --color-primary-contrast: oklch(99% 0.005 290);
  --color-primary-wash: oklch(58% 0.19 290 / 0.16);

  --color-accent: var(--color-orange-400);
  --color-accent-strong: oklch(82% 0.13 52);
  --color-accent-contrast: oklch(16% 0.02 50);
  --color-accent-wash: oklch(72% 0.17 50 / 0.14);

  --shadow-elevation-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px oklch(0% 0 0 / 0.3);
  --shadow-elevation-2: 0 4px 12px oklch(0% 0 0 / 0.35), 0 24px 48px oklch(0% 0 0 / 0.38);
  --shadow-elevation-3: 0 8px 24px oklch(0% 0 0 / 0.45), 0 40px 80px oklch(0% 0 0 / 0.48);

  --glass-blur: 18px;
  --glass-border: oklch(100% 0 0 / 0.09);
}

/* ---------------------------------------------------------------- */
/* Light — a fully-specified second mode                             */
/* ---------------------------------------------------------------- */
:root[data-theme='light'] {
  color-scheme: light;

  --color-surface-0: oklch(98% 0.008 288);
  --color-surface-1: oklch(96% 0.01 288);
  --color-surface-2: oklch(100% 0 0);
  --color-surface-3: oklch(93% 0.012 288);
  --color-surface-glass: oklch(100% 0 0 / 0.62);

  --color-border: oklch(89% 0.012 288);
  --color-border-strong: oklch(78% 0.016 288);

  --color-text-primary: oklch(20% 0.025 288);
  --color-text-secondary: oklch(38% 0.03 288);
  --color-text-tertiary: oklch(52% 0.025 288);

  --color-primary: var(--color-brand-500);
  --color-primary-strong: oklch(48% 0.2 290);
  --color-primary-contrast: oklch(99% 0.005 290);
  --color-primary-wash: oklch(58% 0.19 290 / 0.1);

  --color-accent: var(--color-orange-500);
  --color-accent-strong: oklch(62% 0.19 48);
  --color-accent-contrast: oklch(99% 0.005 50);
  --color-accent-wash: oklch(72% 0.17 50 / 0.12);

  --shadow-elevation-1: 0 1px 2px oklch(20% 0 0 / 0.06), 0 8px 24px oklch(20% 0 0 / 0.06);
  --shadow-elevation-2: 0 4px 12px oklch(20% 0 0 / 0.07), 0 24px 48px oklch(20% 0 0 / 0.08);
  --shadow-elevation-3: 0 8px 24px oklch(20% 0 0 / 0.1), 0 40px 80px oklch(20% 0 0 / 0.12);

  --glass-blur: 14px;
  --glass-border: oklch(20% 0 0 / 0.06);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;
    --color-surface-0: oklch(98% 0.008 288);
    --color-surface-1: oklch(96% 0.01 288);
    --color-surface-2: oklch(100% 0 0);
    --color-surface-3: oklch(93% 0.012 288);
    --color-surface-glass: oklch(100% 0 0 / 0.62);
    --color-border: oklch(89% 0.012 288);
    --color-border-strong: oklch(78% 0.016 288);
    --color-text-primary: oklch(20% 0.025 288);
    --color-text-secondary: oklch(38% 0.03 288);
    --color-text-tertiary: oklch(52% 0.025 288);
    --color-primary: var(--color-brand-500);
    --color-primary-strong: oklch(48% 0.2 290);
    --color-primary-contrast: oklch(99% 0.005 290);
    --color-primary-wash: oklch(58% 0.19 290 / 0.1);
    --color-accent: var(--color-orange-500);
    --color-accent-strong: oklch(62% 0.19 48);
    --color-accent-contrast: oklch(99% 0.005 50);
    --color-accent-wash: oklch(72% 0.17 50 / 0.12);
    --shadow-elevation-1: 0 1px 2px oklch(20% 0 0 / 0.06), 0 8px 24px oklch(20% 0 0 / 0.06);
    --shadow-elevation-2: 0 4px 12px oklch(20% 0 0 / 0.07), 0 24px 48px oklch(20% 0 0 / 0.08);
    --shadow-elevation-3: 0 8px 24px oklch(20% 0 0 / 0.1), 0 40px 80px oklch(20% 0 0 / 0.12);
    --glass-blur: 14px;
    --glass-border: oklch(20% 0 0 / 0.06);
  }
}