/* ============================================================
ece-base.css — the design system's light theme for the portal's
framework-free course demos. HAND-WRITTEN (unlike ece-tokens.css /
ece-tokens.js beside it, which tools/demo-theme.mjs generates).
Load order in a demo's :
(the demo's own)
and before the demo's scripts:
(Chart.js demos)
Rules of this file:
- It reads ONLY --ece-* variables. No color literal lives here: a token
change reaches every demo through `pnpm gen:demo-theme`.
- LOW specificity: a primitive is named by ONE class (or an :is() list of
single classes, which still weighs one class); a part or a state adds
only what a demo's own rule for the same thing must also name
(`.status-pill .status-dot`, `.mode-btn.active`, `.toggle-switch
input:checked + .track`, a :hover). So every selector here weighs no
more than the demo's equivalent, and the demo's style.css, loaded
later, wins the tie: a demo maps its existing classes onto this look one
rule at a time without renaming anything. NOT :where() (zero): every
demo opens with `*, *::before, *::after { margin: 0; padding: 0 }`, and
a zero-specificity rule loses to that reset, which flattened the
header's padding in the first pilot. Never put a compound selector
inside an :is() list either; :is() takes its HEAVIEST argument's weight.
- Each primitive answers to a canonical `ece-` class AND to the house class
names the demos already share for the same thing (`.chart-card`,
`.reset-btn`, `.toggle-switch`, `.mode-btn`, …), so a demo that keeps its
markup inherits the look as soon as it deletes its own dark rules.
Canonical markup: .ece-card (+ .ece-card-header), .ece-btn /
.ece-btn-primary, .ece-switch > input + .track, .ece-segmented >
.ece-segment, .ece-tabs > .ece-tab, .ece-metric (.metric-label +
.metric-val), .ece-metric-pill, .ece-banner + .ece-banner-ok / -warn /
-alert. A selected segment or tab is `.active` or aria-pressed /
aria-selected="true".
- No glows, no gradients, no text-transform on anything that can carry
course notation (text-transform is paint-only: "pf" would paint as "PF"
while the DOM still reads "pf").
============================================================ */
/* ── Geist, vendored (latin subset, the weights the design system loads) ── */
@font-face {
font-family: "Geist";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../_vendor/geist-5.2.9/geist-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../_vendor/geist-5.2.9/geist-latin-500-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../_vendor/geist-5.2.9/geist-latin-600-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../_vendor/geist-5.2.9/geist-latin-700-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Glyphs outside that range (θ, φ, Ω, √, …) fall through to the next family
in --ece-font-sans, exactly as they do in the React apps. */
/* ── Page ── */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--ece-bg);
color: var(--ece-ink);
font-family: var(--ece-font-sans);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:is(button, input, select, textarea) { font-family: inherit; }
:is(code, kbd, samp, pre) { font-family: var(--ece-font-mono); }
::selection { background: var(--ece-brand-lt); color: var(--ece-ink); }
/* Focus: a 2px brand OUTLINE (>= 4.5:1 on paper and bg). Deliberately not
the design system's box-shadow halo: that halo is ~1.3:1 on bg-2
(docs/ONBOARDING.md § @ece/design-system), and a ring carried in
box-shadow is erased by any rule that sets box-shadow (a selected segment's
lift, a demo's own shadow). The two places this file moves it are the
switch, whose input is invisible (see TOGGLE SWITCH), and the range
slider, whose ring sits on the thumb (see RANGE SLIDERS). */
:focus-visible {
outline: 2px solid var(--ece-brand);
outline-offset: 2px;
}
/* ── Scrollbars (light, thin) ── */
* { scrollbar-color: var(--ece-rule) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--ece-rule);
border-radius: 99px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ece-ink-4); }
/* ════════════════════════════════════════════
SHARED DEMO HEADER — the markup seven demos already share: