/* =====================================================================
   THEMES & FONTS
   Each theme is a block of CSS variables. Pick one in js/config.js
   (theme: "noir") or try them live with Shift + D on the site.

   To create your own theme: copy any block, give it a new name in the
   selector [data-theme="yourname"], change the colours, then add the
   name to THEMES at the bottom of js/app.js so the design panel sees it.

   Variables:
     --bg      page background          --fg     main text
     --bg2     cards / alternate bands  --fg2    secondary text
     --muted   captions, labels         --line   hairlines & borders
     --accent  gold / highlight colour  --on-accent text on top of accent
     --scheme  "dark" or "light" (controls form controls, scrollbars,
               and which hero photo is used)
   ===================================================================== */

/* ---------- NOIR - warm black + gold (default) ---------- */
:root, [data-theme="noir"] {
  --scheme: dark;
  --bg: #0b0a09;
  --bg2: #151311;
  --fg: #efe9df;
  --fg2: #cfc7ba;
  --muted: #a39b8f;
  --line: rgba(239, 233, 223, .14);
  --accent: oklch(0.82 0.09 78);
  --on-accent: #0b0a09;
  --grain-opacity: .07;
  --img-filter: none;
}

/* ---------- IVORY - warm paper + champagne ---------- */
[data-theme="ivory"] {
  --scheme: light;
  --bg: #f5f1ea;
  --bg2: #ebe5db;
  --fg: #17130f;
  --fg2: #3b342c;
  --muted: #6b6358;
  --line: rgba(23, 19, 15, .14);
  --accent: oklch(0.55 0.09 68);
  --on-accent: #f5f1ea;
  --grain-opacity: .03;
  --img-filter: none;
}

/* ---------- MIDNIGHT - deep blue + silver ---------- */
[data-theme="midnight"] {
  --scheme: dark;
  --bg: #090c14;
  --bg2: #10151f;
  --fg: #e9edf5;
  --fg2: #c3cad8;
  --muted: #8a93a6;
  --line: rgba(233, 237, 245, .13);
  --accent: oklch(0.86 0.02 250);
  --on-accent: #090c14;
  --grain-opacity: .06;
  --img-filter: none;
}

/* ---------- SAND - desert beige + terracotta ---------- */
[data-theme="sand"] {
  --scheme: light;
  --bg: #efe6d8;
  --bg2: #e4d8c5;
  --fg: #2a211a;
  --fg2: #4d4036;
  --muted: #7d6d5f;
  --line: rgba(42, 33, 26, .15);
  --accent: oklch(0.58 0.13 40);
  --on-accent: #f7f1e8;
  --grain-opacity: .03;
  --img-filter: none;
}

/* ---------- MONO - pure black + white, no colour accent ---------- */
[data-theme="mono"] {
  --scheme: dark;
  --bg: #000;
  --bg2: #0e0e0e;
  --fg: #fff;
  --fg2: #d4d4d4;
  --muted: #8f8f8f;
  --line: rgba(255, 255, 255, .16);
  --accent: #fff;
  --on-accent: #000;
  --grain-opacity: .09;
  --img-filter: grayscale(1);     /* photos go black & white; remove this line to keep colour */
}

/* ---------- BLUSH - soft rose + plum ---------- */
[data-theme="blush"] {
  --scheme: light;
  --bg: #f7eeee;
  --bg2: #efe2e3;
  --fg: #2b1a22;
  --fg2: #4e3741;
  --muted: #86707a;
  --line: rgba(43, 26, 34, .14);
  --accent: oklch(0.45 0.12 350);
  --on-accent: #f7eeee;
  --grain-opacity: .03;
  --img-filter: none;
}

/* =====================================================================
   FONT PAIRS - pick one in js/config.js (fonts: "bodoni").
   --font-display  headlines, the big "Mari"
   --font-body     everything else
   --display-weight / --display-tracking fine-tune the headline look.
   The Google Fonts for every pair are loaded automatically by app.js
   (FONT_URLS at the bottom of js/app.js). To add a pair, add a block
   here and a matching URL there.
   ===================================================================== */
:root, [data-fonts="bodoni"] {
  --font-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-italic: italic;
}
[data-fonts="playfair"] {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-italic: italic;
}
[data-fonts="cormorant"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Futura", Arial, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.01em;
  --display-italic: italic;
}
[data-fonts="italiana"] {
  --font-display: "Italiana", "Bodoni Moda", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --display-italic: normal;       /* Italiana has no italic */
}
[data-fonts="grotesk"] {
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.04em;
  --display-italic: normal;
}
[data-fonts="fraunces"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.02em;
  --display-italic: italic;
}

/* Accent override from config.js is applied as an inline style on <html>:
   style="--accent: #c9a24a" - nothing to do here. */