/* SPDX-License-Identifier: LicenseRef-Proprietary
   Copyright (c) 2026 Griffith Software — https://griffith.software */

/* Themes.
   Every color the app uses is a variable defined here. A theme is one block of
   variables selected by <html data-theme="...">; the list of themes users can
   pick is content/themes.json, and their names are in content/text/common.json.

   To add a theme: copy a block, change the values, give it a new data-theme id,
   and add that id to content/themes.json. Keep text contrast at 4.5:1 or more.

   "default" (Bloom) matches the app icon: near-black with glowing pinks. */

:root,
[data-theme="default"] {
  --bg: #080305;
  --surface: #150a10;
  --surface-soft: #1f0e18;
  --text: #fdeef4;
  --text-muted: #d7a6bb;
  --primary: #ff7ab4;
  --primary-text: #22050f;
  --primary-fill: linear-gradient(135deg, #ffb0d0 0%, #ff6fae 45%, #e8407e 100%);
  --primary-soft: #3a1328;
  --accent: #fdb3ca;
  --border: #4a1d33;
  --focus: #fff1a8;
  --gentle-warning: #ffc38a;
  --card-shadow: 0 0 0 1px rgb(255 95 162 / 0.10), 0 0 24px rgb(255 79 154 / 0.08);
  --hero-border: rgb(255 95 162 / 0.65);
  --hero-shadow: 0 0 0 1px rgb(255 95 162 / 0.25), 0 0 28px rgb(255 79 154 / 0.22), inset 0 0 40px rgb(255 79 154 / 0.06);
  --band: rgb(255 122 180 / 0.14);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f7f1ee;
  --surface: #ffffff;
  --surface-soft: #f1e8f1;
  --text: #33283a;
  --text-muted: #6b5d70;
  --primary: #7a4f8e;
  --primary-text: #ffffff;
  --primary-fill: #7a4f8e;
  --primary-soft: #ead9ef;
  --accent: #c9826b;
  --border: #e3d7e0;
  --focus: #4f7fbf;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(60 30 70 / 0.06), 0 4px 16px rgb(60 30 70 / 0.06);
  --hero-border: #e3d7e0;
  --hero-shadow: 0 1px 2px rgb(60 30 70 / 0.06), 0 4px 16px rgb(60 30 70 / 0.06);
  --band: rgb(122 79 142 / 0.10);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #211b22;
  --surface: #2c242e;
  --surface-soft: #342a37;
  --text: #f3ebf2;
  --text-muted: #c4b6c6;
  --primary: #c9a3da;
  --primary-text: #24182a;
  --primary-fill: #c9a3da;
  --primary-soft: #45354d;
  --accent: #e0a48f;
  --border: #463a49;
  --focus: #9ec0ef;
  --gentle-warning: #e7bd84;
  --card-shadow: none;
  --hero-border: #463a49;
  --hero-shadow: none;
  --band: rgb(201 163 218 / 0.12);
  color-scheme: dark;
}

/* ---- Looks (paid, see src/plan.js) ----
   The same looks as ClockRoute. Daybreak, Night Shift, Hi-Vis and Steel are color palettes; the
   other six add one of the owner's photographs behind the page, under a wash of the look's own
   background color (--veil) so text stays readable. Colors were checked for 4.5:1 text contrast. */

/* Daybreak */
[data-theme="daybreak"] {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-soft: #fffaed;
  --text: #16181d;
  --text-muted: #5a626e;
  --primary: #906000;
  --primary-text: #16181d;
  --primary-fill: #ffb703;
  --primary-soft: #fff3d7;
  --accent: #b78403;
  --border: #e2e0da;
  --focus: #b97b00;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #ffb703;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(255 183 3 / 0.14);
  color-scheme: light;
}

/* Night Shift */
[data-theme="night"] {
  --bg: #16181c;
  --surface: #1f2227;
  --surface-soft: #2b2e32;
  --text: #eeece6;
  --text-muted: #9aa1ab;
  --primary: #ffb703;
  --primary-text: #1f2227;
  --primary-fill: #ffc93c;
  --primary-soft: #50472c;
  --accent: #ffc93c;
  --border: #313640;
  --focus: #ffc93c;
  --gentle-warning: #e7bd84;
  --card-shadow: none;
  --hero-border: #ffc93c;
  --hero-shadow: none;
  --band: rgb(255 201 60 / 0.14);
  color-scheme: dark;
}

/* Hi-Vis */
[data-theme="hivis"] {
  --bg: #faf5e9;
  --surface: #ffffff;
  --surface-soft: #fff5ee;
  --text: #1c1a15;
  --text-muted: #6b6252;
  --primary: #b54900;
  --primary-text: #1c1a15;
  --primary-fill: #ff6a13;
  --primary-soft: #ffe7d9;
  --accent: #eb6211;
  --border: #ece2cc;
  --focus: #d65600;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #ff6a13;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(255 106 19 / 0.14);
  color-scheme: light;
}

/* Steel */
[data-theme="steel"] {
  --bg: #3b424a;
  --surface: #465059;
  --surface-soft: #505a62;
  --text: #eef1f3;
  --text-muted: #cad1d6;
  --primary: #86cce8;
  --primary-text: #000000;
  --primary-fill: #5bb5da;
  --primary-soft: #4b6675;
  --accent: #5bb5da;
  --border: #5a6570;
  --focus: #5bb5da;
  --gentle-warning: #e7bd84;
  --card-shadow: none;
  --hero-border: #5bb5da;
  --hero-shadow: none;
  --band: rgb(91 181 218 / 0.14);
  color-scheme: dark;
}

/* Book (photo) */
[data-theme="book"] {
  --bg: #f3ecd9;
  --surface: #fbf7ed;
  --surface-soft: #f6efdd;
  --text: #2b2013;
  --text-muted: #6b5d45;
  --primary: #805d07;
  --primary-text: #2b2013;
  --primary-fill: #b8860b;
  --primary-soft: #f0e5c9;
  --accent: #b8860b;
  --border: #ddd0b0;
  --focus: #8b6508;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #b8860b;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(184 134 11 / 0.14);
  --photo: url("../images/looks/book.jpg");
  --photo-position: center 30%;
  --veil: 60%;
  color-scheme: light;
}

/* Flowers (photo) */
[data-theme="flowers"] {
  --bg: #eef3e9;
  --surface: #fbfcf9;
  --surface-soft: #faf2f1;
  --text: #2e3b2a;
  --text-muted: #64725a;
  --primary: #b24960;
  --primary-text: #000000;
  --primary-fill: #e8748a;
  --primary-soft: #f8e6e7;
  --accent: #d56b7f;
  --border: #d9e3ce;
  --focus: #c24f68;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #e8748a;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(232 116 138 / 0.14);
  --photo: url("../images/looks/flowers.jpg");
  --photo-position: center;
  --veil: 55%;
  color-scheme: light;
}

/* Open Road (photo) */
[data-theme="openroad"] {
  --bg: #17181a;
  --surface: #222325;
  --surface-soft: #2e2f31;
  --text: #f2efea;
  --text-muted: #9b9691;
  --primary: #d46f27;
  --primary-text: #222325;
  --primary-fill: #ff6a00;
  --primary-soft: #53331d;
  --accent: #ff6a00;
  --border: #35363a;
  --focus: #ff6a00;
  --gentle-warning: #e7bd84;
  --card-shadow: none;
  --hero-border: #ff6a00;
  --hero-shadow: none;
  --band: rgb(255 106 0 / 0.14);
  --photo: url("../images/looks/openroad.jpg");
  --photo-position: center 65%;
  --veil: 55%;
  color-scheme: dark;
}

/* Rock 'n' Roll (photo) */
[data-theme="rocknroll"] {
  --bg: #efeae2;
  --surface: #faf8f4;
  --surface-soft: #f9e9ed;
  --text: #17130f;
  --text-muted: #6b6259;
  --primary: #b1156a;
  --primary-text: #000000;
  --primary-fill: #e91e8c;
  --primary-soft: #f7d5e3;
  --accent: #e91e8c;
  --border: #dad2c4;
  --focus: #b1156a;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #e91e8c;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(233 30 140 / 0.14);
  --photo: url("../images/looks/rocknroll.jpg");
  --photo-position: center 35%;
  --veil: 60%;
  color-scheme: light;
}

/* K-Pop (photo) */
[data-theme="kpop"] {
  --bg: #f5eef8;
  --surface: #fcfafd;
  --surface-soft: #f8f0fa;
  --text: #2e1f38;
  --text-muted: #766683;
  --primary: #9b4ea8;
  --primary-text: #2e1f38;
  --primary-fill: #c86fd6;
  --primary-soft: #f4e4f7;
  --accent: #c86fd6;
  --border: #e4d7ec;
  --focus: #9b4ea8;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #c86fd6;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(200 111 214 / 0.14);
  --photo: url("../images/looks/kpop.jpg");
  --photo-position: center 25%;
  --veil: 55%;
  color-scheme: light;
}

/* Tattoo (photo) */
[data-theme="tattoo"] {
  --bg: #ede6d6;
  --surface: #f7f2e6;
  --surface-soft: #f1e3d7;
  --text: #1a1611;
  --text-muted: #6b6151;
  --primary: #7a0f0f;
  --primary-text: #f7f2e6;
  --primary-fill: #a31515;
  --primary-soft: #eacfc5;
  --accent: #a31515;
  --border: #dcd2b8;
  --focus: #7a0f0f;
  --gentle-warning: #8a5a1f;
  --card-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --hero-border: #a31515;
  --hero-shadow: 0 1px 2px rgb(40 30 20 / 0.06), 0 4px 16px rgb(40 30 20 / 0.06);
  --band: rgb(163 21 21 / 0.14);
  --photo: url("../images/looks/tattoo.jpg");
  --photo-position: center 40%;
  --veil: 65%;
  color-scheme: light;
}

/* The photo sits on a fixed layer behind the page. (background-attachment: fixed would be simpler,
   but iPhone ignores it and stretches the photo down the whole page.) The full-size photo loads
   only when its look is in use. */
:is([data-theme="book"], [data-theme="flowers"], [data-theme="openroad"], [data-theme="rocknroll"], [data-theme="kpop"], [data-theme="tattoo"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg) var(--veil), transparent), color-mix(in srgb, var(--bg) var(--veil), transparent)),
    var(--photo);
  background-size: cover;
  background-position: var(--photo-position);
  background-repeat: no-repeat;
}

/* Text that sits straight on the photo gets a soft halo in the look's background color, and muted
   text there uses the full text color; text on cards, buttons and fields needs neither. */
:is([data-theme="book"], [data-theme="flowers"], [data-theme="openroad"], [data-theme="rocknroll"], [data-theme="kpop"], [data-theme="tattoo"]) .page {
  text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg), 0 0 1px var(--bg);
}
:is([data-theme="book"], [data-theme="flowers"], [data-theme="openroad"], [data-theme="rocknroll"], [data-theme="kpop"], [data-theme="tattoo"]) .page :is(.card, .button, .chip, .entry, input, select, textarea) {
  text-shadow: none;
}
:is([data-theme="book"], [data-theme="flowers"], [data-theme="openroad"], [data-theme="rocknroll"], [data-theme="kpop"], [data-theme="tattoo"]) .page > :is(.muted, .hint, .lead) {
  color: var(--text);
}