/* Pomodoro — colour tokens. Load before app.css; app.css only consumes these.
 *
 * --bg         page colour
 * --on         text/icons on the page (and "inverse" pills like Start / +)
 * --on-rgb     same colour as an "r g b" triplet, for rgb(var(--on-rgb) / .2) tints
 * --on-press   3D shadow under inverse pills
 * --shade-rgb  colour used for darkening overlays and shadows
 * --deep       near-black that surfaces are mixed toward
 * surfaces are deeper tints of --bg: no white panels anywhere.
 */
:root {
  --font: "Arial Rounded MT Bold", "Helvetica Rounded", "Nunito", Arial, Helvetica, sans-serif;
  --font-ui: Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: #ba4949;
  --on: #fff;
  --on-rgb: 255 255 255;
  --on-press: rgb(235, 235, 235);
  --shade-rgb: 0 0 0;
  --deep: #000;

  --card: rgb(var(--on-rgb) / .1);
  --white-20: rgb(var(--on-rgb) / .2);
  --ink: rgb(var(--on-rgb) / .92);
  --ink-strong: var(--on);
  --muted: rgb(var(--on-rgb) / .64);
  --line-light: rgb(var(--on-rgb) / .2);
  --surface: color-mix(in srgb, var(--bg) 70%, #140a0a);
  --band: rgb(var(--shade-rgb) / .14);
  --field: rgb(var(--shade-rgb) / .2);
  --field-focus: rgb(var(--shade-rgb) / .28);
  --line: rgb(var(--on-rgb) / .12);
  --hover: rgb(var(--on-rgb) / .1);
  --primary: color-mix(in srgb, var(--bg) 30%, #0d0606);
  --focus: rgb(var(--on-rgb) / .85);
  --danger: #ffc4b8;
  --warn: #ffdc8f;
  color-scheme: dark;
}
/* The open list of a <select> is drawn by the browser. Without these colors it is light grey
   and shows the cream text of the page on it. One rule for each select on each page. */
select option, select optgroup { background-color: var(--surface); color: var(--on); }
select option:disabled { color: rgb(var(--on-rgb) / .5); }
html[data-mode="short"] { --bg: #38858a; }
html[data-mode="long"] { --bg: #397097; }

/* ---------- Warm & Earthy Calm (/home) ----------
 * Tuned down from the reference palette for light sensitivity: the page is a
 * deepened terracotta (dimmer than the red timer page), text is cream rather
 * than pure white, and sticky notes are muted, mid-tone papers.
 */
:root {
  --earth-cream: #f2e4d4;
  --earth-sand: #e2c9ae;
  --earth-terracotta: #b5603a;
  --earth-clay: #94513a;
  --earth-olive: #5f6136;
  --earth-chocolate: #5a3019;
  --earth-mustard: #c98a35;
  --earth-umber: #2a170d;
}
html[data-theme="earthy"] {
  --bg: var(--earth-clay);
  --on: var(--earth-cream);
  --on-rgb: 242 228 212;
  --on-press: #b99a7c;
  --shade-rgb: 42 23 13;
  --deep: var(--earth-umber);
  --surface: color-mix(in srgb, var(--bg) 66%, var(--earth-umber));
  --primary: var(--earth-olive);
  --danger: #f2b8a2;
  --warn: #ecc27a;
  /* Cream text needs a darker backing, not a lighter one: a cream tint behind cream text reads poorly.
     Buttons sit on deep tints of the page, and quiet text stays near full cream. */
  --white-20: rgb(var(--shade-rgb) / .24);
  --muted: rgb(var(--on-rgb) / .86);
}

/* sticky-note papers: same colour names, earthy and lower-glare */
[data-theme="earthy"] .note { --paper: #e6cd8e; --ink-note: #3d2e12; }
[data-theme="earthy"] [data-color="yellow"] { --paper: #e6cd8e; --ink-note: #3d2e12; --accent: var(--earth-mustard); }
[data-theme="earthy"] [data-color="green"] { --paper: #bfc49a; --ink-note: #2a3215; --accent: #7d8048; }
[data-theme="earthy"] [data-color="orange"] { --paper: #e3b28c; --ink-note: #4a2a12; --accent: var(--earth-terracotta); }
[data-theme="earthy"] [data-color="pink"] { --paper: #deb3a4; --ink-note: #4a1f17; --accent: #c07a68; }
[data-theme="earthy"] [data-color="purple"] { --paper: #c9b3b8; --ink-note: #3b2530; --accent: #957882; }
[data-theme="earthy"] [data-color="blue"] { --paper: #adbdbb; --ink-note: #1f3332; --accent: #6e8784; }
[data-theme="earthy"] [data-color="grey"] { --paper: #d3c8ba; --ink-note: #3d352c; --accent: #a39686; }
[data-theme="earthy"] .note.is-archived { --paper: #cfc6bb; --ink-note: #4a4239; }
[data-theme="earthy"] .note-head:not([data-color]) { --accent: var(--earth-mustard); }
[data-theme="earthy"] .note-tag.is-overdue { background: rgb(120 30 20 / .16); color: #6e1a10; }