/*
* theme.css - Shared colour-scheme tokens for every Balata single-page app.
*
* There are two schemes:
*
* - Dark (default): the bare :root block below. A touch lighter than the
* apps' original #17181B so it is easier on the eyes.
* - Light (opt-in) : :root[data-theme="light"]. A warm beige, never a
* white background.
*
* The scheme is chosen with the toggle button wired up by theme.js and is
* remembered in localStorage (key "balata-theme", shared by all apps on this
* origin). A tiny inline script in each app's applies the saved choice
* before first paint so there is no flash.
*
* Every app styles its components through these variables. The names match the
* ones the apps already used as literals, plus a few additions:
*
* --text-faint third text level (done items, disabled, placeholders)
* --link anchor colour (only a few apps use )
* --ok "success" green for the sync indicators
* --warn "working offline / changes pending" gold for the sync indicators
* --busy "sending / retrieving data" blue for the sync indicators
* --shadow drop-shadow colour, lighter in the light scheme
*
* For hover / pressed tints, prefer color-mix(in srgb, var(--text) N%, transparent)
* over a fixed rgba(): because --text flips between near-white and near-black,
* the same declaration gives a light overlay on dark and a dark overlay on light.
*
* Accent and danger are deliberately NOT the same tone in both schemes: on the
* beige light background the bright green (#16A085) and the muted rose-red
* (#D9707D) drop below a readable contrast when used as text/icons, so the light
* scheme uses a deeper green and a deeper red.
*/
:root
{
color-scheme: dark;
--bg: #1E1F23; /* page background */
--card: #25272B; /* raised surface: dialogs, page cards */
--card2: #2F3034; /* input fields, inner cards, chips */
--line: rgba(255, 255, 255, 0.10); /* every border and divider */
--text: #E7E7E9; /* primary text */
--text-dim: #93959F; /* secondary text, icon buttons at rest, field labels */
--text-faint: #6B6E77; /* done items, placeholders, disabled text */
--accent: #16A085; /* brand green: titles, primary buttons, active/selected */
--on-accent: #0D0F17; /* text / icon on an accent fill */
--danger: #D9707D; /* destructive actions, errors (muted rose-red) */
--link: #5B9DF9; /* colour (only a few apps use ) */
--ok: #7BA88F; /* sync dot: saved (green) */
--warn: #E0A21E; /* sync dot: offline / changes pending (gold) */
--busy: #2179CF; /* sync dot: a GET/PUT is in flight (blue) */
--shadow: rgba(0, 0, 0, 0.35); /* drop-shadow colour, lighter in the light scheme */
}
:root[data-theme="light"]
{
color-scheme: light;
--bg: #D8D0C0;
--card: #E0D9CB;
--card2: #F2ECDF;
--line: #735C2E;
--text: #242732;
--text-dim: #484C5B;
--text-faint: #5E6472;
--accent: #0A6151;
--on-accent: #F9F9FB;
--danger: #9C4150;
--link: #1A4F9E;
--ok: #2E6B4E;
--warn: #8A5A0B;
--busy: #1C5FA6;
--shadow: rgba(0, 0, 0, 0.14);
}
/* ---------------------------------------------------------------------------
* NON-COLOUR TOKENS - the type, radius, spacing, elevation and motion scale.
*
* These do NOT change between the light and dark schemes, so they sit in a
* plain :root. Every app (and apps/shared/app.css) styles through these names
* instead of pasting a literal, so "the corner radius of a dialog" or "the
* card shadow" has one definition, not nine.
*
* RULE: an app's