/* =============================================================
   WVW DESIGN TOKENS
   Brand: Deep Teal (#01696F) + Warm Gold (#C4973A) on Ivory
   Concept: Luxury-forward, Black-centered, rigorous + warm
   ============================================================= */

:root,
[data-theme='light'] {
  /* ── TYPE SCALE (fluid clamp) ────────────────────────────── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     1rem    + 5.5vw,  6.5rem);

  /* ── SPACING (4px base) ──────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── SURFACES — warm ivory ───────────────────────────────── */
  --color-bg:              #faf8f4;
  --color-surface:         #fdfcf9;
  --color-surface-2:       #fff;
  --color-surface-offset:  #f3efe8;
  --color-surface-dynamic: #ece7df;
  --color-divider:         #e0dbd3;
  --color-border:          #d5cfc7;

  /* ── TEXT ────────────────────────────────────────────────── */
  --color-text:         #1e1c18;
  --color-text-muted:   #6b6760;
  --color-text-faint:   #b5b1aa;
  --color-text-inverse: #faf8f4;

  /* ── PRIMARY — Deep Teal ─────────────────────────────────── */
  --color-primary:           #01696f;
  --color-primary-hover:     #015a5f;
  --color-primary-active:    #014246;
  --color-primary-highlight: #d0e5e5;
  --color-primary-bg:        #edf6f6;

  /* ── GOLD ACCENT ─────────────────────────────────────────── */
  --color-gold:           #c4973a;
  --color-gold-hover:     #a87d2e;
  --color-gold-active:    #8c6422;
  --color-gold-highlight: #f2e8d4;

  /* ── DARK SURFACE (hero panels) ──────────────────────────── */
  --color-dark:         #0d1f1f;
  --color-dark-surface: #142424;
  --color-dark-border:  #1e3535;

  /* ── STATUS ──────────────────────────────────────────────── */
  --color-success:   #3a6e27;
  --color-error:     #9b2a2a;
  --color-warning:   #8a5200;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px oklch(0.18 0.02 80 / 0.07);
  --shadow-md:  0 4px 14px oklch(0.18 0.02 80 / 0.10);
  --shadow-lg:  0 12px 36px oklch(0.18 0.02 80 / 0.13);
  --shadow-xl:  0 24px 64px oklch(0.18 0.02 80 / 0.16);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:        140ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYOUT WIDTHS ───────────────────────────────────────── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-full:    100%;

  /* ── FONTS ───────────────────────────────────────────────── */
  --font-display: 'Cormorant', 'Georgia', serif;
  --font-body:    'Work Sans', 'Helvetica Neue', sans-serif;
}

/* ── DARK MODE ─────────────────────────────────────────────── */
[data-theme='dark'] {
  --color-bg:              #0f1a1a;
  --color-surface:         #142222;
  --color-surface-2:       #192929;
  --color-surface-offset:  #1a2b2b;
  --color-surface-dynamic: #213333;
  --color-divider:         #243838;
  --color-border:          #2e4545;
  --color-text:            #e4e0d8;
  --color-text-muted:      #8a9e9e;
  --color-text-faint:      #4e6060;
  --color-text-inverse:    #0f1a1a;
  --color-primary:         #4fa8b0;
  --color-primary-hover:   #6abfc7;
  --color-primary-active:  #84d4db;
  --color-primary-highlight: #1a3a3a;
  --color-primary-bg:      #162828;
  --color-gold:            #d4a84a;
  --color-gold-hover:      #e0bc6a;
  --color-gold-active:     #ecd08a;
  --color-gold-highlight:  #2a2010;
  --color-dark:            #0a1515;
  --color-dark-surface:    #0d1c1c;
  --color-dark-border:     #183030;
  --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md:  0 4px 14px oklch(0 0 0 / 0.35);
  --shadow-lg:  0 12px 36px oklch(0 0 0 / 0.45);
  --shadow-xl:  0 24px 64px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0f1a1a;
    --color-surface:         #142222;
    --color-surface-2:       #192929;
    --color-surface-offset:  #1a2b2b;
    --color-surface-dynamic: #213333;
    --color-divider:         #243838;
    --color-border:          #2e4545;
    --color-text:            #e4e0d8;
    --color-text-muted:      #8a9e9e;
    --color-text-faint:      #4e6060;
    --color-text-inverse:    #0f1a1a;
    --color-primary:         #4fa8b0;
    --color-primary-hover:   #6abfc7;
    --color-primary-active:  #84d4db;
    --color-primary-highlight: #1a3a3a;
    --color-primary-bg:      #162828;
    --color-gold:            #d4a84a;
    --color-gold-hover:      #e0bc6a;
    --color-gold-active:     #ecd08a;
    --color-gold-highlight:  #2a2010;
    --color-dark:            #0a1515;
    --color-dark-surface:    #0d1c1c;
    --color-dark-border:     #183030;
    --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.25);
    --shadow-md:  0 4px 14px oklch(0 0 0 / 0.35);
    --shadow-lg:  0 12px 36px oklch(0 0 0 / 0.45);
    --shadow-xl:  0 24px 64px oklch(0 0 0 / 0.55);
  }
}