/* ===========================================================================
   Album themes.

   These dress the guest-facing surfaces only: the upload page, the gallery, and
   the printed card. The owner console is deliberately untouched, because it is
   the instrument rather than the album, and an instrument that changes clothes
   with the occasion is harder to use, not nicer.

   Each theme overrides the same token names app.css already defines, and is
   loaded after it, so a theme wins without any change to the components.

   A theme is a point of view, not a hue rotation. Each one sets its own display
   face, its own paper, and its own idea of what the accent is for. Fonts are
   requested per theme at runtime by theme.js, so an album only ever downloads
   the one it uses.
=========================================================================== */

/* --- Studio -------------------------------------------------------------
   The default. Cool neutral paper, cobalt, photos supply the warmth. Right for
   anything that is not an occasion: a shoot, a site visit, a party with no
   particular dress code. This is the one theme that keeps a dark mode, because
   it is also the one people leave open on a laptop. */
[data-theme="studio"] {
  --bg: #e8eaec;
  --surface: #f7f8f9;
  --surface-sunken: #dfe3e5;
  --ink: #14181b;
  --muted: #5a6469;
  --line: #cfd5d8;
  --line-strong: #b6bfc3;
  --accent: #1d3fd1;
  --accent-hover: #172fa8;
  --accent-text: #1d3fd1;
  --on-accent: #ffffff;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -.025em;
  --display-case: none;
}

@media (prefers-color-scheme: dark) {
  [data-theme="studio"] {
    --bg: #101315;
    --surface: #191d20;
    --surface-sunken: #0b0e10;
    --ink: #e9edef;
    --muted: #98a3a8;
    --line: #292f33;
    --line-strong: #3a4247;
    --accent: #3f5cf0;
    --accent-hover: #5470ff;
    --accent-text: #93a8ff;
  }
}

/* --- Wedding ------------------------------------------------------------
   Stationery, not software. Warm paper, a high-contrast old-style serif set
   large and loose, and a eucalyptus green that reads as pressed foliage rather
   than the gold-on-cream that every wedding template reaches for first. The
   accent is used sparingly: this theme carries its weight in the type. */
[data-theme="wedding"] {
  --bg: #f4efe7;
  --surface: #fbf8f3;
  --surface-sunken: #e9e2d6;
  --ink: #2c2822;
  --muted: #6f6558;
  --line: #ddd3c4;
  --line-strong: #bfb3a0;
  --accent: #55684f;
  --accent-hover: #43533e;
  --accent-text: #46563f;
  --on-accent: #fbf8f3;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --display-weight: 600;
  --display-tracking: .004em;
  --display-case: none;
}

/* --- Evening ------------------------------------------------------------
   For a party that happens after dark, looked at in the room where it is
   happening. Near-black so a phone is not a torch in someone's face, warm white
   type, and a single amber that behaves like the venue lighting. */
[data-theme="evening"] {
  --bg: #121013;
  --surface: #1b181c;
  --surface-sunken: #0a090b;
  --ink: #f0ebe4;
  --muted: #9c948c;
  --line: #2b272d;
  --line-strong: #423c45;
  --accent: #e0a33c;
  --accent-hover: #f0b552;
  --accent-text: #edb551;
  --on-accent: #16130f;
  --font-display: "Fraunces", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -.01em;
  --display-case: none;
}

/* --- Celebration --------------------------------------------------------
   Birthdays, christenings, leaving parties. Bright paper, a heavy grotesque set
   tight and uppercase, and a hot pink that is allowed to be loud because
   nothing else in the theme is. */
[data-theme="celebration"] {
  --bg: #f2f3ee;
  --surface: #ffffff;
  --surface-sunken: #e4e6de;
  --ink: #171a16;
  --muted: #5d635a;
  --line: #d3d7cc;
  --line-strong: #b0b6a7;
  --accent: #d81e6a;
  --accent-hover: #b4185a;
  --accent-text: #c01a60;
  --on-accent: #ffffff;
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -.02em;
  --display-case: uppercase;
}

/* --- Coast --------------------------------------------------------------
   Boats, water, anything outdoors in daylight. Pale sea-grey paper, deep navy
   ink, and a signal orange borrowed from lifejackets and channel markers,
   darkened until it carries white type at AA on a phone in full sun. */
[data-theme="coast"] {
  --bg: #e6ebec;
  --surface: #f5f8f8;
  --surface-sunken: #d5dee0;
  --ink: #14262e;
  --muted: #4f6570;
  --line: #c2ced1;
  --line-strong: #9aabb0;
  --accent: #b03f14;
  --accent-hover: #8f3310;
  --accent-text: #a83a11;
  --on-accent: #ffffff;
  --font-display: "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: .01em;
  --display-case: uppercase;
}

/* --- Naming day ---------------------------------------------------------
   Christenings, naming days, first birthdays. Quiet rather than pastel: cool
   pale paper, a soft serif with a large x-height so it stays readable at small
   sizes, and a muted teal that avoids the pink-or-blue question entirely. */
[data-theme="naming"] {
  --bg: #edf1f2;
  --surface: #f9fbfb;
  --surface-sunken: #dde5e7;
  --ink: #23303a;
  --muted: #52626e;
  --line: #ccd8db;
  --line-strong: #a6b6bb;
  --accent: #2f6b7d;
  --accent-hover: #245562;
  --accent-text: #2b6373;
  --on-accent: #ffffff;
  --font-display: "Newsreader", Georgia, serif;
  --display-weight: 500;
  --display-tracking: -.006em;
  --display-case: none;
}

/* --- Remembrance --------------------------------------------------------
   Wakes and memorials, where people share photographs of someone. Restrained
   and warm-grey rather than black: a funeral theme that looks like mourning
   stationery is worse than one that simply gets out of the way. Garamond,
   generous spacing, and a slate accent that never raises its voice. */
[data-theme="remembrance"] {
  --bg: #e9e8e5;
  --surface: #f4f3f0;
  --surface-sunken: #dcdad6;
  --ink: #212429;
  --muted: #565a61;
  --line: #d0cec9;
  --line-strong: #adaaa4;
  --accent: #414c5c;
  --accent-hover: #333c49;
  --accent-text: #3d4756;
  --on-accent: #f4f3f0;
  --font-display: "EB Garamond", Georgia, serif;
  --display-weight: 500;
  --display-tracking: .002em;
  --display-case: none;
}

/* --- Boardroom ----------------------------------------------------------
   Conferences, site visits, client days, anything that will be seen by people
   who are at work. White paper, a neutral grotesque, one teal. Nothing here has
   a personality, which is the point: it should look like it belongs to whoever
   is running the event. */
[data-theme="boardroom"] {
  --bg: #f0f2f4;
  --surface: #ffffff;
  --surface-sunken: #e2e6ea;
  --ink: #0f1418;
  --muted: #515a63;
  --line: #d5dae0;
  --line-strong: #aeb6bf;
  --accent: #0d5c5c;
  --accent-hover: #094747;
  --accent-text: #0c5555;
  --on-accent: #ffffff;
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -.015em;
  --display-case: none;
}

/* --- Kodachrome ---------------------------------------------------------
   For anything that wants to look like it came off a roll rather than a phone.
   Warm slide-mount paper, condensed gothic caps of the kind printed on film
   boxes, and the red that Kodak spent a century making mean photography. */
[data-theme="kodachrome"] {
  --bg: #ece2d4;
  --surface: #f7f0e5;
  --surface-sunken: #ded2c0;
  --ink: #26201a;
  --muted: #665849;
  --line: #d3c6b3;
  --line-strong: #b0a08a;
  --accent: #b02f18;
  --accent-hover: #8f2412;
  --accent-text: #a52c16;
  --on-accent: #f7f0e5;
  --font-display: "Oswald", "Archivo Narrow", ui-sans-serif, sans-serif;
  --display-weight: 600;
  --display-tracking: .02em;
  --display-case: uppercase;
}

/* --- Monochrome ---------------------------------------------------------
   No colour at all. A high-contrast display serif on white, black for every
   emphasis including buttons, and the photographs providing the only hue on the
   page. The most severe theme here, and the one that flatters pictures most. */
[data-theme="monochrome"] {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-sunken: #e4e4e4;
  --ink: #0b0b0b;
  --muted: #555555;
  --line: #d6d6d6;
  --line-strong: #a8a8a8;
  --accent: #0b0b0b;
  --accent-hover: #2a2a2a;
  --accent-text: #0b0b0b;
  --on-accent: #ffffff;
  --font-display: "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -.01em;
  --display-case: none;
}

/* --- Shared behaviour ----------------------------------------------------
   Themes drive the display face and its setting, not just colour. */
[data-theme] h1,
[data-theme] h2,
[data-theme] h3,
[data-theme] .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
}

/* Serif display faces need more room to breathe than a grotesque does. */
[data-theme="wedding"] h1,
[data-theme="remembrance"] h1,
[data-theme="monochrome"] h1 { line-height: 1.08; }

/* Instrument Serif only ships one weight, so size carries the emphasis. */
[data-theme="monochrome"] .hero h1,
[data-theme="monochrome"] .album-head h1 { font-size: clamp(34px, 8vw, 58px); }
[data-theme="wedding"] .hero h1,
[data-theme="wedding"] .album-head h1 { font-size: clamp(34px, 8vw, 58px); }

/* --- Printed card --------------------------------------------------------
   The card is a guest-facing object, so it takes the theme too. These rules are
   self-contained: they work inside the console, which does not load app.css. */
[data-theme] .card,
.card[data-theme] {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
[data-theme] .card h3,
.card[data-theme] h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
  font-size: 19px;
}
[data-theme] .card__stub,
.card[data-theme] .card__stub {
  background: var(--surface-sunken);
  color: var(--muted);
  border-top: 1px dashed var(--line-strong);
}
[data-theme] .card .edge,
.card[data-theme] .edge { color: var(--muted); }
[data-theme] .card .mono,
.card[data-theme] .mono { color: var(--ink); }

/* The QR tile stays white in every theme. Scanners are unreliable on tinted or
   inverted codes, and a card that does not scan is not a card. */
[data-theme] .card__qr,
.card[data-theme] .card__qr { background: #ffffff; }