/* ============================================================ Fyld — Color "Cool system, molten action." Steel carries structure & data. Molten is reserved for the action and the live fill — one warm spark, never a background. Two grounds ship: the LIGHT product surface (default, :root) and the dark COMMAND ground (.fyld-command / [data-theme]). ============================================================ */ :root { /* ---- Base palette · brand ---- */ --steel: #4F6BFF; /* system / structure / data / confirmed */ --steel-deep: #3A52D6; /* hover / pressed */ --steel-soft: rgba(79, 107, 255, 0.15); --molten: #FF5A1F; /* action & fill only — the single spark */ --molten-deep: #D63A00; /* molten hover · white text */ --molten-soft: rgba(255, 90, 31, 0.14); --cool-ink: #14161B; /* wordmark, the "F", dark grounds, text */ --critical: #E5484D; /* at-risk only */ --critical-soft: rgba(229, 72, 77, 0.12); --positive: #1F9D63; /* confirmed gains, healthy deltas */ --positive-soft: rgba(31, 157, 99, 0.12); /* ---- Base palette · light neutrals ---- */ --white: #FFFFFF; --paper: #F7F8FA; /* app canvas behind cards */ --paper-2: #EDF0F4; /* inset wells, table zebra */ --line-l: #E3E6EE; /* hairlines (light) */ --line-l2: #D2D7E1; /* stronger dividers (light) */ --ink-1: #14161B; /* primary text (light) */ --slate-l: #5B6675; /* secondary text (light) */ --mist-l: #98A1AE; /* metadata · captions (light) */ /* ---- Base palette · dark / command neutrals ---- */ --bg: #0B0D11; --bg-2: #14171D; --bg-3: #1A1E26; --line-d: #262C36; --line-d2: #2E3540; --ink-d: #EAEDF2; /* primary text (dark) */ --slate-d: #99A3B2; /* secondary text (dark) */ --mist-d: #5E6675; /* metadata · captions (dark) */ /* ============================================================ Semantic aliases — LIGHT product surface (default) Reference these in components, never the raw palette. ============================================================ */ --surface-app: var(--paper); /* page / canvas */ --surface-card: var(--white); /* cards, panels, sheets */ --surface-inset: var(--paper-2); /* wells, tracks, zebra */ --surface-raised: var(--white); --text-strong: var(--ink-1); /* headings, key values */ --text-body: var(--ink-1); --text-secondary: var(--slate-l); --text-muted: var(--mist-l); --text-on-molten: var(--cool-ink); /* ink on the molten action */ --text-on-steel: var(--white); --text-inverse: var(--white); --border-subtle: var(--line-l); --border-strong: var(--line-l2); --border-focus: var(--steel); --action: var(--molten); /* the thing you click to fill */ --action-hover: var(--molten-deep); --action-text: var(--cool-ink); --fill: var(--molten); /* the live floor-fill */ --system: var(--steel); /* structure, links, confirmed */ --system-hover: var(--steel-deep); --grid-line: var(--line-l); /* engineered background grid */ } /* ============================================================ COMMAND ground — dark. Apply .fyld-command or [data-theme="command"] on any container (or ). "This is Command mode." Molten only on action + fill. ============================================================ */ .fyld-command, [data-theme="command"] { --surface-app: var(--bg); --surface-card: var(--bg-2); --surface-inset: #0E1116; --surface-raised: var(--bg-3); --text-strong: var(--ink-d); --text-body: var(--ink-d); --text-secondary: var(--slate-d); --text-muted: var(--mist-d); --text-on-molten: var(--cool-ink); --text-on-steel: var(--white); --text-inverse: var(--cool-ink); --border-subtle: var(--line-d); --border-strong: var(--line-d2); --border-focus: var(--steel); --action: var(--molten); --action-hover: var(--molten-deep); --action-text: var(--cool-ink); --fill: var(--molten); --system: var(--steel); --system-hover: var(--steel-deep); --grid-line: var(--line-d); }