/* ═══════════════════════════════════════════════════════════════════════════
THEME-PIXELFLAME: the family register, in the --star-* vocabulary.
Pairs with starkit.css, which supplies geometry and no values. This file is the
only place a pixelflame hex, font or radius lives, which is what makes a second
theme a second file rather than a fork of the component CSS.
ZERO RADIUS LIVES HERE NOW (operator ruling 2026-07-26). It used to be
`*{border-radius:0!important}` in starkit.css, which made every other theme
impossible. Square corners are what pixelflame IS, not what starkit enforces.
FACES. Dark is the default: CANON L2 puts MC on the emission face and Serban on
the absorption face, so an MC surface on cream is off-canon. Both faces are real
and the toggle is always present. Selected by [data-theme] on (the name
starstyle and ledger-light use); [data-face] is honoured as the older alias.
═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-register="pixelflame"] {
/* ---- Type ------------------------------------------------------------- */
--star-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--star-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
--star-font-serif: "Source Serif 4", Georgia, serif;
/* ---- Surfaces: instrument black -----------------------------------------
Not #000. Pure black halates against light text on an OLED panel, and the 1px
lift kills it. These are the Panel's values verbatim (11-COLLECTIVE/panel/
app.css) so the control kit and the dashboard sit on one black. The previous
#171310 was a warm void that read brown under orange. */
--star-bg: #0B0B0C;
--star-surface: #131315;
--star-surface-2: #1A1A1D;
--star-surface-hover: #202024;
--star-surface-sunken: #080809;
/* ---- Ink ramp ---------------------------------------------------------- */
--star-ink-title: #F1EBDF; /* bond cream */
--star-ink-body: #DCD6CB;
--star-ink-muted: #8B8781;
--star-ink-soft: #6E6A65;
--star-ink-faint: #4A4845;
--star-ink-on-accent: #16110C;
/* ---- Accent: the one identity orange ----------------------------------- */
--star-accent: #FF6A1A;
--star-accent-hi: #F0A050; /* the lighter yellow-orange: diamond borders */
--star-accent-strong: #D93408;
--star-accent-text: #FF6A1A; /* on black the fill colour reads fine as text */
--star-accent-tint: #241209;
--star-accent-ring: rgba(255, 106, 26, 0.35);
/* ---- Status: never brand colours. They earn their place by appearing only
on state, which is why a green chip on this palette reads as information. -- */
--star-ok: #4EA672; --star-ok-soft: #10281B; --star-ok-text: #5FBF85;
--star-warn: #D9A441; --star-warn-soft: #2A2110; --star-warn-text: #E5B75F;
--star-err: #C9564B; --star-err-soft: #2A1412; --star-err-text: #DC6D62;
--star-info: #85B8C9; --star-info-soft: #12222A; --star-info-text: #9CCBDA;
--star-neutral: #8B8781; --star-neutral-soft: #1A1A1D; --star-neutral-text: #A5A19B;
/* ---- Borders ----------------------------------------------------------- */
--star-border: #26262A;
--star-border-strong: #34343A;
--star-border-selected: #FF6A1A;
--star-border-guide: #2E2E33;
/* ---- Radius: pixelflame is square, all the way down -------------------- */
--star-radius-panel: 0;
--star-radius-card: 0;
--star-radius-tile: 0;
--star-radius-control: 0;
--star-radius-badge: 0;
--star-radius-pill: 0;
--star-radius-mark: 0;
/* ---- Elevation: an instrument has edges, not drop shadows -------------- */
--star-shadow-0: 0 0 0 1px var(--star-border);
--star-shadow-1: 0 0 0 1px var(--star-border);
--star-shadow-2: 0 0 0 1px var(--star-border-strong);
--star-shadow-3: 0 0 0 1px var(--star-accent);
--star-shadow-focus: 0 0 0 3px var(--star-accent-ring);
/* ---- Rhythm + motion (GPU-safe: transform and opacity only) ------------ */
--star-pad-card: 16px;
--star-gap-group: 18px;
--star-gap-label: 7px;
--star-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--star-dur-fast: 120ms;
--star-dur: 180ms;
}
/* ---- Light face: bond cream, the absorption side of CANON L2 ---------------
--star-accent splits here because one orange cannot both fill a bar and be read
as 13px text on cream: the fill clears non-text contrast at 3.3:1, the text tier
needs 5.6:1 to clear AA. */
:root[data-theme="light"],
[data-face="light"] {
--star-bg: #F1EBDF;
--star-surface: #E7DFCD;
--star-surface-2: #DDD3BE;
--star-surface-hover: #E2D9C6;
--star-surface-sunken: #D6CBB4;
--star-ink-title: #191512;
--star-ink-body: #2E2823;
--star-ink-muted: #6F6557;
--star-ink-soft: #877C6C;
--star-ink-faint: #A79B88;
--star-ink-on-accent: #FFFFFF;
--star-accent-text: #A04C0C;
--star-accent-tint: #F7E4D2;
--star-ok: #24704A; --star-ok-soft: #DDEBE1; --star-ok-text: #1B5A3A;
--star-warn: #8A5A05; --star-warn-soft: #F2E7D2; --star-warn-text: #6E4804;
--star-err: #A5321F; --star-err-soft: #F3DED9; --star-err-text: #8A2818;
--star-info: #2E6E68; --star-info-soft: #DCE8E6; --star-info-text: #245650;
--star-neutral: #6F6557; --star-neutral-soft: #E2D9C6; --star-neutral-text: #574E43;
--star-border: #C6B9A2;
--star-border-strong: #B3A48A;
--star-border-guide: #CDC1AB;
}
/* ---- Sibling registers: same theme, different fire ------------------------
Each overrides only the hue tier, so a surface switches register with one
attribute and keeps every other decision. */
[data-register="starpunk"] {
--star-accent: #ED8531; --star-accent-hi: #F2A65E; --star-accent-strong: #C9541F;
--star-info: #2E6E68;
}
[data-register="mainstar"] {
--star-accent: #DD5A2A; --star-accent-hi: #F0A050; --star-accent-strong: #9A5330;
--star-info: #2E6E68;
}
[data-register="dragons"] {
--star-accent: oklch(0.64 0.26 34);
--star-accent-hi: oklch(0.72 0.17 56);
--star-accent-strong: oklch(0.54 0.25 28);
--star-info: oklch(0.6 0.13 242);
}