/* ================================================================
   SLOPPYXBABY DESIGN TOKENS — Single Source of Truth
   ================================================================
   Do not add one-off hex/rgba values to components. Extend this file
   instead. All themes use the same semantic token names so components
   never need to know which mode is active.

   Usage:
     - React: import '@/styles/tokens.css' before component CSS.
     - Static HTML: link /src/styles/tokens.css (Vite serves src/).
     - Legacy aliases (--color-canvas, --color-ink, etc.) are preserved
       below for backward compatibility.
   ================================================================ */

:root {
  /* ---- THEME FLAG ---- */
  --theme: light;

  /* ---- SEMANTIC CANVAS ---- */
  --bg: var(--_bg-light);
  --bg-warm: var(--_bg-warm-light);
  --bg-elevated: var(--_bg-elevated-light);

  /* ---- SEMANTIC INK ---- */
  --fg: var(--_fg-light);
  --fg-2: var(--_fg-2-light);
  --muted: var(--_muted-light);

  /* ---- SEMANTIC ACCENT ---- */
  --accent: var(--_accent-light);
  --accent-glow: var(--_accent-glow-light);
  --accent-soft: var(--_accent-soft-light);
  --accent-dim: var(--_accent-dim-light);
  --accent-faint: var(--_accent-faint-light);

  /* ---- SIGNAL (secondary accent, often cyan) ---- */
  --signal: var(--_signal-light);

  /* ---- SEMANTIC SURFACES ---- */
  --surface: var(--_surface-light);
  --surface-solid: var(--_surface-solid-light);
  --surface-hover: var(--_surface-hover-light);

  /* ---- SEMANTIC BORDERS ---- */
  --border: var(--_border-light);
  --border-strong: var(--_border-strong-light);
  --innerlight: var(--_innerlight-light);

  /* ---- SEMANTIC STATE ---- */
  --danger: var(--_danger-light);
  --danger-deep: var(--_danger-deep-light);
  --danger-soft: var(--_danger-soft-light);
  --danger-dim: var(--_danger-dim-light);
  --danger-glow: var(--_danger-glow-light);

  --success: var(--_success-light);
  --success-soft: var(--_success-soft-light);
  --success-dim: var(--_success-dim-light);
  --success-deep: var(--_success-deep-light);
  --success-glow: var(--_success-glow-light);

  --warn: var(--_warn-light);
  --warn-soft: var(--_warn-soft-light);
  --warn-dim: var(--_warn-dim-light);
  --warn-deep: var(--_warn-deep-light);
  --warn-glow: var(--_warn-glow-light);

  --info: var(--_info-light);
  --info-soft: var(--_info-soft-light);
  --info-dim: var(--_info-dim-light);
  --info-glow: var(--_info-glow-light);

  /* ---- LUXURY ACCENTS ---- */
  --accent-luxury: var(--_accent-luxury-light);
  --accent-luxury-deep: var(--_accent-luxury-deep-light);
  --accent-luxury-soft: var(--_accent-luxury-soft-light);
  --accent-luxury-dim: var(--_accent-luxury-dim-light);

  /* ---- PREMIUM ACCENTS ---- */
  --gold: var(--_gold-light);
  --gold-soft: var(--_gold-soft-light);
  --gold-deep: var(--_gold-deep-light);
  --gold-glow: var(--_gold-glow-light);
  --pink: var(--_pink-light);
  --pink-soft: var(--_pink-soft-light);
  --pink-dim: var(--_pink-dim-light);
  --pink-glow: var(--_pink-glow-light);

  /* ---- VIOLET ACCENT ---- */
  --violet: var(--_violet-light);
  --violet-soft: var(--_violet-soft-light);
  --violet-dim: var(--_violet-dim-light);

  /* ---- DARK TECHNICAL SURFACES (shared, mode-agnostic) ---- */
  --slate: #0f172a;
  --slate-2: #1e293b;
  --slate-dim: #64748b;
  --slate-muted: #94a3b8;
  --slate-light: #e2e8f0;
  --slate-lighter: #f8fafc;
  --slate-mid: #cbd5e1;
  --dark-surface: #1a1a1a;
  --dark-surface-deep: #0f0f0f;
  --dark-text: #ececea;
  --dark-surface-2: #131313;
  --dark-surface-2-deep: #050505;
  --dark-text-2: #f2f2f0;
  --dark-code: #0e0e0e;

  /* ---- TYPOGRAPHY ---- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: var(--font-sans);

  /* ---- TYPE SCALE ---- */
  --text-3xs: 9.5px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-xs-plus: 11.5px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lede: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: clamp(28px, 3.2vw, 40px);
  --text-4xl: clamp(32px, 4.5vw, 56px);
  --text-display: clamp(48px, 7vw, 92px);

  /* ---- LINE HEIGHTS ---- */
  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  /* ---- LETTER SPACING ---- */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.1em;
  --tracking-wide-plus: 0.08em;
  --tracking-extra: 0.12em;

  /* ---- SPACING ---- */
  --space-0: 0px;
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_25: 5px;
  --space-1_5: 6px;
  --space-1_75: 7px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-3_5: 14px;
  --space-4: 16px;
  --space-4_5: 18px;
  --space-5: 20px;
  --space-5_5: 22px;
  --space-6: 24px;
  --space-6_5: 26px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-12_5: 50px;
  --space-13_75: 55px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22_5: 90px;
  --space-24: 96px;
  --space-25: 100px;
  --space-26: 104px;
  --space-27_5: 110px;
  --space-32_5: 130px;
  --space-38_75: 155px;
  --space-40: 160px;
  --space-42_5: 170px;
  --space-45: 180px;
  --space-50: 200px;
  --space-52_5: 210px;
  --space-55: 220px;
  --space-72_5: 290px;
  --space-75: 300px;
  --space-80: 320px;
  --space-87_5: 350px;
  --space-90: 360px;
  --space-100: 400px;
  --space-120: 480px;
  --space-125: 500px;

  /* ---- LAYOUT ---- */
  --content-narrow: 800px;
  --content: 980px;
  --content-prose: 820px;
  --content-wide: 1160px;
  --content-max: 1200px;
  --content-full: 1400px;
  --height-chat: 675px;
  --max-width-message: 85%;

  /* ---- RADIUS ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-2xl: 2rem;
  --radius-shell: 2.25rem;
  --radius-core: calc(2.25rem - 0.4rem);
  --radius-pill: 999px;

  /* ---- MOTION ---- */
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-cta: 160ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 600ms;
  --duration-entrance: 800ms;

  /* ---- INSET HIGHLIGHT ---- */
  --highlight: color-mix(in srgb, var(--bg) 12%, transparent);
  --color-ink-25: color-mix(in srgb, var(--fg) 25%, transparent);
  --color-ink-35: color-mix(in srgb, var(--fg) 35%, transparent);
  --text-on-danger: #ffffff;
  --text-on-info: #ffffff;
  --text-on-accent: #ffffff;
  --text-on-success: #000000;
  --opacity-3: 0.03;
  --size-button: 50px;

  /* ---- SHADOWS ---- */
  --shadow-diffuse: 0 20px 40px -15px color-mix(in srgb, var(--fg) 5%, transparent);
  --shadow-card: 0 0 0 1px var(--border), 0 24px 48px -28px color-mix(in srgb, var(--fg) 18%, transparent);
  --shadow-card-hover: 0 0 0 1px var(--border-strong), 0 30px 70px -22px color-mix(in srgb, var(--fg) 22%, transparent);
  --shadow-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 30px 60px -28px color-mix(in srgb, var(--fg) 22%, transparent);
  --shadow-hero-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 12px 36px -18px color-mix(in srgb, var(--fg) 18%, transparent);
  --shadow-nav-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 12px 36px -18px color-mix(in srgb, var(--fg) 18%, transparent);
  --shadow-pressed: 0 4px 6px -1px color-mix(in srgb, var(--fg) 5%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--fg) 3%, transparent);
  --shadow-button-highlight: inset 0 1px 0 var(--highlight);
  --shadow-nav: var(--shadow-nav-shell);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-strong);
  --shadow-image: 0 12px 30px -16px color-mix(in srgb, var(--fg) 40%, transparent);

  /* ---- Z-INDEX ---- */
  --z-base: 0;
  --z-nav: 50;
  --z-modal: 100;
  --z-skip: 200;

  /* ================================================================
     LIGHT THEME RAW VALUES (private, prefixed with _)
     ================================================================ */
  --_bg-light: #f2f2f0;
  --_bg-warm-light: #fdfbf7;
  --_bg-elevated-light: #e8e8e5;
  --_fg-light: #0a0a0a;
  --_fg-2-light: #18181b;
  --_muted-light: #57575a;
  --_accent-light: #1f4d3f;
  --_accent-glow-light: #5a8c7a;
  --_accent-soft-light: color-mix(in srgb, var(--_accent-light) 12%, transparent);
  --_accent-dim-light: color-mix(in srgb, var(--_accent-light) 6%, transparent);
  --_accent-faint-light: color-mix(in srgb, var(--_accent-light) 3%, transparent);
  --_accent-luxury-light: #6e8b3e;
  --_accent-luxury-deep-light: #444d36;
  --_accent-luxury-soft-light: color-mix(in oklch, var(--_accent-luxury-light) 12%, transparent);
  --_accent-luxury-dim-light: color-mix(in oklch, var(--_accent-luxury-light) 6%, transparent);
  --_signal-light: oklch(58% 0.12 230);
  --_surface-light: color-mix(in srgb, var(--_fg-light) 55%, transparent);
  --_surface-solid-light: #fcfcfa;
  --_surface-hover-light: color-mix(in srgb, var(--_fg-light) 85%, transparent);
  --_border-light: color-mix(in srgb, var(--_fg-light) 8%, transparent);
  --_border-strong-light: color-mix(in srgb, var(--_fg-light) 12%, transparent);
  --_innerlight-light: color-mix(in srgb, var(--_surface-solid-light) 65%, transparent);
  --_danger-light: #cc4444;
  --_danger-deep-light: #991b1b;
  --_danger-soft-light: #fef2f2;
  --_danger-dim-light: #fecaca;
  --_danger-glow-light: #f87171;
  --_success-light: #059669;
  --_success-soft-light: #ecfdf5;
  --_success-dim-light: #a7f3d0;
  --_success-deep-light: #047857;
  --_success-glow-light: #34d399;
  --_warn-light: #d4a843;
  --_warn-soft-light: #fffbeb;
  --_warn-dim-light: #fde68a;
  --_warn-deep-light: #b45309;
  --_warn-glow-light: #fbbf24;
  --_info-light: #4a7fb5;
  --_info-soft-light: #eff6ff;
  --_info-dim-light: #bfdbfe;
  --_info-glow-light: #93c5fd;
  --_gold-light: #d4af37;
  --_gold-soft-light: color-mix(in srgb, var(--_gold-light) 18%, transparent);
  --_gold-deep-light: #aa8a2b;
  --_gold-glow-light: #e8c96a;
  --_pink-light: #ff2e7d;
  --_pink-soft-light: color-mix(in srgb, var(--_pink-light) 12%, transparent);
  --_pink-dim-light: color-mix(in srgb, var(--_pink-light) 25%, transparent);
  --_pink-glow-light: #f472b6;

  /* ---- VIOLET ACCENT (light) ---- */
  --_violet-light: #7c3aed;
  --_violet-soft-light: #f5f3ff;
  --_violet-dim-light: #c4b5fd;

  /* ================================================================
     BACKWARD-COMPATIBILITY ALIASES
     These keep existing React components working while the migration
     to semantic tokens proceeds.
     ================================================================ */
  --color-canvas: var(--bg);
  --color-canvas-warm: var(--bg-warm);
  --color-canvas-2: var(--bg-elevated);
  --color-ink: var(--fg);
  --color-ink-2: var(--fg-2);
  --color-muted: var(--muted);
  --color-sage: var(--accent);
  --color-sage-glow: var(--accent-glow);
  --color-sage-soft: var(--accent-soft);
  --color-sage-dim: var(--accent-dim);
  --color-sage-faint: var(--accent-faint);
  --color-gold: var(--gold);
  --color-gold-soft: var(--gold-soft);
  --color-gold-deep: var(--gold-deep);
  --color-gold-glow: var(--gold-glow);
  --color-pink: var(--pink);
  --color-pink-soft: var(--pink-soft);
  --color-pink-dim: var(--pink-dim);
  --color-danger: var(--danger);
  --color-danger-deep: var(--danger-deep);
  --color-danger-soft: var(--danger-soft);
  --color-danger-dim: var(--danger-dim);
  --color-danger-glow: var(--danger-glow);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-success-dim: var(--success-dim);
  --color-success-deep: var(--success-deep);
  --color-warn: var(--warn);
  --color-warn-soft: var(--warn-soft);
  --color-warn-dim: var(--warn-dim);
  --color-warn-deep: var(--warn-deep);
  --color-info: var(--info);
  --color-info-soft: var(--info-soft);
  --color-info-dim: var(--info-dim);
  --color-info-glow: var(--info-glow);
  --color-surface: var(--surface);
  --color-surface-solid: var(--surface-solid);
  --color-surface-hover: var(--surface-hover);
  --color-hairline: var(--border);
  --color-hairline-strong: var(--border-strong);
  --color-innerlight: var(--innerlight);
}

/* ================================================================
   DARK THEME (Antidote landing page)
   Apply with <html data-theme="dark"> or any ancestor .dark class.
   ================================================================ */
[data-theme="dark"],
.dark {
  --theme: dark;
  --bg: var(--_bg-dark);
  --bg-warm: var(--_bg-warm-dark);
  --bg-elevated: var(--_bg-elevated-dark);
  --fg: var(--_fg-dark);
  --fg-2: var(--_fg-2-dark);
  --muted: var(--_muted-dark);
  --accent: var(--_accent-dark);
  --accent-glow: var(--_accent-glow-dark);
  --accent-soft: var(--_accent-soft-dark);
  --accent-dim: var(--_accent-dim-dark);
  --accent-faint: var(--_accent-faint-dark);
  --signal: var(--_signal-dark);
  --surface: var(--_surface-dark);
  --surface-solid: var(--_surface-solid-dark);
  --surface-hover: var(--_surface-hover-dark);
  --border: var(--_border-dark);
  --border-strong: var(--_border-strong-dark);
  --innerlight: var(--_innerlight-dark);
  --danger: var(--_danger-dark);
  --danger-deep: var(--_danger-deep-dark);
  --danger-soft: var(--_danger-soft-dark);
  --danger-dim: var(--_danger-dim-dark);
  --danger-glow: var(--_danger-glow-dark);
  --success: var(--_success-dark);
  --success-soft: var(--_success-soft-dark);
  --success-dim: var(--_success-dim-dark);
  --success-deep: var(--_success-deep-dark);
  --success-glow: var(--_success-glow-dark);
  --warn: var(--_warn-dark);
  --warn-soft: var(--_warn-soft-dark);
  --warn-dim: var(--_warn-dim-dark);
  --warn-deep: var(--_warn-deep-dark);
  --warn-glow: var(--_warn-glow-dark);
  --info: var(--_info-dark);
  --info-soft: var(--_info-soft-dark);
  --info-dim: var(--_info-dim-dark);
  --info-glow: var(--_info-glow-dark);
  --gold: var(--_gold-dark);
  --gold-soft: var(--_gold-soft-dark);
  --gold-deep: var(--_gold-deep-dark);
  --gold-glow: var(--_gold-glow-dark);
  --pink: var(--_pink-dark);
  --pink-soft: var(--_pink-soft-dark);
  --pink-dim: var(--_pink-dim-dark);
  --pink-glow: var(--_pink-glow-dark);
  --accent-luxury: var(--_accent-luxury-dark);
  --accent-luxury-deep: var(--_accent-luxury-deep-dark);
  --accent-luxury-soft: var(--_accent-luxury-soft-dark);
  --accent-luxury-dim: var(--_accent-luxury-dim-dark);
  --violet: var(--_violet-dark);
  --violet-soft: var(--_violet-soft-dark);
  --violet-dim: var(--_violet-dim-dark);

  /* Dark typography overrides */
  --font-display: 'Schibsted Grotesk', 'Helvetica Now Display', -apple-system, system-ui, sans-serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;

  --shadow-diffuse: 0 20px 40px -15px color-mix(in srgb, #000 25%, transparent);
  --shadow-card: 0 0 0 1px var(--border), 0 24px 48px -28px color-mix(in srgb, #000 35%, transparent);
  --shadow-card-hover: 0 0 0 1px var(--border-strong), 0 30px 70px -22px color-mix(in srgb, #000 45%, transparent);
  --shadow-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 30px 60px -28px color-mix(in srgb, #000 40%, transparent);
  --shadow-hero-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 12px 36px -18px color-mix(in srgb, #000 30%, transparent);
  --shadow-nav-shell: inset 0 1px 0 var(--innerlight), 0 0 0 1px var(--border), 0 12px 36px -18px color-mix(in srgb, #000 30%, transparent);
}

[data-theme="dark"] {
  --_bg-dark: oklch(12% 0.005 260);
  --_bg-warm-dark: oklch(14% 0.006 260);
  --_bg-elevated-dark: oklch(18% 0.01 260);
  --_fg-dark: oklch(96% 0.005 260);
  --_fg-2-dark: oklch(90% 0.01 260);
  --_muted-dark: oklch(70% 0.02 260);
  --_accent-dark: oklch(74% 0.28 145);
  --_accent-glow-dark: oklch(82% 0.24 145);
  --_accent-soft-dark: color-mix(in oklch, var(--_accent-dark) 12%, transparent);
  --_accent-dim-dark: color-mix(in oklch, var(--_accent-dark) 6%, transparent);
  --_accent-faint-dark: color-mix(in oklch, var(--_accent-dark) 3%, transparent);
  --_accent-luxury-dark: #6e8b3e;
  --_accent-luxury-deep-dark: #444d36;
  --_accent-luxury-soft-dark: color-mix(in oklch, var(--_accent-luxury-dark) 12%, transparent);
  --_accent-luxury-dim-dark: color-mix(in oklch, var(--_accent-luxury-dark) 6%, transparent);
  --_signal-dark: oklch(76% 0.13 220);
  --_surface-dark: oklch(18% 0.01 260);
  --_surface-solid-dark: oklch(16% 0.008 260);
  --_surface-hover-dark: oklch(22% 0.012 260);
  --_border-dark: oklch(25% 0.015 260);
  --_border-strong-dark: oklch(32% 0.02 260);
  --_innerlight-dark: color-mix(in oklch, var(--_fg-dark) 8%, transparent);
  --_danger-dark: oklch(62% 0.18 25);
  --_danger-deep-dark: oklch(45% 0.16 25);
  --_danger-soft-dark: color-mix(in oklch, var(--_danger-dark) 12%, transparent);
  --_danger-dim-dark: color-mix(in oklch, var(--_danger-dark) 25%, transparent);
  --_danger-glow-dark: oklch(70% 0.2 25);
  --_success-dark: oklch(65% 0.18 145);
  --_success-soft-dark: color-mix(in oklch, var(--_success-dark) 12%, transparent);
  --_success-dim-dark: color-mix(in oklch, var(--_success-dark) 25%, transparent);
  --_success-deep-dark: oklch(55% 0.16 145);
  --_success-glow-dark: oklch(72% 0.18 155);
  --_warn-dark: oklch(72% 0.16 80);
  --_warn-soft-dark: color-mix(in oklch, var(--_warn-dark) 12%, transparent);
  --_warn-dim-dark: color-mix(in oklch, var(--_warn-dark) 25%, transparent);
  --_warn-deep-dark: oklch(60% 0.14 80);
  --_warn-glow-dark: oklch(80% 0.18 90);
  --_info-dark: oklch(68% 0.14 240);
  --_info-soft-dark: color-mix(in oklch, var(--_info-dark) 12%, transparent);
  --_info-dim-dark: color-mix(in oklch, var(--_info-dark) 25%, transparent);
  --_info-glow-dark: oklch(75% 0.16 240);
  --_gold-dark: oklch(76% 0.16 90);
  --_gold-soft-dark: color-mix(in oklch, var(--_gold-dark) 18%, transparent);
  --_gold-deep-dark: oklch(68% 0.14 90);
  --_gold-glow-dark: oklch(82% 0.18 90);
  --_pink-dark: oklch(65% 0.22 15);
  --_pink-soft-dark: color-mix(in oklch, var(--_pink-dark) 12%, transparent);
  --_pink-dim-dark: color-mix(in oklch, var(--_pink-dark) 25%, transparent);
  --_pink-glow-dark: oklch(75% 0.18 350);

  /* ---- VIOLET ACCENT (dark) ---- */
  --_violet-dark: oklch(65% 0.22 290);
  --_violet-soft-dark: color-mix(in oklch, var(--_violet-dark) 12%, transparent);
  --_violet-dim-dark: color-mix(in oklch, var(--_violet-dark) 28%, transparent);
}

/* ================================================================
   OKLCH PREFERENCE: when browser supports oklch, prefer it for
   gradients and tints. No additional classes required.
   ================================================================ */
@supports (color: oklch(70% 0.2 145)) {
  :root {
    --_accent-light: oklch(42% 0.12 155);
    --_accent-glow-light: oklch(58% 0.14 155);
  }
}