/* ═══════════════════════════════════════════════════════════════
   WAAS Theme System
   ─────────────────────────────────────────────────────────────
   Each theme sets the full token set as CSS custom properties
   on [data-theme="..."]. Components (including the AI chatbox)
   read these variables only — no hard-coded colors or fonts.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Font imports for all theme pairings ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,400..700&family=DM+Sans:wght@300..700&family=Instrument+Serif&family=Work+Sans:wght@300..700&family=Playfair+Display:wght@400..700&family=Libre+Caslon+Text&family=Space+Grotesk:wght@300..700&family=Archivo:wght@300..800&family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=Inter+Tight:wght@300..700&family=Cormorant+Garamond:wght@300..700&family=Urbanist:wght@300..700&family=Bricolage+Grotesque:wght@300..700&family=JetBrains+Mono:wght@400..600&display=swap');

/* ── Default (Noir Barber) ── */
:root,
[data-theme="noir"] {
  --brand:        #c9a36a;
  --brand-dk:     #a6824e;
  --brand-light:  #2a231d;
  --bg:           #0f0d0b;
  --surface:      #1a1612;
  --surface-2:    #241e18;
  --text:         #f2ece3;
  --text-dim:     #9a8f82;
  --muted:        #6e645a;
  --border:       #2d261f;
  --accent:       #d9b382;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter Tight", "Work Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       4px;
  --radius-lg:    8px;
  --theme-name:   "Noir Barber";
  --theme-kind:   "heritage · dark";
}

/* ── Champagne (Modern luxe) ── */
[data-theme="champagne"] {
  --brand:        #8a6d3a;
  --brand-dk:     #6b5428;
  --brand-light:  #f3ead7;
  --bg:           #faf6ee;
  --surface:      #ffffff;
  --surface-2:    #f3ead7;
  --text:         #1c1812;
  --text-dim:     #5a5246;
  --muted:        #8a8276;
  --border:       #e8dfc9;
  --accent:       #b8935a;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       2px;
  --radius-lg:    6px;
  --theme-name:   "Champagne";
  --theme-kind:   "luxe · cream & gold";
}

/* ── Terracotta (Earthy) ── */
[data-theme="terracotta"] {
  --brand:        #b8583a;
  --brand-dk:     #8f4128;
  --brand-light:  #f8ebe1;
  --bg:           #fbf5ee;
  --surface:      #ffffff;
  --surface-2:    #f8ebe1;
  --text:         #2a1d16;
  --text-dim:     #6b5648;
  --muted:        #9a8676;
  --border:       #ead9c8;
  --accent:       #d88b4e;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       10px;
  --radius-lg:    18px;
  --theme-name:   "Terracotta";
  --theme-kind:   "earthy · boutique";
}

/* ── Atelier (Minimal B&W) ── */
[data-theme="atelier"] {
  --brand:        #111111;
  --brand-dk:     #000000;
  --brand-light:  #f4f2ee;
  --bg:           #f7f5f1;
  --surface:      #ffffff;
  --surface-2:    #ebe8e2;
  --text:         #0a0a0a;
  --text-dim:     #525049;
  --muted:        #8a877f;
  --border:       #d8d4cb;
  --accent:       #d64933;

  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       0px;
  --radius-lg:    0px;
  --theme-name:   "Atelier";
  --theme-kind:   "minimal · editorial";
}

/* ── Sage (Botanical spa) ── */
[data-theme="sage"] {
  --brand:        #5a7a63;
  --brand-dk:     #42604b;
  --brand-light:  #e8efe7;
  --bg:           #f5f7f2;
  --surface:      #ffffff;
  --surface-2:    #e8efe7;
  --text:         #1f2a23;
  --text-dim:     #4e5c54;
  --muted:        #8a968e;
  --border:       #d4ddd1;
  --accent:       #b8a06e;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Urbanist", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       14px;
  --radius-lg:    24px;
  --theme-name:   "Sage";
  --theme-kind:   "botanical · spa";
}

/* ── Blush (Soft feminine) ── */
[data-theme="blush"] {
  --brand:        #c2628a;
  --brand-dk:     #9e4a6e;
  --brand-light:  #fbeaf0;
  --bg:           #fdf7f5;
  --surface:      #ffffff;
  --surface-2:    #fbeaf0;
  --text:         #2a1a20;
  --text-dim:     #6a4f5a;
  --muted:        #9a8089;
  --border:       #f0d9e0;
  --accent:       #e29aa8;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       20px;
  --radius-lg:    32px;
  --theme-name:   "Blush";
  --theme-kind:   "soft · feminine";
}

/* ── Ink (Editorial bold, contrast) ── */
[data-theme="ink"] {
  --brand:        #eb4d2c;
  --brand-dk:     #c93919;
  --brand-light:  #fde8e2;
  --bg:           #f6f4ef;
  --surface:      #ffffff;
  --surface-2:    #ebe7dd;
  --text:         #0a0a0a;
  --text-dim:     #4a453e;
  --muted:        #8a867c;
  --border:       #d8d2c4;
  --accent:       #eb4d2c;

  --font-display: "Bricolage Grotesque", "Archivo", sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       6px;
  --radius-lg:    12px;
  --theme-name:   "Ink";
  --theme-kind:   "bold · editorial";
}

/* ── Midnight (Nail/Spa, moody) ── */
[data-theme="midnight"] {
  --brand:        #b89eff;
  --brand-dk:     #9a7fe6;
  --brand-light:  #2a2340;
  --bg:           #0e0c1a;
  --surface:      #17142a;
  --surface-2:    #211c3a;
  --text:         #f0ecff;
  --text-dim:     #a39cc7;
  --muted:        #6e688a;
  --border:       #2e2747;
  --accent:       #ff9ec7;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       12px;
  --radius-lg:    20px;
  --theme-name:   "Midnight";
  --theme-kind:   "moody · plum";
}