/* ============================================================================
   Site themes — canonical design tokens, one block per selectable theme.
   The active theme is chosen by the admin (Theme tab) and applied by the
   server, which stamps  <html data-theme-tokens="…">  into the first byte of every
   served page (see app.server.js). Three themes:
     classic  — the shipped look (gold + cyan, EB Garamond / Manrope / Sora)
     prestige — mock 1 (champagne gold, editorial Cormorant Garamond + Archivo)
     slate    — mock 2 (muted slate/brass, system fonts)

   These variable NAMES are the ones nav-layout.css already consumes; style.css
   (hero) and admin.html were converted to reference the same names so the whole
   app re-skins from here. Selectors are  html[data-theme-tokens=…]  (specificity 0,0,1,1)
   so they always win over nav-layout.css's :root fallback regardless of link order.

   Prestige fonts are self-hosted from the already-served mock asset bundle
   (/site-v1/mock/assets). Only the latin (U+0000-00FF) subset is declared — the
   files are variable across weight, so one face covers 400–700. Classic loads its
   Google Fonts via each page's <link>; Slate uses the system stack (no download).
   ============================================================================ */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/site-v1/mock/assets/44f1e409-eeee-4935-b554-04174ea55c4a.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/site-v1/mock/assets/edfbca27-1d8d-4ad1-bddc-ff05c241b0c6.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---- Fallback (no data-theme-tokens attribute → Classic) ------------------------- */
:root {
    --surface-container-lowest: #0c0e12;
    --surface-container:        #1d2023;
    --on-surface:               #e1e2e7;
    --on-surface-variant:       #d0c5af;
    --outline:                  #99907c;
    --outline-variant:          #4d4635;
    --primary:                  #f2ca50;
    --primary-container:        #d4af37;
    --on-primary:               #3c2f00;
    --secondary:                #00e5ff;
    --bg-page:                  #050505;
    --bg-grad-1:                #15171b;
    --bg-grad-2:                #07080a;
    --surface-card:             #111111;
    --border-gold:              rgba(212, 175, 55, 0.55);
    --font-display: 'EB Garamond', Georgia, serif;
    --font-body:    'Manrope', system-ui, sans-serif;
    --font-label:   'Sora', system-ui, sans-serif;
}

/* ---- Classic (warm near-black + gold, serif) ----------------------------- */
html[data-theme-tokens="classic"] {
    --surface-container-lowest: #0c0e12;
    --surface-container:        #1d2023;
    --on-surface:               #e1e2e7;
    --on-surface-variant:       #d0c5af;
    --outline:                  #99907c;
    --outline-variant:          #4d4635;
    --primary:                  #f2ca50;
    --primary-container:        #d4af37;
    --on-primary:               #3c2f00;
    --secondary:                #00e5ff;
    --bg-page:                  #050505;
    --bg-grad-1:                #15171b;
    --bg-grad-2:                #07080a;
    --surface-card:             #111111;
    --border-gold:              rgba(212, 175, 55, 0.55);
    --font-display: 'EB Garamond', Georgia, serif;
    --font-body:    'Manrope', system-ui, sans-serif;
    --font-label:   'Sora', system-ui, sans-serif;
}

/* ---- Prestige (mock 1: deep navy + champagne, editorial serif) ----------- */
html[data-theme-tokens="prestige"] {
    --surface-container-lowest: #0c1020;
    --surface-container:        #131a2e;
    --on-surface:               #F2EFE8;
    --on-surface-variant:       #b8b3a6;
    --outline:                  #7c7a70;
    --outline-variant:          #2a3350;
    --primary:                  #E3C16A;
    --primary-container:        #D9B45C;
    --on-primary:               #15120A;
    --secondary:                #19E0FF;
    --bg-page:                  #0b1020;
    --bg-grad-1:                #1a2340;
    --bg-grad-2:                #05070f;
    --surface-card:             #171f36;
    --border-gold:              rgba(217, 180, 92, 0.55);
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Archivo', system-ui, sans-serif;
    --font-label:   'Archivo', system-ui, sans-serif;
}

/* ---- Slate (mock 2: cooler, lighter slate-gray + brass, system sans) ----- */
html[data-theme-tokens="slate"] {
    --surface-container-lowest: #10141c;
    --surface-container:        #1c222e;
    --on-surface:               #e8ebf0;
    --on-surface-variant:       #a8aebc;
    --outline:                  #868ea1;
    --outline-variant:          #313a49;
    --primary:                  #e0b571;
    --primary-container:        #d2a050;
    --on-primary:               #1a1204;
    --secondary:                #4da3e8;
    --bg-page:                  #12161f;
    --bg-grad-1:                #20283a;
    --bg-grad-2:                #0a0d14;
    --surface-card:             #212936;
    --border-gold:              rgba(210, 160, 80, 0.50);
    --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-label:   system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}