/* =========================================================================
ui.css — the ONE house style for every app on this site.
(Promoted from "column 21 / Candidate" in design-styles.html.)
How this works — and how to reskin everything at once:
• Section 1 is the palette: ~16 semantic tokens, light by default with a
dark-scheme override. EVERY app pulls colour/background from these — no
app should hard-code greys or define its own --ink/--muted/etc.
• Section 2+ are the component classes (.ui-btn, .ui-pill, .ui-seg,
.ui-sld, .ui-menu, .ui-pop, .ui-input). App markup uses these directly.
• To change the whole site's look later, edit THIS file only — every app
that links it updates together. To trial an alternate house style, swap
this file for a different one with the same token names + class names.
Aesthetic: border-led, no background fills on plain controls. Only
toggles (.ui-pill) and mutually-exclusive groups (.ui-seg) wear the light
"pill" fill. No shadows. Squircle corners. Every state is drawn with
border/colour, never colour-only-on-fill.
========================================================================= */
/* ===== 1. PALETTE — the single source of truth ===== */
:root{
color-scheme: light dark; /* native controls (selects, scrollbars) follow the OS theme */
--bg:#f0f0f0; --surface:#e6e6e6; --surface-2:#dadada;
--text:#1a1a1a; --text-2:#555555; --text-dim:#6b6b6b;
--border:#8a8a8a; --border-strong:#1a1a1a;
--divider:rgba(0,0,0,.14); --fill:rgba(0,0,0,.05);
--accent:#2b66c9; --accent-bg:rgba(43,102,201,.09); --on-accent:#ffffff;
--danger:#c0392b; --on-danger:#ffffff; --danger-bg:rgba(192,57,43,.10);
--pill-on:#e9ebf1; /* toggled-on pill bg (desaturated) */
--accent-text:#1a4a83; --danger-text:#a93221; /* readable text for blue/red controls */
}
@media (prefers-color-scheme: dark){ :root{
--bg:#222222; --surface:#2a2a2a; --surface-2:#333333;
--text:#d2d2d2; --text-2:#9a9a9a; --text-dim:#838383;
--border:#6c6c6c; --border-strong:#c8c8c8;
--divider:rgba(255,255,255,.14); --fill:rgba(255,255,255,.06);
--accent:#6ea0e6; --accent-bg:rgba(110,160,230,.13); --on-accent:#1a1a1a;
--danger:#e06c5a; --on-danger:#1a1a1a; --danger-bg:rgba(224,108,90,.15);
--pill-on:#3a4350;
--accent-text:#8fbdf2; --danger-text:#ea9181;
} }
/* Manual theme override: an app with a theme setting can force a scheme
regardless of the OS preference by putting class="theme-dark" or
"theme-light" on (e.g. rhythm-trainer). These re-declare the palette
on , overriding the :root defaults for the whole subtree. */
body.theme-dark{
color-scheme: dark;
--bg:#222222; --surface:#2a2a2a; --surface-2:#333333;
--text:#d2d2d2; --text-2:#9a9a9a; --text-dim:#838383;
--border:#6c6c6c; --border-strong:#c8c8c8;
--divider:rgba(255,255,255,.14); --fill:rgba(255,255,255,.06);
--accent:#6ea0e6; --accent-bg:rgba(110,160,230,.13); --on-accent:#1a1a1a;
--danger:#e06c5a; --on-danger:#1a1a1a; --danger-bg:rgba(224,108,90,.15);
--pill-on:#3a4350; --accent-text:#8fbdf2; --danger-text:#ea9181;
}
@media (prefers-color-scheme: dark){ body.theme-light{
color-scheme: light;
--bg:#f0f0f0; --surface:#e6e6e6; --surface-2:#dadada;
--text:#1a1a1a; --text-2:#555555; --text-dim:#6b6b6b;
--border:#8a8a8a; --border-strong:#1a1a1a;
--divider:rgba(0,0,0,.14); --fill:rgba(0,0,0,.05);
--accent:#2b66c9; --accent-bg:rgba(43,102,201,.09); --on-accent:#ffffff;
--danger:#c0392b; --on-danger:#ffffff; --danger-bg:rgba(192,57,43,.10);
--pill-on:#e9ebf1; --accent-text:#1a4a83; --danger-text:#a93221;
} }
/* Optional page base — opt in by putting class="ui-page" on .
(Apps that already style can instead just use the tokens.) */
.ui-page{ background:var(--bg); color:var(--text); }
/* ===== 2. BUTTON — border-led, no fill ===== */
.ui-btn{
font:inherit; font-size:12px; cursor:pointer;
color:var(--text); background:transparent;
border:1px solid var(--border); border-radius:7px; corner-shape:squircle;
padding:5px 11px; min-height:30px;
display:inline-flex; align-items:center; gap:6px;
transition:border-color .12s, color .12s, transform .09s;
}
.ui-btn:hover, .ui-btn.is-hover{ border-color:var(--border-strong); }
.ui-btn:focus-visible, .ui-btn.is-focus{ outline:2px solid var(--accent); outline-offset:2px; }
.ui-btn:active, .ui-btn.is-active{ transform:translateY(1px); }
.ui-btn:disabled, .ui-btn[disabled]{ color:var(--text-dim); border-color:var(--divider); cursor:not-allowed; }
.ui-btn.primary{ color:var(--accent-text); border-color:var(--accent); } /* affirm / OK / save */
.ui-btn.danger { color:var(--danger-text); border-color:var(--danger); } /* destructive / cancel */
/* ===== 3. TOGGLE — the light pill (on/off) ===== */
.ui-pill{
font:inherit; font-size:12px; cursor:pointer;
color:var(--text-dim); background:var(--fill);
border:1px solid transparent; border-radius:999px;
padding:5px 13px; min-height:30px;
display:inline-flex; align-items:center; gap:6px;
transition:background .12s, color .12s, border-color .12s;
}
.ui-pill:hover{ color:var(--text); }
.ui-pill.on, .ui-pill[aria-pressed="true"]{ background:var(--pill-on); border-color:var(--accent); color:var(--accent-text); }
/* ===== 4. SEGMENTED GROUP — mutually-exclusive, one pill track ===== */
.ui-seg{ display:inline-flex; background:var(--fill); border-radius:999px; }
.ui-seg button{
font:inherit; font-size:12px; cursor:pointer;
color:var(--text-dim); background:transparent;
border:1px solid transparent; border-radius:999px;
padding:5px 14px; min-height:30px;
transition:background .12s, color .12s, border-color .12s;
}
.ui-seg button:hover{ color:var(--text); }
.ui-seg button.sel, .ui-seg button[aria-checked="true"]{ background:var(--pill-on); border-color:var(--accent); color:var(--accent-text); }
/* ===== 5. SLIDER — flat bar; value hugs the fill edge, flips out when tight.
Markup: