/* ============================================================================
secsip-tokens.css — the secsip_ design-system token layer (UI refresh · Phase 2)
OPT-IN + PAGE-SCOPED. A page only gets the secsip look if it BOTH
(a) s this file, AND
(b) carries class="secsip" on its .
Existing "coffee" pages that do neither are byte-for-byte unaffected — which
is the whole migration strategy: introduce the layer, convert pages one at a
time, never a big-bang flip.
Why the scope sits on (not an inner wrapper): the hi_ widget appends
its modal to document.body, so the brand class must be an ANCESTOR of 's
children for the modal to inherit these tokens. class="secsip" on does
that; a nested
would leave the modal unstyled.
Two jobs:
1. Define the secsip palette / type / shape tokens — the --b-* set.
2. Bridge the hi_ widget's legacy "coffee" token names onto secsip values so
the widget reskins to signal-red automatically, with zero widget edits.
Fonts: each secsip page loads IBM Plex Sans + IBM Plex Mono in its
(the recipe lives in secsip-chrome.js's header comment).
============================================================================ */
/* Root canvas. This file is only ever linked by secsip pages, so colouring
here is safe and stops an overscroll / rubber-band flash of the wrong
colour behind the page. .theme-dark is set (pre-paint) only on secsip pages. */
html { background: #F4F3F0; transition: background 200ms ease; }
html.theme-dark { background: #131312; }
.secsip {
color-scheme: light;
/* — type — IBM Plex (locked); no serif display face (the shipped brief dropped them) — */
--ff-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
--ff-display: var(--ff-sans);
/* — shape — */
--r-pill: 999px;
--r-lg: 16px;
--r-md: 10px;
--r-sm: 6px;
/* — motion — */
--ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-pour: cubic-bezier(0.22, 1, 0.36, 1);
--dur-micro: 120ms;
--dur-short: 160ms;
--dur-base: 240ms;
/* — palette · LIGHT — theme "T4d", a neutral stone editorial ground — */
--b-bg: #F4F3F0; /* page */
--b-panel: #FAF9F7; /* raised surface — cards, pills */
--b-ink: #1B1A17; /* primary text */
--b-ink-soft: #33312C; /* secondary text */
--b-muted: #7C796F; /* meta / labels */
--b-nav: #4A4842; /* nav resting ink */
--b-rule: rgba(27, 26, 23, 0.12); /* hairline */
--b-rule-soft: rgba(27, 26, 23, 0.08); /* fainter hairline */
--b-accent: #CD3F2C; /* signal-red (locked accent) */
--b-high: #BC5229; /* hotter accent — hovers, warnings */
--b-ok: #5E7D55; /* sage — healthy / success */
--b-ok-ink: #4C6845; /* sage text */
/* — elevation — */
--shadow-sm: 0 2px 10px rgba(27, 26, 23, 0.10);
--shadow-lg: 0 18px 40px rgba(27, 26, 23, 0.16), 0 6px 12px rgba(27, 26, 23, 0.07);
--glow-copper: 0 0 0 3px color-mix(in srgb, var(--b-accent) 18%, transparent);
/* ---- hi_ widget token bridge (legacy "coffee" name → secsip value) --------
hi-widget.css predates secsip and references these names. Aliasing them to
--b-* here makes the widget inherit the secsip palette and reskin to
signal-red. These are var() indirections, so they follow the dark-mode
overrides below automatically — no need to re-declare them for dark. */
--accent-copper: var(--b-accent);
--accent-copper-ink: var(--b-accent);
--bg-crema: var(--b-bg);
--bg-paper: var(--b-panel);
--surface: var(--b-panel);
--surface-2: color-mix(in srgb, var(--b-ink) 4%, var(--b-panel));
--border: var(--b-rule);
--border-strong: color-mix(in srgb, var(--b-ink) 22%, transparent);
--c-breach: var(--b-accent);
--c-framework: var(--b-ink-soft); /* changelog "fix" tag → neutral ink, not coffee blue */
--ink-espresso: var(--b-ink);
--ink-oak: var(--b-ink-soft);
--ink-mid: var(--b-ink-soft);
--muted-dust: var(--b-muted);
--muted-soft: color-mix(in srgb, var(--b-muted) 55%, transparent);
background: var(--b-bg);
color: var(--b-ink);
font-family: var(--ff-sans);
font-size: 15px;
line-height: 1.55;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.secsip * { box-sizing: border-box; }
/* — palette · DARK — night ground; lifts accent + sage to hold contrast — */
html.theme-dark .secsip {
color-scheme: dark;
--b-bg: #131312;
--b-panel: #1B1B19;
--b-ink: #EDECE7;
--b-ink-soft: #C6C4BC;
--b-muted: #8E8C83;
--b-nav: #A9A79E;
--b-rule: rgba(237, 236, 231, 0.13);
--b-rule-soft: rgba(237, 236, 231, 0.06);
--b-accent: #E3654A;
--b-high: #DD8049;
--b-ok: #6FA85F;
--b-ok-ink: #A6CF98;
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.40);
}