/* Mispache themes — four seasons x day/night.

   Each theme is just a set of CSS custom properties. The structural styles in
   style.css reference these variables; picking a theme swaps the palette. The
   viewer's chosen theme rides the <html data-theme="..."> attribute, and their
   optional palette overrides ride an inline style attribute (see base.html).
*/

/* The palette variables, declared as colors.

   This is what makes a theme change animatable: a browser will not interpolate
   a custom property unless it has been told what kind of value it holds, so
   registering them as <color> lets the whole palette cross-fade at once, and
   everything drawn from it (gradients included) comes along. The initial
   values match the :root fallback below, and only matter if a page somehow
   loads with no theme attribute at all. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #e9d6b5; }
@property --bg-soft { syntax: "<color>"; inherits: true; initial-value: #e2cba3; }
@property --card { syntax: "<color>"; inherits: true; initial-value: #fdfbf6; }
@property --card-2 { syntax: "<color>"; inherits: true; initial-value: #f7eeda; }
@property --border { syntax: "<color>"; inherits: true; initial-value: #e2c496; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #312017; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #9a7b4d; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #b3501a; }
@property --accent-2 { syntax: "<color>"; inherits: true; initial-value: #d97b24; }
@property --danger { syntax: "<color>"; inherits: true; initial-value: #a62f1f; }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #5d7a33; }

/* Fade the palette, but only while a swap is in flight. The class is added and
   removed by the theme code around the change (static/theme_fade.js, and the
   landing page's own demo), so ordinary hover transitions are never slowed down
   by it. The duration comes from a custom property so a quicker picker fade and
   the landing page's slower one share this one rule. A browser without
   @property ignores both this and the block above, and simply swaps. */
html.theme-fade {
    transition-property: --bg, --bg-soft, --card, --card-2, --border,
                         --text, --muted, --accent, --accent-2, --danger, --ok;
    transition-duration: var(--theme-fade-duration, 2s);
    transition-timing-function: ease;
}

/* Fallback / default = autumn-day (also covers data-theme="autumn-day"). */
:root {
    --radius: 12px;
    --bg: #e9d6b5;
    --bg-soft: #e2cba3;
    --card: #fdfbf6;
    --card-2: #f7eeda;
    --border: #e2c496;
    --text: #312017;
    --muted: #9a7b4d;
    --accent: #b3501a;
    --accent-2: #d97b24;
    --danger: #a62f1f;
    --ok: #5d7a33;
}

[data-theme="spring-day"] {
    --bg: #eef4ea;
    --bg-soft: #e3eee0;
    --card: #ffffff;
    --card-2: #f4f9f2;
    --border: #d5e4d0;
    --text: #26332a;
    --muted: #6b7d6e;
    --accent: #3f9d5e;
    --accent-2: #d96f9c;
    --danger: #c0392b;
    --ok: #2e9e57;
}

[data-theme="spring-night"] {
    --bg: #101a14;
    --bg-soft: #15211a;
    --card: #1b2a21;
    --card-2: #22352a;
    --border: #2f4637;
    --text: #e6f0e8;
    --muted: #8aa392;
    --accent: #63d98b;
    --accent-2: #f08bb5;
    --danger: #e56b5a;
    --ok: #5ecf7e;
}

[data-theme="summer-day"] {
    --bg: #fff6e0;
    --bg-soft: #ffefc9;
    --card: #ffffff;
    --card-2: #fff3d6;
    --border: #f0dcac;
    --text: #2f2a1c;
    --muted: #8a7c55;
    --accent: #1f8fce;
    --accent-2: #f5a623;
    --danger: #d23f31;
    --ok: #2f9e5f;
}

[data-theme="summer-night"] {
    --bg: #111a2b;
    --bg-soft: #16223a;
    --card: #1c2b46;
    --card-2: #233653;
    --border: #33486b;
    --text: #eef2fb;
    --muted: #93a6c4;
    --accent: #56b6f0;
    --accent-2: #ffc857;
    --danger: #ff6b5e;
    --ok: #5fce8a;
}

[data-theme="autumn-night"] {
    --bg: #14171f;
    --bg-soft: #1c1f28;
    --card: #232a3a;
    --card-2: #2a3244;
    --border: #4a4438;
    --text: #f0e6d0;
    --muted: #8a7a5c;
    --accent: #e08a2e;
    --accent-2: #f0b45c;
    --danger: #d94f3d;
    --ok: #8fae5c;
}

[data-theme="winter-day"] {
    --bg: #eaf1f6;
    --bg-soft: #dfe9f0;
    --card: #ffffff;
    --card-2: #f2f7fa;
    --border: #d3e0e8;
    --text: #22303a;
    --muted: #6f8492;
    --accent: #3f7fa6;
    --accent-2: #7fa8c9;
    --danger: #c23b4a;
    --ok: #3f8f6b;
}

[data-theme="winter-night"] {
    --bg: #0e1420;
    --bg-soft: #131b29;
    --card: #182333;
    --card-2: #1e2c3f;
    --border: #2c3d55;
    --text: #e8eef7;
    --muted: #8aa0b8;
    --accent: #6bb3e8;
    --accent-2: #a5cdee;
    --danger: #e06b7a;
    --ok: #6fc79a;
}