/* ═══════════════════════════════════════════════════════════
   CAPITAL DA BOA MESA — Theme Tokens (override layer)
   ─────────────────────────────────────────────────────────
   Load AFTER main.css. Runtime JS (theme-engine.js) will
   inject an inline <style> with [data-theme-active] rules
   that override these defaults per saved admin config.
   ───────────────────────────────────────────────────────── */

/* ── Default Brand Pack: Retro British ──
   These match the "Tipografia Selecionada" and the user's
   preferred palette variation (gold/coral/teal). This block
   only sets font tokens — colors inherit main.css defaults
   unless the admin picks a palette variant.
   ───────────────────────────────────────────────────────── */

:root {
  /* Brand pack label (for the admin UI) */
  --brand-pack-name: "Retro British";

  /* Display face (headings, hero, brand) — overrides main.css */
  --font-display: 'Retro British', 'Cormorant Garamond', Georgia, serif;

  /* Heading face (H2/H3, section titles) */
  --font-heading: 'Fonseca Bold', 'Cormorant Garamond', Georgia, serif;

  /* Body face (paragraphs, labels, buttons, inputs)
     v2.4.1: defaults to Inter for readability. The legacy 'Retro British'
     pack still ships Verdana as its body face — selectable via the
     [data-font-pack="retro-british"] block below if an admin opts in. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Font faces: only @font-face declarations. The file URLs
   are resolved at runtime from /assets/fonts/<pack>/ when the
   admin switches packs, so changing the pack is a token swap
   — no rebuild. ───────────────────────────────────────────── */

/* Retro British (display) — default pack */
@font-face {
  font-family: 'Retro British';
  src: url('../assets/fonts/retro-british/RetroBritish-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fonseca Bold (headings) — default pack */
@font-face {
  font-family: 'Fonseca Bold';
  src: url('../assets/fonts/retro-british/Fonseca-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Verdana is a system font on Windows/Mac/most Linux distros,
   so we don't need to ship it. If a future pack needs a
   bundled body face, runtime JS appends the @font-face rule. */

/* ═══════════════════════════════════════════════════════════
   Palette variants — reference colors from the user's palette
   image. Admin can pick any of these OR a custom combination.
   These are class hooks; theme-engine.js applies the matching
   attribute to <html>.
   ───────────────────────────────────────────────────────── */

[data-palette="sand-coral"] {
  --primary:       #1A5C3A;
  --primary-light: #2E7D52;
  --primary-dark:  #0F3A22;
  --accent:        #E6856B;  /* coral from palette row 2, col 2 */
  --accent-light:  #F0A088;
  --accent-dark:   #CA7950;  /* row 2, col 3 */
  /* Note: --bg and --text removed to avoid conflict with light/dark theme system */
}

[data-palette="teal-gold"] {
  --primary:       #327C75;  /* row 1, col 6 — teal */
  --primary-light: #4A9B92;
  --primary-dark:  #1F5A52;
  --accent:        #C7B170;  /* row 1, col 4 — warm gold */
  --accent-light:  #D9C58A;
  --accent-dark:   #9F8848;
}

[data-palette="navy-rose"] {
  --primary:       #1F3444;  /* row 2, col 8 — deep navy */
  --primary-light: #2D4A5E;
  --primary-dark:  #101E2A;
  --accent:        #D6B3BA;  /* row 2, col 1 — dusty rose */
  --accent-light:  #E4C9CE;
  --accent-dark:   #B48D95;
}

[data-palette="emerald-amber"] {
  --primary:       #7AB991;  /* row 1, col 5 — emerald */
  --primary-light: #9AD0AD;
  --primary-dark:  #558A69;
  --accent:        #C7B170;  /* row 1, col 4 — amber */
  --accent-light:  #D9C58A;
  --accent-dark:   #9F8848;
}

[data-palette="default-green-gold"] {
  /* Match main.css defaults — the "no custom palette" case */
  --primary:       #1A5C3A;
  --primary-light: #2E7D52;
  --primary-dark:  #0F3A22;
  --accent:        #C9A84C;
  --accent-light:  #E8C96A;
  --accent-dark:   #A8882E;
}

/* ═══════════════════════════════════════════════════════════
   Font packs — switching a pack just changes which tokens
   point at which @font-face. JS handles @font-face injection
   for uploaded packs.
   ───────────────────────────────────────────────────────── */

[data-font-pack="retro-british"] {
  --font-display: 'Retro British', 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Fonseca Bold', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Verdana', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-font-pack="classic-elegant"] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
}

[data-font-pack="modern-editorial"] {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, sans-serif;
}

[data-font-pack="geometric-sans"] {
  --font-display: 'Montserrat', -apple-system, sans-serif;
  --font-heading: 'Montserrat', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
}

/* Uploaded-pack placeholder — JS fills in the @font-face rules
   and sets [data-font-pack="custom"] with whatever families
   the uploaded package declared. */
[data-font-pack="custom"] {
  --font-display: var(--custom-font-display, 'Cormorant Garamond', Georgia, serif);
  --font-heading: var(--custom-font-heading, 'Cormorant Garamond', Georgia, serif);
  --font-body:    var(--custom-font-body, 'Inter', -apple-system, sans-serif);
}

/* ═══════════════════════════════════════════════════════════
   Heading hook — main.css only knows --font-display and
   --font-body. To use a distinct heading face without
   touching main.css, theme-engine.js adds this rule when a
   pack defines --font-heading ≠ --font-display.
   The class is applied to <h2> and .admin-section-title etc.
   ───────────────────────────────────────────────────────── */

.use-heading-font,
h2.section-title,
.admin-section-title,
.form-card-title {
  font-family: var(--font-heading, var(--font-display));
}
