/* Colour themes (Settings → Appearance; the list is mailapp/themes.py).

   A theme is data-palette on <html>, or on any element, so the previews
   in Settings can each wear their own. Nor is today's palette, as exact
   hex values. The others come from four numbers, in OKLCH so every theme
   gets the same lightness and contrast:
     --ah, --ac   accent hue and chroma
     --nh, --nc   the greys' tint: hue and chroma
     --al, --ald  accent lightness, light and dark (most themes: 50% / 75%)
   Dark versions follow the mode: the device's, or the one picked in the
   account menu (data-theme). Loaded after mail.css, which it overrides. */

/* ---------- the formulas, light ---------- */
[data-palette] {
  --al: 50%; --ald: 75%;
  --bg: oklch(97.6% calc(var(--nc) * .5) var(--nh));
  --sky: oklch(92.5% calc(var(--nc) * 2.2) var(--nh));
  --surface: oklch(99.7% calc(var(--nc) * .25) var(--nh));
  --sunk: oklch(95.2% var(--nc) var(--nh));
  --line: oklch(90.5% var(--nc) var(--nh));
  --ink: oklch(22% calc(var(--nc) * 1.6) var(--nh));
  --muted: oklch(49% calc(var(--nc) * 1.6) var(--nh));
  --faint: oklch(64% calc(var(--nc) * 1.4) var(--nh));
  --accent: oklch(var(--al) var(--ac) var(--ah));
  --accent-ink: #ffffff;
  --accent-soft: oklch(94.5% calc(var(--ac) * .22) var(--ah));
  --paper: oklch(99.3% calc(var(--nc) * .6) var(--nh));
  --postmark: oklch(42% calc(var(--nc) * 3 + .02) var(--nh));
  color-scheme: light;
}

/* ---------- the formulas, dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette],
  :root:not([data-theme="light"]) [data-palette] {
    --bg: oklch(17% calc(var(--nc) * 1.6) var(--nh));
    --sky: oklch(23% calc(var(--nc) * 2.4) var(--nh));
    --surface: oklch(21% calc(var(--nc) * 1.6) var(--nh));
    --sunk: oklch(24.5% calc(var(--nc) * 1.6) var(--nh));
    --line: oklch(31% calc(var(--nc) * 1.6) var(--nh));
    --ink: oklch(93.5% calc(var(--nc) * .6) var(--nh));
    --muted: oklch(73% calc(var(--nc) * 1.3) var(--nh));
    --faint: oklch(57% calc(var(--nc) * 1.3) var(--nh));
    --accent: oklch(var(--ald) calc(var(--ac) * .85) var(--ah));
    --accent-ink: oklch(19% calc(var(--ac) * .3) var(--ah));
    --accent-soft: oklch(30% calc(var(--ac) * .35) var(--ah));
    --paper: oklch(24% calc(var(--nc) * 1.6) var(--nh));
    --postmark: oklch(78% calc(var(--nc) * 2 + .02) var(--nh));
    color-scheme: dark;
  }
}
:root[data-theme="dark"][data-palette],
:root[data-theme="dark"] [data-palette] {
  --bg: oklch(17% calc(var(--nc) * 1.6) var(--nh));
  --sky: oklch(23% calc(var(--nc) * 2.4) var(--nh));
  --surface: oklch(21% calc(var(--nc) * 1.6) var(--nh));
  --sunk: oklch(24.5% calc(var(--nc) * 1.6) var(--nh));
  --line: oklch(31% calc(var(--nc) * 1.6) var(--nh));
  --ink: oklch(93.5% calc(var(--nc) * .6) var(--nh));
  --muted: oklch(73% calc(var(--nc) * 1.3) var(--nh));
  --faint: oklch(57% calc(var(--nc) * 1.3) var(--nh));
  --accent: oklch(var(--ald) calc(var(--ac) * .85) var(--ah));
  --accent-ink: oklch(19% calc(var(--ac) * .3) var(--ah));
  --accent-soft: oklch(30% calc(var(--ac) * .35) var(--ah));
  --paper: oklch(24% calc(var(--nc) * 1.6) var(--nh));
  --postmark: oklch(78% calc(var(--nc) * 2 + .02) var(--nh));
  color-scheme: dark;
}

/* ---------- the nine ---------- */
[data-palette="cherry"]   { --ah: 22;  --ac: .175; --nh: 20;  --nc: .006; }
[data-palette="ember"]    { --ah: 48;  --ac: .16;  --nh: 50;  --nc: .008; --al: 52%; }
[data-palette="honey"]    { --ah: 72;  --ac: .12;  --nh: 82;  --nc: .016; --al: 47%; --ald: 79%; }
[data-palette="forest"]   { --ah: 150; --ac: .12;  --nh: 155; --nc: .008; --al: 47%; }
[data-palette="sea"]      { --ah: 200; --ac: .1;   --nh: 210; --nc: .01;  --al: 48%; --ald: 77%; }
[data-palette="sky"]      { --ah: 255; --ac: .16;  --nh: 250; --nc: .012; }
[data-palette="iris"]     { --ah: 290; --ac: .16;  --nh: 285; --nc: .01;  --al: 49%; }
[data-palette="graphite"] { --ah: 260; --ac: .012; --nh: 260; --nc: .004; --al: 27%; --ald: 90%; }
[data-palette="midnight"] { --ah: 82;  --ac: .13;  --nh: 265; --nc: .03;  --al: 46%; --ald: 80%; }

/* ---------- Nor: today's exact colours, light then dark ---------- */
[data-palette="nor"] {
  --bg: #f5f7fb; --sky: #dde7f4; --surface: #ffffff; --sunk: #eef2f7; --line: #dfe5ee;
  --ink: #151d29; --muted: #586578; --faint: #8592a3;
  --accent: #a3307f; --accent-ink: #ffffff; --accent-soft: #f7e7f2;
  --paper: #fffdf9; --postmark: #3b4a66;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette="nor"],
  :root:not([data-theme="light"]) [data-palette="nor"] {
    --bg: #0e131a; --sky: #15202f; --surface: #151c25; --sunk: #1a2330; --line: #263243;
    --ink: #e7edf4; --muted: #98a6b8; --faint: #6d7b8e;
    --accent: #e57fc4; --accent-ink: #1c0c17; --accent-soft: #3a1c31;
    --paper: #1b2431; --postmark: #a3b4d0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"][data-palette="nor"],
:root[data-theme="dark"] [data-palette="nor"] {
  --bg: #0e131a; --sky: #15202f; --surface: #151c25; --sunk: #1a2330; --line: #263243;
  --ink: #e7edf4; --muted: #98a6b8; --faint: #6d7b8e;
  --accent: #e57fc4; --accent-ink: #1c0c17; --accent-soft: #3a1c31;
  --paper: #1b2431; --postmark: #a3b4d0;
  color-scheme: dark;
}