/* ============================================================
   Waymore Better Component Lookbook — Design Tokens
   Layer 1: base theme (brand direction — sets bg/fg/surfaces/type)
   Layer 2: profession (sets primary/accent + content context)
   ============================================================ */

:root {
  /* --- Default neutral (Cloud Dancer) --- */
  --bg:            oklch(96% 0.005 85);
  --bg-elev:       oklch(99% 0.003 85);
  --fg:            oklch(20% 0.02 260);
  --fg-muted:      oklch(45% 0.02 260);
  --fg-subtle:     oklch(62% 0.015 260);
  --border:        oklch(88% 0.008 260);
  --surface:       oklch(99% 0.003 85);
  --surface-2:     oklch(93% 0.006 85);
  --primary:       oklch(42% 0.08 220);
  --primary-fg:    oklch(98% 0 0);
  --accent:        oklch(55% 0.14 30);
  --accent-fg:     oklch(98% 0 0);
  --ring:          oklch(55% 0.14 220 / 0.45);

  /* Type */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --radius-sm: 0.375rem;
  --radius:    0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
  --shadow:    0 4px 12px oklch(0% 0 0 / 0.08), 0 1px 3px oklch(0% 0 0 / 0.04);
  --shadow-lg: 0 20px 50px oklch(0% 0 0 / 0.12), 0 4px 12px oklch(0% 0 0 / 0.05);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  480ms;

  /* Container queries */
  --content-max: 1200px;
}

/* ============================================================
   BASE THEMES (8 Waymore Better brand directions)
   ============================================================ */

[data-theme="coast"] {
  --bg:         oklch(96% 0.012 215);
  --bg-elev:    oklch(99% 0.004 215);
  --fg:         oklch(25% 0.03 230);
  --fg-muted:   oklch(45% 0.04 230);
  --fg-subtle:  oklch(62% 0.03 220);
  --border:     oklch(85% 0.02 215);
  --surface:    oklch(99% 0.004 215);
  --surface-2:  oklch(91% 0.015 215);
  --primary:    oklch(45% 0.12 230);
  --primary-fg: oklch(99% 0 0);
  --accent:     oklch(68% 0.14 200);
  --accent-fg:  oklch(20% 0.03 230);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="mountain"] {
  --bg:         oklch(94% 0.015 75);
  --bg-elev:    oklch(98% 0.008 75);
  --fg:         oklch(22% 0.025 60);
  --fg-muted:   oklch(42% 0.03 60);
  --fg-subtle:  oklch(58% 0.025 60);
  --border:     oklch(82% 0.02 60);
  --surface:    oklch(98% 0.008 75);
  --surface-2:  oklch(88% 0.018 60);
  --primary:    oklch(42% 0.08 45);
  --primary-fg: oklch(97% 0.01 80);
  --accent:     oklch(55% 0.12 140);
  --accent-fg:  oklch(97% 0.01 140);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="mediterranean"] {
  --bg:         oklch(95% 0.018 60);
  --bg-elev:    oklch(98% 0.01 60);
  --fg:         oklch(22% 0.03 30);
  --fg-muted:   oklch(42% 0.035 30);
  --fg-subtle:  oklch(58% 0.03 30);
  --border:     oklch(83% 0.025 50);
  --surface:    oklch(98% 0.01 60);
  --surface-2:  oklch(89% 0.022 50);
  --primary:    oklch(55% 0.15 30);
  --primary-fg: oklch(98% 0.008 60);
  --accent:     oklch(60% 0.12 130);
  --accent-fg:  oklch(98% 0.008 130);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="latin"] {
  --bg:         oklch(96% 0.012 25);
  --bg-elev:    oklch(99% 0.005 25);
  --fg:         oklch(22% 0.03 20);
  --fg-muted:   oklch(42% 0.035 20);
  --fg-subtle:  oklch(58% 0.03 20);
  --border:     oklch(85% 0.02 20);
  --surface:    oklch(99% 0.005 25);
  --surface-2:  oklch(90% 0.02 20);
  --primary:    oklch(55% 0.18 15);
  --primary-fg: oklch(98% 0.006 25);
  --accent:     oklch(65% 0.16 55);
  --accent-fg:  oklch(20% 0.03 30);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="caribbean"] {
  --bg:         oklch(97% 0.01 190);
  --bg-elev:    oklch(99% 0.004 190);
  --fg:         oklch(22% 0.035 210);
  --fg-muted:   oklch(42% 0.04 210);
  --fg-subtle:  oklch(58% 0.035 200);
  --border:     oklch(85% 0.02 190);
  --surface:    oklch(99% 0.004 190);
  --surface-2:  oklch(91% 0.022 190);
  --primary:    oklch(62% 0.16 195);
  --primary-fg: oklch(20% 0.03 210);
  --accent:     oklch(70% 0.15 60);
  --accent-fg:  oklch(20% 0.03 60);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="south"] {
  --bg:         oklch(95% 0.015 130);
  --bg-elev:    oklch(98% 0.008 130);
  --fg:         oklch(22% 0.03 145);
  --fg-muted:   oklch(42% 0.035 145);
  --fg-subtle:  oklch(58% 0.03 145);
  --border:     oklch(83% 0.02 130);
  --surface:    oklch(98% 0.008 130);
  --surface-2:  oklch(89% 0.02 130);
  --primary:    oklch(38% 0.08 150);
  --primary-fg: oklch(97% 0.012 130);
  --accent:     oklch(55% 0.14 35);
  --accent-fg:  oklch(98% 0.006 35);
  --font-display: 'Fraunces', Georgia, serif;
}

[data-theme="loud"] {
  --bg:         oklch(98% 0.008 90);
  --bg-elev:    oklch(100% 0 0);
  --fg:         oklch(15% 0.03 270);
  --fg-muted:   oklch(38% 0.04 270);
  --fg-subtle:  oklch(55% 0.03 270);
  --border:     oklch(85% 0.015 270);
  --surface:    oklch(100% 0 0);
  --surface-2:  oklch(92% 0.02 90);
  --primary:    oklch(58% 0.22 20);
  --primary-fg: oklch(99% 0 0);
  --accent:     oklch(72% 0.20 60);
  --accent-fg:  oklch(15% 0.03 270);
  --font-display: 'Archivo Black', Impact, sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;
}

[data-theme="arena"] {
  --bg:         oklch(22% 0.02 40);
  --bg-elev:    oklch(28% 0.025 40);
  --fg:         oklch(92% 0.015 80);
  --fg-muted:   oklch(72% 0.02 80);
  --fg-subtle:  oklch(55% 0.02 70);
  --border:     oklch(35% 0.03 40);
  --surface:    oklch(28% 0.025 40);
  --surface-2:  oklch(34% 0.03 40);
  --primary:    oklch(68% 0.15 60);
  --primary-fg: oklch(18% 0.02 40);
  --accent:     oklch(55% 0.18 20);
  --accent-fg:  oklch(95% 0.015 80);
  --font-display: 'Playfair Display', Georgia, serif;
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow:    0 4px 12px oklch(0% 0 0 / 0.4);
  --shadow-lg: 0 20px 50px oklch(0% 0 0 / 0.5);
}

[data-theme="editorial"] {
  /* Pure white editorial — generous whitespace, confident type, restrained
     warm accent. Inspired by New York Review of Books, Apartamento, and
     well-made museum catalogs. NO blue. */
  --bg:         oklch(100% 0 0);         /* pure white */
  --bg-elev:    oklch(100% 0 0);         /* also pure white — no layering */
  --fg:         oklch(18% 0.01 280);     /* near-black, slightly cool */
  --fg-muted:   oklch(45% 0.008 280);    /* medium gray */
  --fg-subtle:  oklch(62% 0.006 280);    /* lighter gray */
  --border:     oklch(90% 0.005 280);    /* hairline gray */
  --surface:    oklch(99% 0.003 280);    /* barely-off white for cards */
  --surface-2:  oklch(96% 0.005 280);    /* faint wash for alt sections */
  --primary:    oklch(48% 0.14 35);      /* warm burnt sienna — editorial red */
  --primary-fg: oklch(99% 0.003 280);    /* near-white on red */
  --accent:     oklch(52% 0.10 150);     /* muted sage for rare accents */
  --accent-fg:  oklch(99% 0.005 150);
  --font-display: 'Fraunces', Georgia, serif;
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow:    0 4px 16px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 24px 56px oklch(0% 0 0 / 0.08);
}

/* ============================================================
   PROFESSION OVERRIDES (audience-appropriate accent only)
   Theme drives --primary (dominant visual). Profession tints --accent
   so theme switching stays dramatic while preserving audience signal.
   ============================================================ */

[data-profession="therapist"] {
  --accent:     oklch(55% 0.08 155);   /* sage green */
  --accent-fg:  oklch(98% 0.005 155);
  --trust:      oklch(50% 0.10 155);
}

[data-profession="coach"] {
  --accent:     oklch(60% 0.12 75);    /* warm gold */
  --accent-fg:  oklch(20% 0.03 60);
  --trust:      oklch(55% 0.10 75);
}

[data-profession="music"] {
  --accent:     oklch(55% 0.14 25);    /* terracotta-red */
  --accent-fg:  oklch(98% 0.006 25);
  --trust:      oklch(45% 0.12 25);
}

[data-profession="outdoor"] {
  --accent:     oklch(62% 0.16 225);   /* ocean blue */
  --accent-fg:  oklch(99% 0.003 225);
  --trust:      oklch(50% 0.14 225);
  --font-display: 'Bebas Neue', 'Archivo Black', sans-serif;
}

[data-profession="consultant"] {
  --accent:     oklch(58% 0.22 25);    /* bold red accent */
  --accent-fg:  oklch(98% 0 0);
  --trust:      oklch(30% 0.01 260);
}

/* ============================================================
   Dark mode (applied via class .dark OR prefers-color-scheme)
   ============================================================ */

.dark {
  --bg:         oklch(15% 0.015 260);
  --bg-elev:    oklch(20% 0.02 260);
  --fg:         oklch(95% 0.005 260);
  --fg-muted:   oklch(72% 0.015 260);
  --fg-subtle:  oklch(55% 0.015 260);
  --border:     oklch(30% 0.02 260);
  --surface:    oklch(20% 0.02 260);
  --surface-2:  oklch(26% 0.025 260);
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}