/* ============================================================================
   themes.css — brandable theme FAMILIES for v7 (generated; do not hand-edit).
   Axes: [data-theme-family] (the look, set per-gallery by owner/super-admin)
         × [data-theme] (light|dark MODE, set by each viewer). Keepsake = the
   default look and lives in style.css; the 6 families below each define a full
   light AND dark token set. Every palette is WCAG-AA validated (ink ≥7:1,
   muted ≥4.5, accent-as-text ≥4.5, on-fill text ≥4.5). Fonts per family are set
   once (both modes). Their faces are declared below and served from this site;
   the faces the BASE look uses on every page are in fonts.css (#2166).
   ============================================================================ */

/* ── #2037 — THE FACES THE THEMES NAME, SERVED FROM THIS BOX ─────────────────────────────────────
   MEASURED 2026-09-21, in a real browser by rendered WIDTH: of the eight typefaces this product
   offers, only Marcellus and Cormorant ever actually rendered. Fraunces, Space Grotesk, Archivo,
   Cormorant Garamond and Playfair Display all fell back to Georgia or the system sans, so a studio
   that picked Playfair Display saw Georgia — in its gallery, and everywhere else.

   themes.js::loadFont was not the bug: it injected the right Google Fonts stylesheet per family, with
   the right axes, and the link really was added to the document. The faces still did not arrive. (It
   asks for nothing from Google any more: since #2166 it only readies faces this site declares.) Rather than keep chasing a third party's delivery, the faces now ship from here.

   ⚠️ WHY SELF-HOSTED RATHER THAN A BETTER GOOGLE URL, and it is not only about delivery:
     * the rasterizer (v12/markrender.mjs, resvg) already reads these exact .ttf files out of
       v12/static/vendor/fonts with loadSystemFonts FALSE. Pointing the browser at the same family
       from a different source is how the two renderers drift — and qa/ui/v12-mark-render-parity.mjs
       exists precisely because that drift is invisible until somebody compares pixels;
     * no third-party request on a guest's path, and no dependency on that request succeeding;
     * it works on a box with no outbound internet, which is the state every QA instance is in.

   ⚠️ NOTHING IS DOWNLOADED UNTIL A PAGE ACTUALLY DRAWS IN ONE OF THESE. An @font-face declaration is
   lazy: the browser fetches the file only when a rule using that family matches something. So a
   keepsake gallery pays nothing for the seven faces below, and a sage gallery pays for sage's.
   woff2, not the .ttf beside it: 1,168 KB of Cormorant Garamond becomes 205 KB. The .ttf files stay
   because resvg needs them — the browser gets the small one, the rasterizer the one it can read.

   ⚠️ NO ITALIC EXISTS ANYWHERE for Marcellus or Space Grotesk, so none is declared for them and
   v12/markrender.mjs synthesises the oblique instead (#2036). Declaring a fake italic here would put
   the browser and the rasterizer back out of step. */
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;
  src:url(/vendor/fonts/Fraunces.woff2?v=110bc5c3aa) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;
  src:url(/vendor/fonts/Fraunces-Italic.woff2?v=d737d47deb) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;
  src:url(/vendor/fonts/SpaceGrotesk.woff2?v=25fa31ffee) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;
  src:url(/vendor/fonts/Archivo.woff2?v=1968f98b11) format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-display:swap;
  src:url(/vendor/fonts/Archivo-Italic.woff2?v=eca9c78753) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-display:swap;
  src:url(/vendor/fonts/CormorantGaramond.woff2?v=423a173775) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-display:swap;
  src:url(/vendor/fonts/CormorantGaramond-Italic.woff2?v=2c3f596751) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-display:swap;
  src:url(/vendor/fonts/PlayfairDisplay.woff2?v=cd1bbfb352) format("woff2")}
/* Great Vibes, Marcellus, Cormorant and Hanken Grotesk - the keepsake faces, which every page uses and
   not only a themed one - are declared in fonts.css (#2166). */

/* ---------- Obsidian ---------- */
:root[data-theme-family="obsidian"]{ --font-display:"Fraunces",Georgia,serif; --font-script:"Fraunces",Georgia,serif; --font-hero:"Fraunces",Georgia,serif; }
:root[data-theme-family="obsidian"][data-theme="dark"],
:root[data-theme-family="obsidian"]:not([data-theme="light"]){
  --canvas:#0E0E10; --canvas-2:#1a1a1c; --surface:#17171A; --surface-2:#252528;
  --bar:rgba(14,14,16,0.86); --tileph:#080809;
  --ink:#ECECEE; --muted:#9A9AA0; --faint:#9A9AA0; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#D8A24A; --gold-deep:#b1853d;
  --gold-fill-1:#D8A24A; --gold-fill-2:#b5883e; --on-gold:#1A1206;
}
:root[data-theme-family="obsidian"][data-theme="light"]{
  /* warm champagne-neutral: surfaces carry a faint gold undertone so the family
     reads even in light mode (bug #94 — light modes were near-identical white). */
  --canvas:#F3F1ED; --canvas-2:#e8e5df; --surface:#FBFAF7; --surface-2:#efece6;
  --bar:rgba(243,241,237,0.86); --tileph:#e2ded7;
  --ink:#1B1B1D; --muted:#5F5F63; --faint:#5F5F63; --line:rgba(27,27,29,0.13); --line-2:rgba(27,27,29,0.06);
  --gold:#8c5f10; --gold-deep:#79540f;   /* a11y #163: nudged darker (4.47->4.95:1) so small bold gold text clears WCAG-AA on this light canvas */
  --gold-fill-1:#B07A16; --gold-fill-2:#946612; --on-gold:#241706;
}

/* ---------- Slate ---------- */
:root[data-theme-family="slate"]{ --font-display:"Space Grotesk",system-ui,sans-serif; --font-script:"Space Grotesk",system-ui,sans-serif; --font-hero:"Space Grotesk",system-ui,sans-serif; }
:root[data-theme-family="slate"][data-theme="dark"],
:root[data-theme-family="slate"]:not([data-theme="light"]){
  --canvas:#101319; --canvas-2:#1c1f25; --surface:#191E27; --surface-2:#272c34;
  --bar:rgba(16,19,25,0.86); --tileph:#090a0e;
  --ink:#E8ECF2; --muted:#96A2B2; --faint:#96A2B2; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#C08457; --gold-deep:#9d6c47;
  --gold-fill-1:#C08457; --gold-fill-2:#a16f49; --on-gold:#160D07;
}
:root[data-theme-family="slate"][data-theme="light"]{
  /* cool blue-grey: distinctly cooler surfaces vs the warm/neutral families (bug #94). */
  --canvas:#E7ECF3; --canvas-2:#dce2ea; --surface:#F8FAFC; --surface-2:#e9eef4;
  --bar:rgba(231,236,243,0.86); --tileph:#d3dae3;
  --ink:#1A2129; --muted:#586675; --faint:#586675; --line:rgba(26,33,41,0.13); --line-2:rgba(26,33,41,0.06);
  --gold:#9c5230; --gold-deep:#884929;   /* a11y #163: nudged darker (4.32->4.83:1) so small bold gold text clears WCAG-AA on this light canvas */
  --gold-fill-1:#A85A32; --gold-fill-2:#8d4c2a; --on-gold:#FFFFFF;
}

/* ---------- Blackout ---------- */
:root[data-theme-family="blackout"]{ --font-display:"Archivo",system-ui,sans-serif; --font-script:"Archivo",system-ui,sans-serif; --font-hero:"Archivo",system-ui,sans-serif; }
:root[data-theme-family="blackout"][data-theme="dark"],
:root[data-theme-family="blackout"]:not([data-theme="light"]){
  --canvas:#0A0A0A; --canvas-2:#161616; --surface:#161616; --surface-2:#242424;
  --bar:rgba(10,10,10,0.86); --tileph:#060606;
  --ink:#F0F0F0; --muted:#9B9B9B; --faint:#9B9B9B; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#EDEDED; --gold-deep:#c2c2c2;
  --gold-fill-1:#EDEDED; --gold-fill-2:#c7c7c7; --on-gold:#0A0A0A;
}
:root[data-theme-family="blackout"][data-theme="light"]{
  --canvas:#F2F2F2; --canvas-2:#e8e8e8; --surface:#FFFFFF; --surface-2:#f4f4f4;
  --bar:rgba(242,242,242,0.86); --tileph:#dfdfdf;
  --ink:#141414; --muted:#5E5E5E; --faint:#5E5E5E; --line:rgba(20,20,20,0.13); --line-2:rgba(20,20,20,0.06);
  --gold:#1E1E1E; --gold-deep:#191919;
  --gold-fill-1:#1E1E1E; --gold-fill-2:#191919; --on-gold:#FFFFFF;
}

/* ---------- Porcelain ---------- */
:root[data-theme-family="porcelain"]{ --font-display:"Fraunces",Georgia,serif; --font-script:"Cormorant",Georgia,serif; --font-hero:"Fraunces",Georgia,serif; }
:root[data-theme-family="porcelain"][data-theme="dark"],
:root[data-theme-family="porcelain"]:not([data-theme="light"]){
  --canvas:#1A1614; --canvas-2:#252220; --surface:#241F1C; --surface-2:#312c2a;
  --bar:rgba(26,22,20,0.86); --tileph:#0e0c0b;
  --ink:#EFE9E3; --muted:#A99F97; --faint:#A99F97; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#D97B60; --gold-deep:#b2654f;
  --gold-fill-1:#B84A32; --gold-fill-2:#9b3e2a; --on-gold:#FFFFFF;
}
:root[data-theme-family="porcelain"][data-theme="light"]{
  /* warm peach-cream: surfaces carry the terracotta undertone (bug #94). */
  --canvas:#F9F2EA; --canvas-2:#efe6db; --surface:#FFFBF5; --surface-2:#f4ece1;
  --bar:rgba(249,242,234,0.86); --tileph:#e8ddce;
  --ink:#1E1C1A; --muted:#6B6560; --faint:#6B6560; --line:rgba(30,28,26,0.13); --line-2:rgba(30,28,26,0.06);
  --gold:#A8412A; --gold-deep:#8a3522;
  --gold-fill-1:#A8412A; --gold-fill-2:#8d3723; --on-gold:#FFFFFF;
}

/* ---------- Sage ---------- */
:root[data-theme-family="sage"]{ --font-display:"Cormorant Garamond",Georgia,serif; --font-script:"Cormorant Garamond",Georgia,serif; --font-hero:"Cormorant Garamond",Georgia,serif; }
:root[data-theme-family="sage"][data-theme="dark"],
:root[data-theme-family="sage"]:not([data-theme="light"]){
  --canvas:#161A14; --canvas-2:#222520; --surface:#1F241C; --surface-2:#2c312a;
  --bar:rgba(22,26,20,0.86); --tileph:#0c0e0b;
  --ink:#E7ECE1; --muted:#9BA795; --faint:#9BA795; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#C79A5A; --gold-deep:#a37e4a;
  --gold-fill-1:#C79A5A; --gold-fill-2:#a7814c; --on-gold:#12100A;
}
:root[data-theme-family="sage"][data-theme="light"]{
  /* soft eucalyptus green: deepened tint + green surfaces so the family stays green (bug #94). */
  --canvas:#E6EBDF; --canvas-2:#dbe1d3; --surface:#F8FAF4; --surface-2:#ecefe6;
  --bar:rgba(230,235,223,0.86); --tileph:#d2d9c9;
  --ink:#23281F; --muted:#586052; --faint:#586052; --line:rgba(35,40,31,0.13); --line-2:rgba(35,40,31,0.06);
  --gold:#7C5A34; --gold-deep:#664a2b;
  --gold-fill-1:#7C5A34; --gold-fill-2:#684c2c; --on-gold:#FBFCF9;
}

/* ---------- Blush ---------- */
:root[data-theme-family="blush"]{ --font-display:"Playfair Display",Georgia,serif; --font-script:"Cormorant",Georgia,serif; --font-hero:"Great Vibes","Playfair Display",cursive; }
:root[data-theme-family="blush"][data-theme="dark"],
:root[data-theme-family="blush"]:not([data-theme="light"]){
  --canvas:#1B1116; --canvas-2:#261d22; --surface:#251820; --surface-2:#32262d;
  --bar:rgba(27,17,22,0.86); --tileph:#0f090c;
  --ink:#F3E7EC; --muted:#B49AA6; --faint:#B49AA6; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#E0748F; --gold-deep:#b85f75;
  --gold-fill-1:#E0748F; --gold-fill-2:#bc6178; --on-gold:#1A0B10;
}
:root[data-theme-family="blush"][data-theme="light"]{
  /* soft rose: deepened pink tint + rosy surfaces so the family stays pink (bug #94). */
  --canvas:#FBEDEB; --canvas-2:#f2e1df; --surface:#FFFAF9; --surface-2:#f6e8e6;
  --bar:rgba(251,237,235,0.86); --tileph:#ecd9d7;
  --ink:#2A2024; --muted:#6E5A60; --faint:#6E5A60; --line:rgba(42,32,36,0.13); --line-2:rgba(42,32,36,0.06);
  --gold:#9B2D4E; --gold-deep:#7f2540;
  --gold-fill-1:#9B2D4E; --gold-fill-2:#822642; --on-gold:#FFFFFF;
}

/* ---------- Storii ---------- */
/* PhotoStorii's own brand family (feature #232): navy + gold, cream in light mode. The accent ("gold" token)
   is the Storii yellow — bright #EEB51E on the dark navy canvas (9.2:1), deepened to #8F5E0A as small text on
   the light cream so it still clears WCAG-AA (4.9:1). Fills stay the bright brand yellow with near-black ink.
   Palette from mockups/brand-photostorii.html; all pairs validated (ink≥7, muted≥4.5, accent-text≥4.5, on-fill≥4.5). */
:root[data-theme-family="storii"]{ --font-display:"Marcellus",Georgia,serif; --font-script:"Marcellus",Georgia,serif; --font-hero:"Marcellus",Georgia,serif; }
:root[data-theme-family="storii"][data-theme="dark"],
:root[data-theme-family="storii"]:not([data-theme="light"]){
  --canvas:#121A32; --canvas-2:#1E2A48; --surface:#1B2747; --surface-2:#2A3A66;
  --bar:rgba(18,26,50,0.86); --tileph:#0B1120;
  --ink:#ECEFF6; --muted:#9BA6CC; --faint:#9BA6CC; --line:rgba(255,255,255,0.1); --line-2:rgba(255,255,255,0.055);
  --gold:#EEB51E; --gold-deep:#C89210;
  --gold-fill-1:#EEB51E; --gold-fill-2:#C89210; --on-gold:#201603;
}
:root[data-theme-family="storii"][data-theme="light"]{
  /* warm cream with a navy ink + deep-gold accent, so the family stays navy/gold even in light mode. */
  --canvas:#F7F0DD; --canvas-2:#ece3c9; --surface:#FFFDF6; --surface-2:#f4ecd6;
  --bar:rgba(247,240,221,0.86); --tileph:#e7dcbe;
  --ink:#182B4B; --muted:#545C78; --faint:#545C78; --line:rgba(24,43,75,0.13); --line-2:rgba(24,43,75,0.06);
  --gold:#8F5E0A; --gold-deep:#79500a;
  --gold-fill-1:#EEB51E; --gold-fill-2:#d19a12; --on-gold:#2A1E04;
}

/* ============================================================================
   FONT-STYLE axis — [data-font] (feature #393)
   The TYPEFACE is now independent of the color LOOK ([data-theme-family]). An
   owner picks a Look (palette) AND, optionally, a Font style; any font can pair
   with any theme. Each style reuses one of the existing family typeface trios,
   so "keep all the current font styles" holds — nothing new to design or load
   beyond what themes.js already knows (FONT_FACES is keyed by the same names).

   Placement + specificity: these blocks sit AFTER every family block and carry
   the SAME 0,2,0 specificity, so an EXPLICIT data-font wins by source order.
   When data-font is UNSET the fonts fall back to the family's own trio above —
   i.e. "Match theme", the default — so existing galleries are byte-for-byte
   unchanged until an owner opts in. Only the three font vars are touched here;
   the palette is never affected, keeping the two axes fully orthogonal.
   ============================================================================ */
:root[data-font="keepsake"]{  --font-display:"Marcellus",Georgia,serif; --font-script:"Cormorant",Georgia,serif; --font-hero:"Great Vibes","Marcellus",cursive; }
:root[data-font="obsidian"]{  --font-display:"Fraunces",Georgia,serif; --font-script:"Fraunces",Georgia,serif; --font-hero:"Fraunces",Georgia,serif; }
:root[data-font="slate"]{     --font-display:"Space Grotesk",system-ui,sans-serif; --font-script:"Space Grotesk",system-ui,sans-serif; --font-hero:"Space Grotesk",system-ui,sans-serif; }
:root[data-font="blackout"]{  --font-display:"Archivo",system-ui,sans-serif; --font-script:"Archivo",system-ui,sans-serif; --font-hero:"Archivo",system-ui,sans-serif; }
:root[data-font="porcelain"]{ --font-display:"Fraunces",Georgia,serif; --font-script:"Cormorant",Georgia,serif; --font-hero:"Fraunces",Georgia,serif; }
:root[data-font="sage"]{      --font-display:"Cormorant Garamond",Georgia,serif; --font-script:"Cormorant Garamond",Georgia,serif; --font-hero:"Cormorant Garamond",Georgia,serif; }
:root[data-font="blush"]{     --font-display:"Playfair Display",Georgia,serif; --font-script:"Cormorant",Georgia,serif; --font-hero:"Great Vibes","Playfair Display",cursive; }
:root[data-font="storii"]{    --font-display:"Marcellus",Georgia,serif; --font-script:"Marcellus",Georgia,serif; --font-hero:"Marcellus",Georgia,serif; }