/* ════════════════════════════════════════════════════════════════════
   Thèmes de la boutique — choisis dans l'espace de gestion (Apparence)
   Chaque thème = des polices, des couleurs et quelques choix de mise en page.
   La couleur principale peut être personnalisée par le commerçant.
   ════════════════════════════════════════════════════════════════════ */

/* Polices hébergées avec le site (rien n'est chargé chez Google : conforme RGPD).
   Le navigateur ne télécharge que celles du thème affiché. */
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('fonts/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/jost.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ── Atelier : chaleureux, artisanal, arrondi ───────────────────────── */
[data-theme='atelier'] {
  --bg: #f6f1e9; --surface: #fffdf9; --soft: #ece3d4; --text: #2b241f; --muted: #776a5f; --line: #e3d8c7;
  --brand: #2f6f5e; --brand-ink: #fff; --accent: #c2643a; --accent-ink: #fff;
  --font: 'DM Sans', system-ui, sans-serif; --font-title: 'Fraunces', Georgia, serif;
  --title-weight: 560; --title-tracking: -0.02em; --title-case: none;
  --label-case: none; --label-tracking: 0; --label-size: 0.92rem;
  --radius: 22px; --radius-sm: 12px; --btn-radius: 999px;
  --border: 1px solid var(--line); --shadow: 0 1px 2px rgb(60 40 20 / 0.04), 0 8px 24px -12px rgb(60 40 20 / 0.18);
  --card-ratio: 4 / 5; --announce-bg: var(--brand); --announce-ink: var(--brand-ink);
}

/* ── Minimal : épuré, mode, grandes images ──────────────────────────── */
[data-theme='minimal'] {
  --bg: #ffffff; --surface: #ffffff; --soft: #f3f3f1; --text: #111111; --muted: #6f6f6f; --line: #e6e6e6;
  --brand: #111111; --brand-ink: #fff; --accent: #b4442f; --accent-ink: #fff;
  --font: 'Inter', system-ui, sans-serif; --font-title: 'Inter', system-ui, sans-serif;
  --title-weight: 600; --title-tracking: -0.035em; --title-case: none;
  --label-case: uppercase; --label-tracking: 0.12em; --label-size: 0.74rem;
  --radius: 0px; --radius-sm: 0px; --btn-radius: 0px;
  --border: 1px solid var(--line); --shadow: none;
  --card-ratio: 3 / 4; --announce-bg: #111; --announce-ink: #fff;
}

/* ── Pop : coloré, joyeux, contours marqués ─────────────────────────── */
[data-theme='pop'] {
  --bg: #fff4e0; --surface: #ffffff; --soft: #ffd9a8; --text: #161412; --muted: #4f4943; --line: #161412;
  --brand: #ff5a36; --brand-ink: #fff; --accent: #4b5bff; --accent-ink: #fff;
  --font: 'DM Sans', system-ui, sans-serif; --font-title: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --title-weight: 800; --title-tracking: -0.035em; --title-case: none;
  --label-case: none; --label-tracking: 0; --label-size: 0.92rem;
  --radius: 18px; --radius-sm: 12px; --btn-radius: 14px;
  --border: 2px solid var(--line); --shadow: 4px 4px 0 var(--line);
  --card-ratio: 1 / 1; --announce-bg: var(--text); --announce-ink: #fff;
}

/* ── Nuit : sombre, élégant, doré ───────────────────────────────────── */
[data-theme='nuit'] {
  --bg: #12110f; --surface: #1b1916; --soft: #24211d; --text: #f2ece3; --muted: #a89f92; --line: #322d27;
  --brand: #c9a96e; --brand-ink: #12110f; --accent: #c9a96e; --accent-ink: #12110f;
  --ok: #6fbf8e; --warn: #e5866f;
  --font: 'Jost', system-ui, sans-serif; --font-title: 'Cormorant Garamond', Georgia, serif;
  --title-weight: 500; --title-tracking: 0; --title-case: none;
  --label-case: uppercase; --label-tracking: 0.16em; --label-size: 0.76rem;
  --radius: 4px; --radius-sm: 2px; --btn-radius: 2px;
  --border: 1px solid var(--line); --shadow: none;
  --card-ratio: 3 / 4; --announce-bg: #0b0a09; --announce-ink: var(--brand);
  color-scheme: dark;
}