/* Alternate theme presets. Default Blue Mountain lives in :root of styles.css. */

html[data-ae-theme="matcha"] {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Libre Baskerville", ui-serif, Georgia, serif;
  --color-ink: #102215;
  --color-ink-muted: #415247;
  --color-accent: #166534;
  --color-accent-hover: #14532d;
  --color-accent-gradient-high: #15803d;
  --color-accent-sheen: #22c55e;
  --color-accent-ice: #86efac;
  --accent-rgb: 22 101 52;
  --accent-mid-rgb: 34 197 94;
  --accent-deep-rgb: 20 83 45;
  --color-accent-soft: rgb(var(--accent-rgb) / 0.12);
  --color-sky-glow: rgb(52 211 153 / 0.12);
  --color-accent-glow: rgb(var(--accent-mid-rgb) / 0.16);
  --bg-bloom-accent: rgb(var(--accent-rgb) / 0.28);
  --bg-bloom-warm: rgb(208 225 196 / 0.4);
  --bg-bloom-slate: rgb(61 83 68 / 0.22);
  --surface-glass: rgba(252, 255, 252, 0.95);
  --surface-glass-strong: rgba(255, 255, 255, 0.99);
  --border-subtle: rgba(69, 90, 75, 0.2);
  --shadow-panel: 0 1px 2px rgb(10 25 14 / 0.04), 0 10px 30px rgb(10 25 14 / 0.08), 0 1px 0 rgb(255 255 255 / 0.82) inset;
}

html[data-ae-theme="matcha"] body {
  background-color: #ccd5cb;
  background-image:
    radial-gradient(ellipse 52% 38% at 50% 108%, rgb(12 30 18 / 0.06), transparent 55%),
    radial-gradient(ellipse 110% 88% at 50% -28%, var(--bg-bloom-warm), transparent 52%),
    radial-gradient(ellipse 78% 62% at 100% 10%, var(--bg-bloom-accent), transparent 46%),
    radial-gradient(ellipse 85% 72% at 0% 100%, var(--bg-bloom-slate), transparent 50%),
    linear-gradient(170deg, #fbfffa 0%, #edf5eb 30%, #dde8db 58%, #ccd5cb 100%),
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(22, 60, 40, 0.03) 30px, rgba(22, 60, 40, 0.03) 31px),
    radial-gradient(circle at 2px 2px, rgba(22, 60, 40, 0.05) 1px, transparent 0);
  background-size: auto, auto, auto, auto, auto, auto, 22px 22px;
  background-attachment: fixed;
}

html[data-ae-theme="earl-grey"] {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "IBM Plex Serif", ui-serif, Georgia, serif;
  --color-ink: #1b1a22;
  --color-ink-muted: #565468;
  --color-accent: #4f46a5;
  --color-accent-hover: #433892;
  --color-accent-gradient-high: #6d5fc7;
  --color-accent-sheen: #a08de1;
  --color-accent-ice: #d8cff4;
  --accent-rgb: 79 70 165;
  --accent-mid-rgb: 109 95 199;
  --accent-deep-rgb: 58 51 120;
  --color-accent-soft: rgb(var(--accent-rgb) / 0.12);
  --color-sky-glow: rgb(199 190 255 / 0.12);
  --color-accent-glow: rgb(var(--accent-mid-rgb) / 0.18);
  --bg-bloom-accent: rgb(var(--accent-rgb) / 0.3);
  --bg-bloom-warm: rgb(222 217 232 / 0.46);
  --bg-bloom-slate: rgb(78 74 93 / 0.24);
  --surface-glass: rgba(252, 252, 255, 0.95);
  --surface-glass-strong: rgba(255, 255, 255, 0.99);
  --border-subtle: rgba(89, 84, 105, 0.2);
  --shadow-panel: 0 1px 2px rgb(20 18 30 / 0.05), 0 10px 30px rgb(20 18 30 / 0.09), 0 1px 0 rgb(255 255 255 / 0.85) inset;
}

html[data-ae-theme="earl-grey"] body {
  background-color: #d6d2dc;
  background-image:
    radial-gradient(ellipse 52% 38% at 50% 108%, rgb(20 18 30 / 0.06), transparent 55%),
    radial-gradient(ellipse 112% 90% at 50% -30%, var(--bg-bloom-warm), transparent 53%),
    radial-gradient(ellipse 80% 64% at 100% 6%, var(--bg-bloom-accent), transparent 47%),
    radial-gradient(ellipse 86% 70% at 0% 100%, var(--bg-bloom-slate), transparent 51%),
    linear-gradient(168deg, #fbfafe 0%, #f0edf6 30%, #e4deee 55%, #d6d2dc 100%),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(25, 22, 36, 0.03) 31px, rgba(25, 22, 36, 0.03) 32px),
    radial-gradient(circle at 2px 2px, rgba(25, 22, 36, 0.05) 1px, transparent 0);
  background-size: auto, auto, auto, auto, auto, auto, 22px 22px;
  background-attachment: fixed;
}

html[data-ae-theme="dark-stormy"] {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "IBM Plex Serif", ui-serif, Georgia, serif;
  --color-ink: #e7edf2;
  --color-ink-muted: #a4b2bf;
  --color-accent: #5aa7d6;
  --color-accent-hover: #8ac6e9;
  --color-accent-gradient-high: #88caef;
  --color-accent-sheen: #b6e0f7;
  --color-accent-ice: #d4edf9;
  --accent-rgb: 90 167 214;
  --accent-mid-rgb: 136 202 239;
  --accent-deep-rgb: 46 92 122;
  --color-accent-soft: rgb(var(--accent-rgb) / 0.2);
  --color-sky-glow: rgb(96 165 250 / 0.12);
  --color-accent-glow: rgb(var(--accent-mid-rgb) / 0.24);
  --bg-bloom-accent: rgb(var(--accent-rgb) / 0.2);
  --bg-bloom-warm: rgb(90 110 130 / 0.22);
  --bg-bloom-slate: rgb(13 24 36 / 0.58);
  --surface-glass: rgba(18, 29, 40, 0.75);
  --surface-glass-strong: rgba(24, 37, 50, 0.88);
  --border-subtle: rgba(120, 154, 180, 0.26);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 48px rgb(0 0 0 / 0.42), 0 1px 0 rgb(255 255 255 / 0.08) inset;
  /* Darker than link accent so white label on primary buttons meets WCAG AA (4.5:1). */
  --color-accent-fill: #1d4ed8;
  --color-accent-fill-mid: #2563eb;
}

html[data-ae-theme="dark-stormy"] body {
  background-color: #101922;
  background-image:
    radial-gradient(ellipse 95% 75% at 85% -12%, rgb(86 151 205 / 0.16), transparent 52%),
    radial-gradient(ellipse 68% 62% at 0% 102%, rgb(30 58 95 / 0.55), transparent 48%),
    linear-gradient(168deg, #182632 0%, #121d28 45%, #0d151d 100%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(214, 234, 248, 0.04) 32px, rgba(214, 234, 248, 0.04) 33px);
  background-size: auto, auto, auto, auto;
  background-attachment: fixed;
}

html[data-ae-theme="manhattan"] {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Spectral", ui-serif, Georgia, serif;
  --color-ink: #f0e6dd;
  --color-ink-muted: #c2aea1;
  --color-accent: #f08a24;
  --color-accent-hover: #ffb86b;
  --color-accent-gradient-high: #f5a038;
  --color-accent-sheen: #ffd08d;
  --color-accent-ice: #ffe0b2;
  --accent-rgb: 240 138 36;
  --accent-mid-rgb: 245 160 56;
  --accent-deep-rgb: 140 63 16;
  --color-accent-soft: rgb(var(--accent-rgb) / 0.2);
  --color-sky-glow: rgb(251 191 36 / 0.1);
  --color-accent-glow: rgb(var(--accent-mid-rgb) / 0.24);
  --bg-bloom-accent: rgb(var(--accent-rgb) / 0.18);
  --bg-bloom-warm: rgb(129 58 33 / 0.34);
  --bg-bloom-slate: rgb(30 15 12 / 0.58);
  --surface-glass: rgba(35, 18, 15, 0.76);
  --surface-glass-strong: rgba(42, 22, 18, 0.9);
  --border-subtle: rgba(184, 127, 93, 0.28);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.45), 0 16px 48px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 220 190 / 0.08) inset;
  --color-accent-fill: #9a3412;
  --color-accent-fill-mid: #c2410c;
}

html[data-ae-theme="manhattan"] body {
  background-color: #1a100f;
  background-image:
    radial-gradient(ellipse 94% 72% at 100% -8%, rgb(240 138 36 / 0.16), transparent 52%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgb(127 29 29 / 0.5), transparent 49%),
    linear-gradient(168deg, #2b1712 0%, #20130f 45%, #160d0b 100%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(255, 219, 184, 0.035) 32px, rgba(255, 219, 184, 0.035) 33px);
  background-size: auto, auto, auto, auto;
  background-attachment: fixed;
}

html[data-ae-theme="rose"] {
  --font-sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Merriweather", ui-serif, Georgia, serif;
  --color-ink: #f4ecf1;
  --color-ink-muted: #ccb8c6;
  --color-accent: #f472b6;
  --color-accent-hover: #f9a8d4;
  --color-accent-gradient-high: #fb8cc7;
  --color-accent-sheen: #fbcfe8;
  --color-accent-ice: #fde3f1;
  --accent-rgb: 244 114 182;
  --accent-mid-rgb: 251 140 199;
  --accent-deep-rgb: 127 51 95;
  --color-accent-soft: rgb(var(--accent-rgb) / 0.22);
  --color-sky-glow: rgb(244 114 182 / 0.12);
  --color-accent-glow: rgb(var(--accent-mid-rgb) / 0.24);
  --bg-bloom-accent: rgb(var(--accent-rgb) / 0.18);
  --bg-bloom-warm: rgb(92 44 70 / 0.35);
  --bg-bloom-slate: rgb(28 16 26 / 0.62);
  --surface-glass: rgba(37, 20, 33, 0.76);
  --surface-glass-strong: rgba(46, 24, 40, 0.9);
  --border-subtle: rgba(177, 122, 160, 0.28);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.45), 0 16px 48px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 220 243 / 0.08) inset;
  --color-accent-fill: #9d174d;
  --color-accent-fill-mid: #be185d;
}

html[data-ae-theme="rose"] body {
  background-color: #181017;
  background-image:
    radial-gradient(ellipse 90% 70% at 95% -8%, rgb(244 114 182 / 0.15), transparent 50%),
    radial-gradient(ellipse 72% 62% at 0% 100%, rgb(91 33 77 / 0.54), transparent 48%),
    linear-gradient(168deg, #24151f 0%, #1d121a 45%, #140d13 100%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(252, 224, 240, 0.032) 32px, rgba(252, 224, 240, 0.032) 33px);
  background-size: auto, auto, auto, auto;
  background-attachment: fixed;
}