/* ==========================================================================
   theme.css: Frame Art's look (app-owned, never overwritten by upgrades)

   "Gallery serif": Fraunces for the brand and page titles, Outfit for
   everything else, a cool blue accent on near-neutral greys, soft 6px corners
   and flat panels so the photos lead.

   - The @import must stay first (scaffold_head() skips the default fonts
     whenever this file exists).
   - Dark is the default (:root); light under :root[data-theme="light"].
   - Text pairs checked at 4.5:1 or better in both modes (lowest: light
     accent on --chip, 4.7:1). Border-strong is 3:1+ against bg.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---- Look: type and shape ---- */
:root {
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num: var(--font-body);           /* figures stay in Outfit, tabular */

    --body-size: 15px;
    --display-weight: 500;
    --display-case: none;
    --display-track: -0.015em;
    --title-size: 36px;
    --stat-size: 32px;

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --shadow-panel: none;
}

/* ---- Dark (default) ---- */
:root {
    --bg: #111214;
    --surface: #1a1b1e;
    --surface-2: #1f2024;
    --border: #2a2c30;
    --border-strong: #6b6e76;              /* 3.7:1 on bg */
    --text: #f2f2f0;                        /* 16.7:1 on bg */
    --muted: #a3a6ad;                       /* 7.7:1 on bg, 6.7:1 on chip */

    --accent: #7cc0f8;                      /* 9.6:1 on bg, 7.1:1 on chip-on */
    --accent-fill: #7cc0f8;
    --on-accent: #06141f;                   /* 9.5:1 on accent-fill */
    --accent-soft: rgba(124, 192, 248, 0.16);
    --focus: #b3dafb;

    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.5);

    /* App tokens (used by app.css) */
    --glass: rgba(17, 18, 20, 0.78);        /* translucent navbar over the photos */
    --chip: #1f2024;
    --chip-on: rgba(124, 192, 248, 0.16);
    --scrim-accent: #7cc0f8;                /* hover color on the always-dark lightbox */
}

/* ---- Light ---- */
:root[data-theme="light"] {
    --bg: #f5f5f3;
    --surface: #ffffff;
    --surface-2: #e9e9e5;
    --border: #e1e1dc;
    --border-strong: #8a8c92;              /* 3.1:1 on bg */
    --text: #141518;                        /* 16.7:1 on bg */
    --muted: #5a5d64;                       /* 6.0:1 on bg, 5.4:1 on chip */

    --accent: #1565c0;                      /* 5.3:1 on bg, 4.9:1 on chip-on */
    --accent-fill: #1565c0;
    --on-accent: #ffffff;                   /* 5.8:1 on accent-fill */
    --accent-soft: #e3eefb;
    --focus: #0d47a1;

    --scrim: rgba(20, 21, 24, 0.4);
    --shadow-overlay: 0 12px 40px rgba(20, 21, 24, 0.18);

    --glass: rgba(245, 245, 243, 0.82);
    --chip: #e9e9e5;
    --chip-on: #e3eefb;
    --scrim-accent: #7cc0f8;
}