/** * modern.css — modern theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "modern" theme: vibrant glassmorphism. A neon-accented * contemporary look — bright neutral (light) / deep midnight slate (dark) * surfaces, an electric INDIGO primary (#4F46E5) with a FUCHSIA secondary * pop (#D946EF), Plus Jakarta Sans display sans. Highly rounded squircle * corners (12–24px), multi-layered soft blur shadows, ambient indigo glow, * and real glassmorphism in dark mode (translucent #1E293B surfaces + * `--surface-blur` backdrop-filter on `.tile`). 300ms standard-ease motion. * Modern-light is the app default; the DARK block is the midnight-glass hero. * * Fuchsia rides on brand-secondary + status (gradient/pop), NOT on a * white-text fill — text-on-brand (white) reads over the indigo brand-primary * and brand-accent (≥AA, verified via contrast.js). * * Activated by the runtime gate (dt-runtime), which sets `data-theme` and * `data-mode` on . See knowledge-base/style/. * * @version 2026-Jun-19 Vibrant glassmorphism (indigo/fuchsia, Plus Jakarta Sans) — was the greyscale pass * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="modern"] { --surface-page: #FAFAFC; --surface-card: #F1F5F9; --surface-raised: #FFFFFF; --surface-sunken: #E9EEF4; --surface-hover: #EEF2F7; --surface-selected: #E2E8F0; --surface-overlay: rgba(15, 23, 42, 0.45); --surface-brandmark: #FFFFFF; --surface-blur: none; --brand-primary: #4F46E5; --brand-secondary: #D946EF; --brand-accent: #4F46E5; --text-primary: #0F172A; --text-secondary: #475569; --text-on-brand: #FFFFFF; --text-on-status: #0F172A; --text-disabled: #6F84A0; --text-link: #4F46E5; --border-default: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --border-width: .1rem; --status-success: #10B981; --status-warning: #F59E0B; --status-danger: #EF4444; --status-partial: #D946EF; --status-info: #4F46E5; --focus-ring-color: #4F46E5; --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — highly rounded squircle corners (12–24px). */ --radius-input: 1.2rem; --radius-button: 1.2rem; --radius-card: 2rem; --radius-pill: 9999px; --radius-sheet: 2.4rem; /* Depth — multi-layered soft blur shadows + ambient indigo glow. */ --shadow-dark-source: rgba(15, 23, 42, 0.10); --elevation-raised: 0 2rem 2.5rem -0.5rem rgba(15, 23, 42, 0.10), 0 1rem 1rem -0.5rem rgba(15, 23, 42, 0.04); --elevation-overlay: 0 2.4rem 4.8rem -1.2rem rgba(15, 23, 42, 0.25); --elevation-inset: inset 0 .1rem .2rem rgba(15, 23, 42, 0.06); --elevation-glow: 0 0 2rem .1rem rgba(99, 102, 241, 0.35); /* Motion — 300ms standard cubic-bezier (matches the spec curve). */ --motion-base: 300ms; } :root[data-theme="modern"][data-mode="dark"] { --surface-page: #0B0F19; --surface-card: rgba(30, 41, 59, 0.60); --surface-raised: rgba(30, 41, 59, 0.75); --surface-sunken: rgba(15, 23, 42, 0.60); --surface-hover: rgba(99, 102, 241, 0.12); --surface-selected: rgba(99, 102, 241, 0.20); --surface-overlay: rgba(2, 4, 10, 0.70); --surface-brandmark: #FFFFFF; /* Glassmorphism — translucent surfaces blurred behind the content. */ --surface-blur: blur(12px); --brand-primary: #4F46E5; --brand-secondary: #D946EF; --brand-accent: #4F46E5; --text-primary: #F8FAFC; --text-secondary: #94A3B8; --text-on-brand: #FFFFFF; --text-disabled: #677C98; --text-link: #818CF8; --border-default: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.32); --border-width: .1rem; --status-success: #34D399; --status-warning: #FBBF24; --status-danger: #F87171; --status-partial: #E879F9; --status-info: #818CF8; --focus-ring-color: #4F46E5; --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — same squircle corners. */ --radius-input: 1.2rem; --radius-button: 1.2rem; --radius-card: 2rem; --radius-pill: 9999px; --radius-sheet: 2.4rem; /* Depth — deep multi-layer shadows + ambient indigo glow on the void. */ --shadow-dark-source: rgba(0, 0, 0, 0.50); --elevation-raised: 0 2rem 2.5rem -0.5rem rgba(0, 0, 0, 0.50), 0 1rem 1rem -0.5rem rgba(0, 0, 0, 0.30); --elevation-overlay: 0 2.4rem 4.8rem -1.2rem rgba(0, 0, 0, 0.65); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, 0.30); --elevation-glow: 0 0 2.4rem .1rem rgba(99, 102, 241, 0.50); --motion-base: 300ms; } /** * cyber.css — cyber theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "cyber" theme: synthwave neon. Deep indigo-navy void, * translucent cards, magenta + electric blue dual-neon over an indigo * mid-tone, glow elevation, Orbitron display. Dark is the real theme; * light is a muted daytime grid. Palette (user-supplied pixel-art ref): * #5c58b6 indigo · #b957ce magenta · #5994ce blue · #3a4e93 navy. * * `--elevation-glow` is a full box-shadow string authored to reference the * neon (magenta + blue) directly so it does NOT desaturate through the * neutral shadow casters. `--surface-clip` is the themeable clip-path that * frames the one remaining structural element (getPillBox's cyber neon * frame); flat elements ignore it. * * text-on-brand must read over BOTH brand-primary and brand-accent (one ink, * two fills): dark mode pairs the bright neon fills with dark ink; light mode * pairs deep fills with white ink — both ≥AA (verified via contrast.js). * * Activated by the runtime gate (dt-runtime): `data-theme="cyber"` * (+ `data-mode="dark"`) on . See knowledge-base/style/. * * @version 2026-Jun-19 Synthwave palette (was the cyan cyber-tron pass) * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="cyber"] { --surface-page: #EEEDF7; --surface-card: rgba(255, 255, 255, 0.75); --surface-raised: rgba(255, 255, 255, 0.85); --surface-sunken: rgba(92, 88, 182, 0.08); --surface-hover: rgba(92, 88, 182, 0.10); --surface-selected: rgba(185, 87, 206, 0.16); --surface-overlay: rgba(20, 18, 45, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #5C58B6; --brand-secondary: #3A4E93; --brand-accent: #9B3FB0; --text-primary: #1A1A3A; --text-secondary: #5C5A7E; /* White ink on the deep indigo/magenta fills — both ≥AA. */ --text-on-brand: #FFFFFF; --text-on-status: #1A1A3A; --text-disabled: #7975A0; --text-link: #5C58B6; --border-default: rgba(92, 88, 182, 0.30); --border-strong: rgba(92, 88, 182, 0.55); --border-width: .1rem; --status-success: #2BB39A; --status-warning: #C77F2E; --status-danger: #D63B63; --status-partial: #9B3FB0; --status-info: #3A4E93; --focus-ring-color: #5C58B6; --font-display: 'Orbitron', 'Courier New', sans-serif; --font-body: 'Orbitron', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Brand-keyed glow (does NOT consume the neutral shadow casters). */ --elevation-glow: 0 0 .8rem .1rem rgba(92, 88, 182, 0.40); /* Neon pill frame geometry (consumed by the one structural selector). */ --surface-clip: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem)); } :root[data-theme="cyber"][data-mode="dark"] { --surface-page: #0A0A1F; --surface-card: rgba(58, 78, 147, 0.22); --surface-raised: rgba(92, 88, 182, 0.30); --surface-sunken: rgba(185, 87, 206, 0.07); --surface-hover: rgba(185, 87, 206, 0.12); --surface-selected: rgba(185, 87, 206, 0.20); --surface-overlay: rgba(5, 5, 18, 0.72); --surface-brandmark: #FFFFFF; --brand-primary: #B957CE; --brand-secondary: #5C58B6; --brand-accent: #5994CE; --text-primary: #E6E3F7; --text-secondary: #9B95C5; /* Dark ink on the bright magenta/blue neon fills — both ≥AA. */ --text-on-brand: #0B0A1E; --text-disabled: #7D77A5; --text-link: #7FB0E8; --border-default: rgba(123, 116, 200, 0.30); --border-strong: rgba(143, 120, 220, 0.55); --border-width: .1rem; --status-success: #4FD3B0; --status-warning: #E0A24E; --status-danger: #FF5C8A; --status-partial: #B957CE; --status-info: #5994CE; --focus-ring-color: #B957CE; --font-display: 'Orbitron', 'Courier New', sans-serif; --font-body: 'Orbitron', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --elevation-glow: 0 0 1rem .1rem rgba(185, 87, 206, 0.55), inset 0 0 1rem rgba(89, 148, 206, 0.20); --surface-clip: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem)); } /* --------------------------------------------------------------------------- * Cyber structural frame — ported from the de-baked baseElements * `.pillBox-CYBER_THEME` / `.tile-CYBER_THEME` blocks (getPillBox/getTile no * longer emit a per-theme class). The geometry (angular clip-path + the * ::before fill layer + the ::after neon stroke) is theme STRUCTURE and lives * here under the `data-theme="cyber"` gate, not in shared baseElements.css. * Colours stay customizable role tokens (--surface-card / --brand-accent / * --surface-blur, themselves set to the cyber palette in this file), so * per-entity customization still flows through. Overrides the flat * `--surface-clip` clip on `.pillBox` with the elaborate two-layer frame. * ------------------------------------------------------------------------- */ :root[data-theme="cyber"] .pillBox { position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%); } :root[data-theme="cyber"] .pillBox>* { position: relative; } :root[data-theme="cyber"] .pillBox::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%); background: var(--surface-card); backdrop-filter: var(--surface-blur); z-index: 0; } :root[data-theme="cyber"] .pillBox::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--brand-accent); clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%, 0 0, 2px 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 26px, calc(100% - 26px) 2px, 2px 2px); } :root[data-theme="cyber"] .tile { position: relative; } :root[data-theme="cyber"] .tile::after { content: ''; position: absolute; background-color: currentColor; clip-path: polygon(1px 1px, 0% 0%, 0% 100%, 100% 100%, 100% 20px, calc(100% - 20px) 0%, 0% 0%, 1px 1px, calc(100% - 21px) 1px, calc(100% - 1px) 21px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px)); height: 100%; width: 100%; opacity: .4; transition: inherit; } /** * futuristic.css — futuristic theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "futuristic" theme: the live-demo dark cyan-neon look * (near-black void #0A0A14, electric cyan #54EAFD brand, Audiowide display * over a system body/mono stack, crisp radius, cyan-tinted glow). Per the * user's roster decision this follows the DEMO, NOT the typeui doc's * light-corporate spec — and is DISTINCT from cyber: cyber is cyan-on-navy * glass with Orbitron + a clip-path frame; futuristic is cyan-on-black flat * with Audiowide + crisp small radii and no clip frame. * * `--elevation-glow` is a brand-keyed cyan glow string (references the cyan * directly so the neon stays saturated). Crisp `--radius-*` overrides give * the sharp futuristic edges. * * Activated by the runtime gate (dt-runtime): `data-theme="futuristic"` * (+ `data-mode="dark"`) on . Values re-derived from * styleBoard/palettes.js (`futuristic` preset). See knowledge-base/style/. * * @version 2026-Jun-19 Initial deep-theming version * @version 2026-July-29 Radius overrides snapped to the catalog's 0.1rem step grid * (.25rem → .3rem, light + dark) so the customize panel's * slider can return to the theme's own default. * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="futuristic"] { --surface-page: #EEF2F6; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #E3EAF0; --surface-hover: rgba(16, 158, 178, 0.08); --surface-selected: rgba(16, 158, 178, 0.14); --surface-overlay: rgba(8, 12, 24, 0.50); --surface-brandmark: #FFFFFF; --brand-primary: #0FA9BD; --brand-secondary: #1C7FB8; --brand-accent: #0FA9BD; --text-primary: #111827; --text-secondary: #5B6472; /* Dark ink on the light cyan brand fill — white was 2.83:1 (AA-fail/invisible). */ --text-on-brand: #04121A; --text-on-status: #111827; --text-disabled: #737F92; --text-link: #0FA9BD; --border-default: rgba(15, 169, 189, 0.24); --border-strong: rgba(15, 169, 189, 0.50); --border-width: .1rem; --status-success: #00C853; --status-warning: #E0A800; --status-danger: #E5003C; --status-partial: #2BB8A0; --status-info: #1C7FB8; /* Deepened from #0FA9BD (2.51:1 on the light page — failed WCAG 1.4.11/2.4.11 3:1 for non-text UI) to meet the contrast gate; 3.89:1 on --surface-page. */ --focus-ring-color: #0C8595; --font-display: 'Audiowide', 'Orbitron', system-ui, sans-serif; --font-body: system-ui, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Courier New', monospace; /* Crisp futuristic edges. */ --radius-input: .3rem; --radius-button: .3rem; --radius-card: .4rem; --elevation-glow: 0 0 1rem .1rem rgba(15, 169, 189, 0.30); } :root[data-theme="futuristic"][data-mode="dark"] { --surface-page: #0A0A14; --surface-card: #12121F; --surface-raised: #16162A; --surface-sunken: #08080F; --surface-hover: rgba(84, 234, 253, 0.08); --surface-selected: rgba(84, 234, 253, 0.16); --surface-overlay: rgba(2, 2, 8, 0.72); --surface-brandmark: #FFFFFF; --brand-primary: #54EAFD; --brand-secondary: #3AB4FF; --brand-accent: #54EAFD; --text-primary: #F0F0F8; --text-secondary: #999AAB; --text-on-brand: #04121A; --text-disabled: #777C96; --text-link: #54EAFD; --border-default: rgba(84, 234, 253, 0.22); --border-strong: rgba(84, 234, 253, 0.50); --border-width: .1rem; --status-success: #00E676; --status-warning: #FFD600; --status-danger: #FF003C; --status-partial: #5FE3C7; --status-info: #3AB4FF; --focus-ring-color: #54EAFD; --font-display: 'Audiowide', 'Orbitron', system-ui, sans-serif; --font-body: system-ui, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Courier New', monospace; --radius-input: .3rem; --radius-button: .3rem; --radius-card: .4rem; --elevation-glow: 0 1.4rem 2rem -.4rem rgba(84, 234, 253, 0.18), 0 0 1rem rgba(84, 234, 253, 0.25); } /** * neumorphism.css — neumorphism theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * @version 2026-Jun-19 Initial deep-theming version * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * * The production "neumorphism" theme: soft extruded UI. Cards are the SAME * color as the page — depth comes entirely from dual light/dark caster * shadows, not fill or border. Teal accent, Space Mono display / Quicksand * body, `--border-width:0`. Raised idle / inset pressed, both expressed * purely as `--elevation-*` box-shadow VALUE tokens built from the two * caster colors (`--shadow-light-source` / `--shadow-dark-source`), so * light↔dark is a two-color flip and the whole scale follows — zero * per-component CSS. * * ACCESSIBILITY COMPROMISES (the theme IS the compromise, deliberate, not a * toggle). Same-material surfaces fail non-color contrast heuristics, so: * 1. `--border-default` keeps a faint HAIRLINE (not transparent) so * interactive boundaries are perceivable under prefers-contrast/forced * colors and for low-vision users — even though the aesthetic is * "borderless". `--border-width` stays 0 (the hairline shows only where * a 1px boundary is explicitly applied / under contrast media queries). * 2. Primary buttons get a REAL brand fill (`--brand-primary`), not a flat * same-material surface, so the primary action is unambiguous. * 3. The focus-visible ring is NEVER suppressed — it is shadow-independent * (real outline) so keyboard focus survives the soft-shadow look. * The `prefers-contrast: more` / `forced-colors` fallback below makes the * hairline a solid 1px boundary. * * Activated by the runtime gate (dt-runtime): `data-theme="neumorphism"` * (+ `data-mode="dark"`) on . Values re-derived from * styleBoard/palettes.js (`neumorph` preset). See knowledge-base/style/. * * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="neumorphism"] { /* Single-material surface — page, card, raised, sunken all share one color. */ --surface-page: #E6EBEA; --surface-card: #E6EBEA; --surface-raised: #E6EBEA; --surface-sunken: #E6EBEA; --surface-hover: #DDE3E1; --surface-selected: #D4DBD9; --surface-overlay: rgba(45, 58, 56, 0.40); --surface-brandmark: #FFFFFF; --brand-primary: #006666; --brand-secondary: #5FC2B6; --brand-accent: #2F8A80; --text-primary: #2D3A38; --text-secondary: #56605E; --text-on-brand: #FFFFFF; --text-on-status: #0F0F12; --text-disabled: #6C7C78; --text-link: #006666; /* A11y compromise 1: faint hairline (NOT transparent) for perceivable boundaries; width stays 0 for the borderless aesthetic. */ --border-default: rgba(45, 58, 56, 0.10); --border-strong: rgba(45, 58, 56, 0.18); --border-width: 0; --status-success: #2F8A80; --status-warning: #D98E4E; --status-danger: #E06A6A; --status-partial: #D98AA0; --status-info: #3FB6A8; --focus-ring-color: #006666; --font-display: 'Space Mono', 'Quicksand', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Dual-caster shadow sources — the whole raised/inset scale is built from these two colors; flip them for dark mode. */ --shadow-light-source: #ffffff; --shadow-dark-source: #c4ccca; --elevation-raised: 0.6rem 0.6rem 1.2rem var(--shadow-dark-source), -0.6rem -0.6rem 1.2rem var(--shadow-light-source); --elevation-overlay: 0.9rem 0.9rem 1.8rem var(--shadow-dark-source), -0.9rem -0.9rem 1.8rem var(--shadow-light-source); --elevation-inset: inset 0.3rem 0.3rem 0.6rem var(--shadow-dark-source), inset -0.3rem -0.3rem 0.6rem var(--shadow-light-source); --elevation-button: var(--elevation-raised); } :root[data-theme="neumorphism"][data-mode="dark"] { --surface-page: #2A2F2E; --surface-card: #2A2F2E; --surface-raised: #2A2F2E; --surface-sunken: #2A2F2E; --surface-hover: #313736; --surface-selected: #383F3D; --surface-overlay: rgba(0, 0, 0, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #3FB6A8; --brand-secondary: #6FE0D2; --brand-accent: #3FB6A8; --text-primary: #DCE4E2; --text-secondary: #A1ACA9; --text-on-brand: #0E1413; --text-on-status: #2D3A38; --text-disabled: #7D8D8A; --text-link: #3FB6A8; --border-default: rgba(220, 228, 226, 0.10); --border-strong: rgba(220, 228, 226, 0.16); --border-width: 0; --status-success: #3FB6A8; --status-warning: #D98E4E; --status-danger: #E06A6A; --status-partial: #D98AA0; --status-info: #3FB6A8; --focus-ring-color: #3FB6A8; --font-display: 'Space Mono', 'Quicksand', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Casters flip for dark — the raised/inset formulas are unchanged. */ --shadow-light-source: #343b3a; --shadow-dark-source: #202423; --elevation-raised: 0.6rem 0.6rem 1.2rem var(--shadow-dark-source), -0.6rem -0.6rem 1.2rem var(--shadow-light-source); --elevation-overlay: 0.9rem 0.9rem 1.8rem var(--shadow-dark-source), -0.9rem -0.9rem 1.8rem var(--shadow-light-source); --elevation-inset: inset 0.3rem 0.3rem 0.6rem var(--shadow-dark-source), inset -0.3rem -0.3rem 0.6rem var(--shadow-light-source); --elevation-button: var(--elevation-raised); } /* A11y compromise: under high-contrast / forced-colors, promote the faint hairline to a solid 1px boundary so interactive edges are unambiguous. */ @media (prefers-contrast: more) { :root[data-theme="neumorphism"], :root[data-theme="neumorphism"][data-mode="dark"] { --border-width: .1rem; --border-default: var(--border-strong); } } @media (forced-colors: active) { :root[data-theme="neumorphism"], :root[data-theme="neumorphism"][data-mode="dark"] { --border-width: .1rem; } } /** * retro.css — retro theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "retro" theme: nostalgic print. Warm off-white paper * surfaces, serif type (Fraunces display), thin ink hairlines, FLAT (almost * no shadow — hairline offsets only), one vintage red accent. Purely * token-expressible — no per-component CSS, no structural variant (unlike * cyber's clip frame). Activated by the runtime gate (dt-runtime): * `data-theme="retro"` (+ `data-mode="dark"`) on . Values from * styleBoard/palettes.js (`retro` preset). `:root[...]` specificity so the * theme block beats the `:root` modern floor at the same source order. * * @version 2026-Jun-19 Initial deep-theming version * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="retro"] { --surface-page: #F2F1EC; --surface-card: #FBFAF6; --surface-raised: #FBFAF6; --surface-sunken: #E5E2D8; --surface-hover: #ECEAE2; --surface-selected: #E5E2D8; --surface-overlay: rgba(26, 26, 26, 0.45); --surface-brandmark: #FFFFFF; --brand-primary: #C0392B; --brand-secondary: #6E6A60; --brand-accent: #C0392B; --text-primary: #1A1A1A; --text-secondary: #67635A; --text-on-brand: #FBFAF6; --text-on-status: #FFFFFF; --text-disabled: #847E6F; --text-link: #C0392B; --border-default: rgba(26, 26, 26, 0.20); --border-strong: rgba(26, 26, 26, 0.40); --border-width: .1rem; --status-success: #5A7D3C; --status-warning: #B8862F; --status-danger: #C0392B; --status-partial: #C57A6A; --status-info: #6E6A60; --focus-ring-color: #C0392B; --font-display: 'Fraunces', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', monospace; /* Flat — hairline offset shadows only; buttons stay flat (no --elevation-button override). */ --elevation-raised: 0 0.1rem 0 rgba(26, 26, 26, 0.10); --elevation-overlay: 0 0.2rem 0 rgba(26, 26, 26, 0.16); --elevation-inset: inset 0 0.1rem 0.1rem rgba(26, 26, 26, 0.08); } :root[data-theme="retro"][data-mode="dark"] { --surface-page: #1E1C18; --surface-card: #26241F; --surface-raised: #26241F; --surface-sunken: #161410; --surface-hover: #2C2925; --surface-selected: #34302A; --surface-overlay: rgba(0, 0, 0, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #E2674F; --brand-secondary: #A8A294; --brand-accent: #E2674F; --text-primary: #F2F1EC; --text-secondary: #A8A294; --text-on-brand: #1E1C18; --text-on-status: #1A1A1A; --text-disabled: #807B6D; --text-link: #E2674F; --border-default: rgba(242, 241, 236, 0.18); --border-strong: rgba(242, 241, 236, 0.36); --border-width: .1rem; --status-success: #7FA856; --status-warning: #D9A24E; --status-danger: #E2674F; --status-partial: #D98A78; --status-info: #A8A294; --focus-ring-color: #E2674F; --font-display: 'Fraunces', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', monospace; --elevation-raised: 0 0.1rem 0 rgba(0, 0, 0, 0.30); --elevation-overlay: 0 0.2rem 0 rgba(0, 0, 0, 0.40); --elevation-inset: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.25); } /** * ember.css — ember theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "ember" theme: graduated from the cyber-ember candidate. * The cyber glass base — deep void, translucent cards, neon pill clip frame, * glow elevation, Space Mono — but a warm EMBER amber accent instead of pure * cyan (the CLU-vs-Tron contrast). Brand stays cyan; accent (buttons/sliders/ * pills/focus) goes ember. Dark is the real theme; light is a muted day grid. * * `--elevation-glow` references the ember amber directly so the neon does not * desaturate through the neutral casters. `--surface-clip` frames the one * structural element (getPillBox's neon frame); flat elements ignore it. * * text-on-brand reads over BOTH brand-primary (cyan) and brand-accent (amber): * dark mode pairs the bright fills with dark ink; light mode also uses dark ink * (white was 2.48:1 on the light cyan — AA-fail) — both ≥AA. * * Activated by the runtime gate (dt-runtime): `data-theme="ember"` * (+ `data-mode="dark"`) on . See knowledge-base/style/. * * @version 2026-Jun-19 Graduated from styleBoard cyber-ember candidate * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill; --focus-ring-color deepened from #E0853A (2.31:1 on this theme's page — the widened gate's one new focus finding) (#1840) */ :root[data-theme="ember"] { --surface-page: #EEEAE4; --surface-card: rgba(255, 255, 255, 0.70); --surface-raised: rgba(255, 255, 255, 0.78); --surface-sunken: rgba(224, 133, 58, 0.08); --surface-hover: rgba(224, 133, 58, 0.10); --surface-selected: rgba(224, 133, 58, 0.16); --surface-overlay: rgba(24, 16, 8, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #0FB5C9; --brand-secondary: #E0853A; --brand-accent: #E0853A; --text-primary: #241B14; --text-secondary: #6C5E4F; /* Dark ink — white was 2.48:1 on the light cyan / amber fills (AA-fail). */ --text-on-brand: #18120A; --text-on-status: #241B14; --text-disabled: #8B7866; --text-link: #0FB5C9; --border-default: rgba(224, 133, 58, 0.30); --border-strong: rgba(224, 133, 58, 0.55); --border-width: .1rem; --status-success: #2BB8A0; --status-warning: #E0853A; --status-danger: #E5466B; --status-partial: #2BB8A0; --status-info: #0FB5C9; --focus-ring-color: #C96C20; --font-display: 'Space Mono', 'Courier New', monospace; --font-body: 'Space Mono', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; /* Ember-keyed glow (does NOT consume the neutral shadow casters). */ --elevation-glow: 0 0 .8rem .1rem rgba(224, 133, 58, 0.45); /* Neon pill frame geometry (consumed by the one structural selector). */ --surface-clip: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem)); } :root[data-theme="ember"][data-mode="dark"] { --surface-page: #0A0810; --surface-card: rgba(30, 24, 40, 0.55); --surface-raised: rgba(40, 32, 52, 0.65); --surface-sunken: rgba(255, 157, 61, 0.06); --surface-hover: rgba(255, 157, 61, 0.12); --surface-selected: rgba(255, 157, 61, 0.18); --surface-overlay: rgba(4, 2, 8, 0.70); --surface-brandmark: #FFFFFF; --brand-primary: #25D8EC; --brand-secondary: #FF9D3D; --brand-accent: #FF9D3D; --text-primary: #F0E6DC; --text-secondary: #AA9481; --text-on-brand: #1A0F06; --text-disabled: #8B7662; --text-link: #25D8EC; --border-default: rgba(255, 157, 61, 0.30); --border-strong: rgba(255, 157, 61, 0.55); --border-width: .1rem; --status-success: #5FE3C7; --status-warning: #FFB347; --status-danger: #FF5C7A; --status-partial: #5FE3C7; --status-info: #25D8EC; --focus-ring-color: #FF9D3D; --font-display: 'Space Mono', 'Courier New', monospace; --font-body: 'Space Mono', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; --elevation-glow: 0 0 1rem .1rem rgba(255, 157, 61, 0.55), inset 0 0 1rem rgba(255, 157, 61, 0.25); --surface-clip: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem)); } /** * elegant.css — elegant theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "elegant" theme: old-money / quiet-luxury. A disciplined * three-colour palette — deep OLIVE green, CREAM, ESPRESSO brown — over a * classic high-contrast serif (Playfair Display) display with a Manrope sans * body. Cream surfaces, olive brand, espresso ink + accents, oxblood danger. * Tailored architectural corners + a restrained letterpress depth (warm * ink-tinted, low-spread — the hairline border separates, the shadow whispers). * The DARK block layers the espresso night palette (warm near-black, lifted * olive + caramel). Graduated from the original "modern" old-money pass. * * text-on-brand must read over BOTH brand-primary (olive) and brand-accent * (espresso): light pairs the deep fills with cream ink; dark pairs the lifted * fills with espresso ink — both ≥AA (verified via contrast.js). * * Activated by the runtime gate (dt-runtime), which sets `data-theme` and * `data-mode` on . See knowledge-base/style/. * * @version 2026-Jun-19 Initial deep-theming version (was the modern old-money pass) * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="elegant"] { --surface-page: #F2EDE1; --surface-card: #FAF6EC; --surface-raised: #FFFDF6; --surface-sunken: #E8E1D0; --surface-hover: #EDE7D8; --surface-selected: #E0D7C2; --surface-overlay: rgba(46, 33, 26, 0.45); --surface-brandmark: #FFFFFF; --brand-primary: #4F5526; --brand-secondary: #5C4433; --brand-accent: #5C4433; --text-primary: #2E211A; --text-secondary: #6B5848; /* Cream ink on the deep olive/espresso fills — both ≥AA. */ --text-on-brand: #F5EFE2; --text-on-status: #FFFFFF; --text-disabled: #857561; --text-link: #4F5526; --border-default: rgba(46, 33, 26, 0.16); --border-strong: rgba(46, 33, 26, 0.34); --border-width: .1rem; --status-success: #5A7D3C; --status-warning: #B8862F; --status-danger: #8C3A33; --status-partial: #A8763C; --status-info: #5E6B66; --focus-ring-color: #4F5526; /* Shapes — tailored, architectural corners (engraved-invitation, not bubbly). Tighter than the playful floor; pills become editorial chips, not lozenges. */ --radius-input: .3rem; --radius-button: .3rem; --radius-card: .6rem; --radius-pill: .4rem; --radius-sheet: .8rem; /* Depth — restrained letterpress lift: warm espresso-tinted, low spread. The hairline border does the separating; the shadow only whispers. */ --shadow-dark-source: rgba(46, 33, 26, 0.10); --elevation-raised: 0 .1rem .3rem rgba(46, 33, 26, 0.08); --elevation-overlay: 0 1.2rem 2.4rem rgba(46, 33, 26, 0.16); --elevation-inset: inset 0 .1rem .2rem rgba(46, 33, 26, 0.06); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Fixed utility greys made themeable (slider/progress tracks). */ } :root[data-theme="elegant"][data-mode="dark"] { --surface-page: #1F1611; --surface-card: #2A201A; --surface-raised: #322620; --surface-sunken: #160F0B; --surface-hover: #352A22; --surface-selected: #3E3128; --surface-overlay: rgba(0, 0, 0, 0.60); --surface-brandmark: #FFFFFF; --brand-primary: #A8B05E; --brand-secondary: #C2A06A; --brand-accent: #C2A06A; --text-primary: #EDE6D6; --text-secondary: #B0A48E; /* Espresso ink on the lifted olive/caramel fills — both ≥AA. */ --text-on-brand: #1F1611; --text-on-status: #2E211A; --text-disabled: #8C7C69; --text-link: #B8BE70; --border-default: rgba(237, 230, 214, 0.10); --border-strong: rgba(237, 230, 214, 0.20); --border-width: .1rem; --status-success: #7FB05A; --status-warning: #D9A24E; --status-danger: #D97A6A; --status-partial: #C49A5A; --status-info: #8FA39C; --focus-ring-color: #A8B05E; /* Shapes — same tailored corners as light. */ --radius-input: .3rem; --radius-button: .3rem; --radius-card: .6rem; --radius-pill: .4rem; --radius-sheet: .8rem; /* Depth — soft, deep ambient on warm-black; still low-key. */ --shadow-dark-source: rgba(0, 0, 0, 0.45); --elevation-raised: 0 .2rem .6rem rgba(0, 0, 0, 0.45); --elevation-overlay: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.55); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, 0.30); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; } /** * minimalist.css — minimalist theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "minimalist" theme: editorial Swiss minimalism on a Tailwind * neutral scale. White / soft-gray surfaces, deep-charcoal ink, a SINGLE blue * accent (#2563EB) reserved for links + primary actions, Inter geometric sans * throughout. Architectural sharp corners (≤4px), 1px hairline borders, and — * critically — NO shadows: depth comes entirely from colour blocking + space * (every elevation token resolves to `none`; the border carries structure). * The DARK block keeps the discipline on a neutral near-black scale. * * Distinct from "modern" (pure greyscale, charcoal/inverted brand): minimalist * keeps the same restraint but introduces the one blue hue. * * text-on-brand is white over the blue brand fill (≥AA). Activated by the * runtime gate (dt-runtime): `data-theme="minimalist"` on . * * @version 2026-Jun-19 Initial deep-theming version (user spec) * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="minimalist"] { --surface-page: #FFFFFF; --surface-card: #F3F4F6; --surface-raised: #FFFFFF; --surface-sunken: #ECEDF0; --surface-hover: #ECEDF0; --surface-selected: #E3E5EA; --surface-overlay: rgba(17, 24, 39, 0.40); --surface-brandmark: #FFFFFF; --brand-primary: #2563EB; --brand-secondary: #4B5563; --brand-accent: #2563EB; --text-primary: #111827; --text-secondary: #4B5563; --text-on-brand: #FFFFFF; --text-on-status: #111827; --text-disabled: #788192; --text-link: #2563EB; --border-default: #E5E7EB; --border-strong: #D1D5DB; --border-width: .1rem; --status-success: #059669; --status-warning: #D97706; --status-danger: #DC2626; --status-partial: #DB2777; --status-info: #2563EB; --focus-ring-color: #2563EB; --font-display: 'Inter', system-ui, 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, 'Helvetica Neue', sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — architectural: sharp, max 4px softening. */ --radius-input: .4rem; --radius-button: .4rem; --radius-card: .4rem; --radius-pill: .4rem; --radius-sheet: .4rem; /* Depth — NONE. Colour blocking + the 1px border carry every boundary. */ --shadow-light-source: transparent; --shadow-dark-source: transparent; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: none; --elevation-overlay: none; --elevation-glow: none; } :root[data-theme="minimalist"][data-mode="dark"] { --surface-page: #0B0C0E; --surface-card: #15171A; --surface-raised: #15171A; --surface-sunken: #0F1113; --surface-hover: #1B1E22; --surface-selected: #23262B; --surface-overlay: rgba(0, 0, 0, 0.60); --surface-brandmark: #FFFFFF; --brand-primary: #2563EB; --brand-secondary: #9CA3AF; --brand-accent: #2563EB; --text-primary: #F3F4F6; --text-secondary: #9CA3AF; --text-on-brand: #FFFFFF; --text-disabled: #657285; --text-link: #60A5FA; --border-default: rgba(243, 244, 246, 0.12); --border-strong: rgba(243, 244, 246, 0.22); --border-width: .1rem; --status-success: #10B981; --status-warning: #F59E0B; --status-danger: #EF4444; --status-partial: #EC4899; --status-info: #60A5FA; --focus-ring-color: #2563EB; --font-display: 'Inter', system-ui, 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, 'Helvetica Neue', sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — same architectural corners as light. */ --radius-input: .4rem; --radius-button: .4rem; --radius-card: .4rem; --radius-pill: .4rem; --radius-sheet: .4rem; /* Depth — NONE (same discipline). */ --shadow-light-source: transparent; --shadow-dark-source: transparent; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: none; --elevation-overlay: none; --elevation-glow: none; } /** * perspective.css — perspective theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "perspective" theme: visionOS frosted glass. Translucent * white (light) / slate (dark) panels floating over a neutral backdrop, with * heavy `--surface-blur` backdrop-filter, soft real depth shadows, and large * rounded (classic, NOT clip-path) corners. One calm blue brand. Manrope sans. * Graduated from the styleBoard perspective candidate. * * The frost is the look: surfaces are translucent + blurred (`--surface-blur` * on `.tile`), the hairline border defines the panel edge, and the depth comes * from soft elevation shadows — not opacity alone. * * text-on-brand reads over brand-primary == brand-accent (the one blue): white * on the deep blue (light) / dark ink on the lifted blue (dark) — both ≥AA. * * Activated by the runtime gate (dt-runtime): `data-theme="perspective"` * (+ `data-mode="dark"`) on . See knowledge-base/style/. * * @version 2026-Jun-19 Graduated from styleBoard perspective candidate * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="perspective"] { --surface-page: #D9DDE3; --surface-card: rgba(255, 255, 255, 0.55); --surface-raised: rgba(255, 255, 255, 0.62); --surface-sunken: rgba(255, 255, 255, 0.30); --surface-hover: rgba(255, 255, 255, 0.35); --surface-selected: rgba(255, 255, 255, 0.55); --surface-overlay: rgba(20, 24, 35, 0.45); --surface-brandmark: #FFFFFF; /* Heavy frosted-glass blur — the visionOS signature. */ --surface-blur: blur(20px); --brand-primary: #2F62E6; --brand-secondary: #6E9BFF; --brand-accent: #2F62E6; --text-primary: #1B1D21; --text-secondary: #5C606B; --text-on-brand: #FFFFFF; --text-on-status: #1B1D21; --text-disabled: #757B88; --text-link: #2F62E6; --border-default: rgba(255, 255, 255, 0.45); --border-strong: rgba(255, 255, 255, 0.70); --border-width: .1rem; --status-success: #3FB36A; --status-warning: #E0A24E; --status-danger: #E5484D; --status-partial: #E07AA0; --status-info: #2F62E6; --focus-ring-color: #2F62E6; --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — large rounded (classic) surfaces, no clip-path frame. */ --radius-input: 1.2rem; --radius-button: 1.4rem; --radius-card: 2rem; --radius-pill: 9999px; --radius-sheet: 2.4rem; /* Depth — soft real shadows under the floating panels. */ --elevation-raised: 0 .8rem 3rem rgba(20, 24, 35, 0.18); --elevation-overlay: 0 1.4rem 4rem rgba(20, 24, 35, 0.26); } :root[data-theme="perspective"][data-mode="dark"] { --surface-page: #1C1E24; --surface-card: rgba(40, 44, 54, 0.55); --surface-raised: rgba(48, 52, 64, 0.62); --surface-sunken: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.08); --surface-selected: rgba(255, 255, 255, 0.14); --surface-overlay: rgba(0, 0, 0, 0.55); --surface-brandmark: #FFFFFF; --surface-blur: blur(20px); --brand-primary: #6E9BFF; --brand-secondary: #A9C2FF; --brand-accent: #6E9BFF; --text-primary: #F0F2F6; --text-secondary: #AFB3BD; --text-on-brand: #0E1014; --text-disabled: #8D929E; --text-link: #6E9BFF; --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24); --border-width: .1rem; --status-success: #4FBE7A; --status-warning: #E0A24E; --status-danger: #FF6B6F; --status-partial: #E07AA0; --status-info: #6E9BFF; --focus-ring-color: #6E9BFF; --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* Shapes — same rounded surfaces. */ --radius-input: 1.2rem; --radius-button: 1.4rem; --radius-card: 2rem; --radius-pill: 9999px; --radius-sheet: 2.4rem; /* Depth — soft real shadows on the dark backdrop. */ --elevation-raised: 0 .8rem 3rem rgba(0, 0, 0, 0.45); --elevation-overlay: 0 1.4rem 4rem rgba(0, 0, 0, 0.55); } /** * power.css — power theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The "power" theme: warm-luxury, dark-first. Deep desaturated-indigo canvas, * a single warm-orange accent (#E8633A) carrying actions/links/highlights, * raised cards with rounded corners and soft shadow depth, and full-monospace * type (IBM Plex Mono, bundled locally; Space Mono fallback). Status hues stay * distinct (success/warning/danger). * * DELIBERATE DEVIATION from the canonical typeui "power" brief * (https://www.typeui.sh/design-skills/power), which specifies a MONOCHROME * editorial system — pure-black canvas, white ink, color-as-exception, sharp * corners, no shadow, Oswald. Product chose the warm-luxury direction shown in * the reference dashboard (indigo + orange, rounded, soft depth, mono) over the * literal monochrome brief; this theme intentionally renders that instead. The * monochrome brief is preserved in git history (initial deep-theming version). * * Dark is the real theme (defaultMode dark); light is a warm-luxury sibling — * cream canvas, white cards, a deeper orange (#B8460F) so white-on-brand stays * legible. text-on-brand is the ink over the orange fill (near-black on the * dark-mode orange, white on the deeper light-mode orange). * * Activated by the runtime gate: `data-theme="power"` (+ `data-mode="dark"`) on * . Role tokens only — no value-named tokens (see knowledge-base/style/). * * @version 2026-Jun-28 Initial deep-theming version (typeui power brief; monochrome) * @version 2026-Jun-28 Override to warm-luxury (indigo + orange, rounded, soft * depth, full-mono) per product reference dashboard. * @version 2026-July-29 Dark --radius-card snapped to the catalog's 0.1rem step * grid (1.25rem → 1.2rem), which also removes an unintended * light/dark asymmetry against the 1.2rem light value. * @version 2026-August-10 --surface-brandmark minted for the payments panel card-brand plate — identical in every theme and mode by design * @version 2026-August-14 --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status minted for ink on the success fill (#1840) */ :root[data-theme="power"] { /* Warm-luxury LIGHT: cream canvas, white cards, deeper-orange accent. */ --surface-page: #F7F3EC; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EDE7DC; --surface-hover: #F1EADF; --surface-selected: #E7DECF; --surface-overlay: rgba(40, 28, 16, 0.34); --surface-brandmark: #FFFFFF; --brand-primary: #C2410C; --brand-secondary: #6E665C; --brand-accent: #DA5A0A; --text-primary: #221E1A; --text-secondary: #686057; /* White ink over the deeper light-mode orange fill — AA. */ --text-on-brand: #FFFFFF; --text-on-status: #FFFFFF; --text-disabled: #867B6F; --text-link: #C2410C; --border-default: #E6DCCE; --border-strong: #D2C6B4; --border-width: .1rem; --status-success: #15803D; --status-warning: #B45309; --status-danger: #DC2626; --status-partial: #8A8276; --status-info: #B8460F; --focus-ring-color: #B8460F; --font-display: 'IBM Plex Mono', 'Space Mono', 'Courier New', monospace; --font-body: 'IBM Plex Mono', 'Space Mono', 'Courier New', monospace; --font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace; /* Shapes — generous, luxurious rounding; full-pill badges. */ --radius-input: .8rem; --radius-button: .8rem; --radius-card: 1.2rem; --radius-pill: 9999px; --radius-sheet: 1.6rem; /* Depth — soft, warm elevation. */ --shadow-light-source: rgba(255, 255, 255, 0.90); --shadow-dark-source: rgba(60, 40, 20, 0.18); --elevation-flat: none; --elevation-button: 0 .1rem .3rem rgba(60, 40, 20, 0.12); --elevation-raised: 0 .4rem 1.6rem rgba(60, 40, 20, 0.14); --elevation-inset: inset 0 .1rem .3rem rgba(60, 40, 20, 0.10); --elevation-overlay: 0 1.6rem 4rem rgba(40, 28, 16, 0.22); --elevation-glow: 0 0 1.6rem rgba(184, 70, 15, 0.22); } :root[data-theme="power"][data-mode="dark"] { /* Warm-luxury DARK — the canonical typeui power skill. Values transcribed from the live computed :root (indigo #262642 surfaces + #ff7a2e orange). */ --surface-page: #1E1E36; --surface-card: #262642; --surface-raised: #323256; --surface-sunken: #1A1A30; --surface-hover: #2A2A48; --surface-selected: #323256; --surface-overlay: rgba(38, 38, 66, 0.92); --surface-brandmark: #FFFFFF; --brand-primary: #FF7A2E; --brand-secondary: #9496A8; --brand-accent: #FF7A2E; --text-primary: #F9F6F0; --text-secondary: #9D9EAF; /* Dark-brown ink over the orange brand fill (typeui brand-medium family). */ --text-on-brand: #2B1400; --text-on-status: #221E1A; --text-disabled: #7E7E9E; --text-link: #FF7A2E; /* typeui borders are white-alpha hairlines. */ --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --border-width: .1rem; --status-success: #34D399; --status-warning: #FBBF24; --status-danger: #F87171; --status-partial: #9496A8; --status-info: #6366F1; --focus-ring-color: #FF7A2E; --font-display: 'IBM Plex Mono', 'Space Mono', 'Courier New', monospace; --font-body: 'IBM Plex Mono', 'Space Mono', 'Courier New', monospace; --font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace; --radius-input: .8rem; --radius-button: .8rem; --radius-card: 1.2rem; --radius-pill: 9999px; --radius-sheet: 1.6rem; /* typeui shadow scale (pure-black alpha). */ --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.50); --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(0, 0, 0, 0.25); --elevation-raised: 0 .8rem 2.4rem rgba(0, 0, 0, 0.32); --elevation-inset: inset 0 .1rem .3rem rgba(0, 0, 0, 0.35); --elevation-overlay: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.40); --elevation-glow: 0 0 1.6rem rgba(255, 122, 46, 0.25); } /** * app.css * @author Francisco J. Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * @version 2026-July-03 Header backfilled (#605) * @version 2026-July-29 Token-layer pass: legacy radius/shadow/border aliases bridged * onto role tokens, ROOMY radius + density retune, new type / * density / motion roles, elevation relayer, body type floor. * @version 2026-July-29 Inter/Poppins repacked as subsetted woff2; font-display: swap on every face * @version 2026-August-04 Viewport layout units unified on dvh/dvw — the body/#root/app-shell chain disagreed (svh/vh/dvh) (#1822) * @version 2026-August-04 Shell boxes opt height/width OUT of the global transition: all — dvh resizes at runtime, so the toolbar would drive a 200ms height animation (#1822) * @version 2026-August-10 --surface-brandmark minted: the card-network mark plate, the one role token that deliberately does not track the theme * @version 2026-August-14 font-size joins the global transition's exclusion list (the fluid root animated every inherited size on resize); seven unreferenced @keyframes and --_ease-spring deleted * @version 2026-August-14 Floor --text-secondary / --text-disabled retuned to clear the widened contrast gate; --text-on-status and --text-on-media minted; the commented-out --deadCenter mixin deleted * @version 2026-August-14 Dark-block comment tombstones removed; the elevation-inversion and --chart-inactive rationale now lives in knowledge-base/style/tokens.md (§ Elevation, § Data-viz) and gotchas/css.md#CSS-15 */ /* Theme overrides — must precede any other style declarations. CSS spec: @import is only honored when it appears before any rule blocks (after @charset / @layer only). Putting it lower in the file silently invalidates the import. See knowledge-base/style/architecture.md for the multi-theme pattern. */ /* Single cascade-layer order for the whole bundle. Declaration only — later, lower-priority layers win over earlier ones. Wrapping existing rules into these layers is a separate bundle-wide pass (out of scope here). See knowledge-base/style/architecture.md. */ @layer reset, tokens, base, theme, state, utilities; html { /* Fluid root size (desktop-preserving): 1rem = 8px at ≤320px viewport rising to 10px at ≥800px, so desktops render exactly as the old `font-size: 62.5%` did and only phone/small-tablet widths shrink. Percentages resolve against the browser-initial 16px: 50% = 8px, 62.5% = 10px, preferred = 41.667% (6.667px) + 0.4167vw. */ font-size: clamp(50%, 41.667% + 0.4167vw, 62.5%); /* -webkit-print-color-adjust: exact; */ } body { margin: 0; font-family: var(--font-body); color: var(--text-primary); /* Body type floor. `html` is a fluid `clamp(50%, …, 62.5%)` (10px at desktop), so without this every element that never sets its own `font-size` inherits the 10px root — which is why so many components hardcoded a size just to opt out of it. The SIZE floor is 1.4rem (not the roomier 1.6rem), deliberately halving the jump; the LEADING is the retuned 1.5 per the roomy posture. Those are two separate decisions — this comment used to read as if the 1.4 applied to both, which cost one integration round to disambiguate. Separately revertible: if the contact sheet shows clipping in fixed-height containers, revert these two lines FIRST. */ font-size: var(--font-size-body); line-height: var(--line-height-body); overflow: hidden; height: 100dvh; width: 100dvw; transition: all var(--transition-base), height 0s, width 0s; } [contenteditable] { user-select: text; -moz-user-select: text; -webkit-user-select: text; } * { background-color: transparent; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Animate everything by default, timed by the themeable --transition-base token. A scoped property list (background-color/color/border/box-shadow/ transform) was tried for paint perf, but it left opacity fades, layout, and position changes snapping — too jumpy. Elements with their own transition (e.g. the 3D depth cards) override this, so the broad default doesn't lag their per-frame updates. font-size is excluded (the sanctioned exclusion-list shape, not a property-list narrowing): the fluid `html` clamp moves the rem basis on every resize, so every element inheriting it would animate its computed size for the whole transition duration. */ transition: all var(--transition-base), font-size 0s; } /* Focus-visible ring system (replaces the global `*:focus{outline:none}` kill switch). Mouse/pointer focus keeps the prior no-ring behavior; keyboard / AT focus gets the themeable ring. outline (not box-shadow) is used: it doesn't trigger layout and isn't clipped by overflow:hidden ancestors. WCAG 2.4.11. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: inherit; } /* Honor user motion preference: neutralize transitions + animations app-wide. Covers the loading shimmer and the scoped transition above. WCAG 2.3.3. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } :root { /* ============================================================ There is ONE token vocabulary: the role tokens. The legacy `Capitalized_Snake` / `snake_case` aliases are retired, and `retiredTokens.test.js` fails the build on any reintroduction — necessary because a missing custom property fails SILENTLY: it is invalid at computed-value time, so the property falls back to inherited/initial and a colour just quietly goes transparent. DELIBERATELY KEPT below, and this is the COMPLETE list: the `--Badge_*` family (a real semantic layer — "retint badges without touching the base palette" — and read from `baseElements.js`, so its legacy-style naming is a separate consistency question, not debt), plus four literal-valued app tokens: `--app-Blue`, `--app-Gray-mid`, `--text-shadow-hover` and `--border-shorthand`. Every other legacy token was removed outright with its consumers rewritten; there is no deferred phase. Why the retirement was safe, and why it beat a lint rule: knowledge-base/style/tokens.md#legacy-aliases--retired ============================================================ */ /* Custom Colors */ --app-Blue: rgb(119, 167, 244); --app-Gray-mid: rgb(166, 166, 166); /* Badge colors — the palette `getBadge` draws from (see BADGE_BACKGROUNDS in baseElements.js). Each derives from a themeable role token via var(), so badges re-theme with the active theme / per-entity customization; override just these to retint badges without touching the base palette. That independent-retint seam is why this family SURVIVED the retirement above — it is a semantic layer, not an alias. */ --Badge_Neutral_Background: transparent; --Badge_Highlight_Background: var(--brand-accent); --Badge_Success_Background: var(--status-success); --Badge_Warning_Background: var(--status-warning); --Badge_Partial_Background: var(--status-partial); --Badge_Danger_Background: var(--status-danger); /* Text drawn on top of a filled badge vs. the outline-only neutral badge. */ --Badge_On_Fill_Font_Color: var(--text-on-brand); --Badge_Neutral_Font_Color: var(--text-primary); /* intentional literal: text-shadow has no --elevation-* role to bridge onto */ --text-shadow-hover: .15rem .15rem rgba(0, 0, 0, 0.075); /* Composite shorthand, not an alias — expanding it at its 36 call sites would be strictly worse than keeping it, so it was RENAMED into the role vocabulary (from `--default_border`) rather than retired. */ --border-shorthand: var(--border-width) solid var(--border-default); /* ============================================================ DEEP-THEMING TOKEN SYSTEM (Phase 1, deep-theming plan). Two tiers: `--_`-prefixed PRIMITIVES (fixed cascade floor, never themed) and bare-kebab semantic ROLE tokens (themeable; the CUSTOMIZABLE_STYLES candidate set). Role tokens alias into primitives. Added additively — modern-light defaults mirror today's values; legacy tokens above stay live until the rename codemod (plan step 1.6). Signal: bare role = themeable; `--_` = fixed. See knowledge-base/style/architecture.md (rewrite pending). ============================================================ */ /* --- PRIMITIVE FLOOR (--_, cascade-only) --- */ --_grey-50: #fafafc; --_grey-100: #f1efef; --_grey-200: #e6e6e6; --_grey-300: #d9d9de; --_grey-400: #a6a6a6; --_grey-500: #8c8c8c; --_grey-600: #646464; --_grey-700: #3f4a5f; --_radius-none: 0; --_radius-sm: .5rem; --_radius-md: 1rem; --_radius-lg: 1.6rem; /* xl retuned 2.5rem → 2rem to give --radius-sheet a 20px rung; the old 2.5rem is preserved as 2xl behind the new --radius-shell, so nothing is retired. Free: --_radius-* has zero consumers outside this block and no theme file re-declares a primitive. */ --_radius-xl: 2rem; --_radius-2xl: 2.5rem; --_radius-full: 9999px; --_space-0: 0; --_space-05: .2rem; --_space-1: .4rem; --_space-2: .8rem; --_space-3: 1.2rem; --_space-4: 1.6rem; --_space-5: 2.4rem; --_space-6: 3.2rem; --_space-7: 4.8rem; /* Type ladder 10/12/14/16/20/24/30/36px. 2xs is new (the .7–.85rem cluster's legibility floor); the top two rungs were pulled down so no gap above 12px exceeds 25% — that is what lets every codemod collapse honour the drift cap. */ --_text-2xs: 1rem; --_text-xs: 1.2rem; --_text-sm: 1.4rem; --_text-md: 1.6rem; --_text-lg: 2rem; --_text-xl: 2.4rem; --_text-2xl: 3rem; --_text-3xl: 3.6rem; /* Shadow casters. A layered shadow needs a tight contact layer plus a diffuse ambient one; the cool tint (slate rather than pure black) is what keeps a shadow from reading muddy over a tinted surface. */ --_shadow-contact: rgba(15, 23, 42, .06); --_shadow-ambient: rgba(15, 23, 42, .10); --_shadow-key: rgba(15, 23, 42, .16); --_ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --_ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* A true ease-out. --_ease-standard has an ease-IN front half and is wrong for entrances (see --ease-enter). */ --_ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* --- SEMANTIC ROLE TOKENS (themeable; modern-light defaults) --- */ /* surfaces */ --surface-page: rgb(250, 250, 250); --surface-card: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f1eff6; --surface-hover: #F0E8FA; --surface-selected: #EADCFB; --surface-overlay: rgba(0, 0, 0, .3); /* The plate a third-party card-network mark sits on. The ONE role token that deliberately does NOT track the theme: every theme declares it, and every theme declares it light, because Visa's mark is blue-on-white, Amex's is white-on-blue and Mastercard's circles assume a light ground — all three forbid recolouring, and --surface-raised is near-black on three themes and in every dark mode. Not in the StyleProperties catalog: a customer recolouring a Visa plate is a trademark problem, not a preference. See knowledge-base/style/tokens.md. */ --surface-brandmark: #FFFFFF; /* brand */ --brand-primary: #9D33F2; --brand-secondary: #7C3AED; --brand-accent: #EE4368; /* text */ --text-primary: #3f4a5f; --text-secondary: #606273; --text-on-brand: #ffffff; --text-on-status: #0F0F12; --text-disabled: #7E7E7E; --text-link: #9D33F2; /* Ink drawn over uncontrolled imagery (photos, video). Deliberately fixed white in every theme and both modes, like --surface-brandmark. See knowledge-base/style/tokens.md. */ --text-on-media: #FFFFFF; /* border */ --border-default: rgba(0, 0, 0, .1); --border-strong: rgba(0, 0, 0, .2); --border-width: .1rem; /* status */ --status-success: #85BB65; --status-warning: #F2A65A; --status-danger: #EE4368; --status-partial: #F19BB3; --status-info: #297aef; /* focus ring (a11y, themeable; width never < 2px per WCAG 2.4.11) */ --focus-ring-color: #297aef; --focus-ring-width: .2rem; --focus-ring-offset: .2rem; /* typography */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', 'inter', helvetica, sans-serif; --font-mono: ui-monospace, 'Courier New', monospace; /* One role per ladder rung, so no component ever needs to reach for a --_ primitive. Names are functional, never value-named. */ --font-size-label: var(--_text-2xs); --font-size-caption: var(--_text-xs); --font-size-body: var(--_text-sm); --font-size-lead: var(--_text-md); --font-size-subheading: var(--_text-lg); --font-size-heading: var(--_text-xl); --font-size-stat: var(--_text-2xl); --font-size-display: var(--_text-3xl); --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 600; --font-weight-display: 700; --line-height-tight: 1.2; --line-height-body: 1.5; --line-height-relaxed: 1.65; /* shape — radius roles. ROOMY posture: inputs/buttons 10px, cards 16px, sheets 20px, outermost shells 25px — the targets knowledge-base/style/ modern.md already documents, which the shipped 5px/10px undershot. --radius-dense is the mandatory dense-data-surface exception. */ --radius-dense: var(--_radius-sm); --radius-input: var(--_radius-md); --radius-button: var(--_radius-md); --radius-card: var(--_radius-lg); --radius-sheet: var(--_radius-xl); --radius-shell: var(--_radius-2xl); --radius-pill: var(--_radius-full); --radius-avatar: var(--_radius-full); /* 50% remains distinct from a pill: on a non-square box it preserves an ellipse rather than turning it into a stadium. */ --radius-circle: 50%; /* elevation — full box-shadow value strings + themeable casters */ --shadow-light-source: transparent; --shadow-dark-source: var(--_shadow-ambient); /* The dark-mode top highlight, exposed as a role so a theme can kill it rather than fight a hardcoded rgba(255,255,255,…). Floor is transparent. */ --border-highlight: transparent; /* Glassmorphism backdrop-filter — themes opt in (e.g. modern/cyber glass); floor is `none` so opaque themes pay no blur cost. Consumed by `.tile`. */ --surface-blur: none; /* Selection/focus paint is an alpha overlay, not --surface-selected: themes may make the latter opaque for selected rows. */ --state-selection-highlight: color-mix(in srgb, var(--brand-accent) 25%, transparent); /* Relayered: y-only offsets (an equal x/y offset is the dated "light from the upper-left" tell) and a tight contact layer under a diffuse ambient one. These are the FLOOR — 7 of 10 themes override raised/overlay in their own file, so never swap a call site by matching a literal against these strings; swap by role. */ --elevation-flat: none; --elevation-button: 0 .1rem .2rem var(--_shadow-contact); --elevation-raised: 0 .1rem .2rem var(--_shadow-contact), 0 .4rem 1.2rem -.2rem var(--shadow-dark-source); --elevation-inset: inset 0 .1rem .2rem var(--_shadow-contact); --elevation-overlay: 0 .2rem .4rem var(--_shadow-contact), 0 1.6rem 3.2rem -.8rem var(--_shadow-key); --elevation-glow: 0 0 1.6rem -.2rem var(--brand-accent); /* The one OMNIDIRECTIONAL rung — no y-offset, so it reads as a ring around the element rather than a drop beneath it. Exists because the legacy --box-shadow-hover-far it backs is applied to round / knob surfaces (the slider knob, the avatar in entityImageAndName, the notePad corner) where a directional drop looks wrong; its pre-bridge literal was likewise offsetless (`0 0 .8rem .1rem rgba(0,0,0,.3)`), so "far" always meant "spreads outward", never "farther away". Keeps the .1rem spread that made it read as a ring. Named for what it does (surrounds the box evenly) — NOT "halo", which means a ring of LIGHT and is already what --elevation-glow above is for; this one is a ring of shadow. Composed from the themeable --shadow-dark-source caster (5 themes retint it); the other themes fall through to the --_shadow-ambient floor. NOT in the StyleProperties catalog — same as --elevation-flat / --elevation-button; a theme wanting a different one overrides this role. */ --elevation-surround: 0 0 .4rem var(--_shadow-contact), 0 0 1.2rem .1rem var(--shadow-dark-source); --surface-clip: none; /* data-viz — chart gradient (themeable; floor reuses the legacy purple). The legacy --Chart_Gradient alias that used to front this was retired; chart consumers now read this role token directly. */ --chart-gradient: linear-gradient(135deg, #7C3AED 0%, #9D33F2 35%, #D946EF 70%, #EE4368 100%); /* data-viz CATEGORICAL — the ordered set a segmented/categorical chart draws from. Minted because TaskStatusBreakdown was pulling its three segments from three UNRELATED role families (brand / badge / a legacy literal), so no theme could restyle the chart coherently and one segment was theme-blind. Chart consumers now read this one namespace. `active` and `complete` deliberately alias the brand/status roles rather than holding their own hex: that preserves today's rendering exactly AND keeps a theme's accent change flowing through to the chart. `inactive` needs its own value — it is the one that must NOT track a text or brand role. Contrast-verified against BOTH card surfaces (WCAG 1.4.11 wants >= 3:1 for non-text graphical objects): inactive is 4.83:1 on #ffffff and 6.76:1 on the dark #1B1B20. The three are separated by HUE (magenta / green / slate), not by luminance — adjacent-slice luminance ratios are 1.1-2.1:1, so a chart that relies on lightness alone to separate series needs a legend or labels. */ --chart-active: var(--brand-accent); --chart-complete: var(--status-success); --chart-inactive: #6B7280; /* density / spacing roles — one role per job, ordered tight → roomy, so no component ever needs a --_space-* primitive. The *-inline pair exists because axis-asymmetric control padding cannot be expressed as one scalar (and a two-value shorthand would be mangled by the customize panel's single-number length probe). Canonical control composition: padding: var(--pad-input) var(--pad-input-inline); padding: var(--pad-button) var(--pad-button-inline); --pad-cell / --gap-tight / --pad-row / --pad-shell exist because real dense surfaces sit at 4–5px and real shells at 32px: a blanket 8px floor would have EXPANDED the permission matrix and task rows. */ --pad-cell: var(--_space-1); --pad-dense: var(--_space-2); --pad-row: var(--_space-3); --pad-input: var(--_space-3); --pad-input-inline: var(--_space-4); --pad-button: var(--_space-3); --pad-button-inline: var(--_space-5); --pad-card: var(--_space-4); --pad-sheet: var(--_space-5); --pad-page: var(--_space-5); --pad-shell: var(--_space-6); --gap-hairline: var(--_space-05); --gap-tight: var(--_space-1); --gap-dense: var(--_space-2); --gap-inline: var(--_space-2); --gap-stack: var(--_space-3); --gap-tile: var(--_space-4); --gap-section: var(--_space-5); --touch-target-primary: 44px; /* motion */ --motion-fast: 200ms; --motion-base: 350ms; --motion-slow: 500ms; /* The ~4px entrance translate, tokenized so it is tunable in one place rather than repeated at every entrance site. Pairs with --motion-base + --ease-enter. */ --motion-enter-distance: .4rem; --ease-standard: var(--_ease-standard); --ease-emphasized: var(--_ease-emphasized); /* Entrances only — never ease-in. */ --ease-enter: var(--_ease-decelerate); --transition-base: var(--motion-base) var(--ease-standard); /* scrollbar — themeable role tokens; consumed by the scrollbar block below. */ --scrollbar-thumb: var(--brand-accent); --scrollbar-thumb-hover: var(--brand-primary); --scrollbar-track: transparent; } /* Phone-band density step-down. 24px of page gutter per side costs ~12% of a 320px viewport (the fluid root makes 1rem = 8px there, so --pad-page is 19px a side), which is a lot of screen to spend on nothing. One step down the ladder, once, in the floor — every view that reads --pad-page inherits it. Gated on the `data-viewport` attribute and NEVER on a width media query, per ratified decision 0004 (knowledge-base/decisions/0004-viewport-band-axis.md). This is a DEFAULT, not a floor — per-entity customization erases it. `pad-page` is an editable knob (`customizableStyles.js`), and `setStyle` writes role tokens as an INLINE style on ``, which outranks every selector including this one. So an entity that customizes page padding keeps its chosen value at phone width too. That is the intended precedence (an explicit user choice beats a built-in default), but it does mean you cannot rely on this rule to bound the gutter on a customized entity — don't chase it as a cascade bug. */ :root[data-viewport="phone"] { --pad-page: var(--_space-4); } /* */ [data-slot] { display: contents; } /* Scrollbar styling — 0.6rem (6px) width across all browsers, matching Firefox's native `scrollbar-width: auto` on Linux (measured against FF 148, 2026-Jul-15). Chromium + WebKit sized via `::-webkit-scrollbar`; Firefox uses its native width and only needs `scrollbar-color` for theming (scoped Firefox-only below). The standard `scrollbar-width` / `scrollbar-color` properties are NOT set on Chromium because (a) Chrome 121+ ignores `::-webkit-scrollbar-*` on any element where a standard scrollbar prop is non-initial, and (b) `scrollbar-color` inherits, so setting it on html would silently disable the webkit pseudos app-wide. Themes / dark mode adapt via the :root role tokens. */ *::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--scrollbar-thumb) 42.5%, transparent); border-radius: 0.6rem; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: transparent; } /* Firefox theming — scoped via `@supports selector(::-moz-list-bullet)`, a Firefox-only pseudo, so Chromium never parses these declarations. */ @supports selector(::-moz-list-bullet) { html { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--scrollbar-thumb) 42.5%, transparent) var(--scrollbar-track); } } /* Cross-theme dark role-token overrides. */ :root[data-mode="dark"] { --surface-page: #0F0F12; --surface-card: #1B1B20; --surface-raised: #22222A; --surface-sunken: #141418; --surface-hover: #26262C; --surface-selected: #2E2E36; --surface-overlay: rgba(0, 0, 0, .5); --text-primary: #ffffff; --text-secondary: #9999A0; --text-on-brand: #ffffff; --text-disabled: #7A7A7A; --border-default: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); --border-highlight: rgba(255, 255, 255, .06); --focus-ring-color: #6E9BFF; --shadow-dark-source: rgba(0, 0, 0, .5); --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .2rem rgba(0, 0, 0, .45); --elevation-raised: inset 0 .1rem 0 var(--border-highlight), 0 .2rem .4rem rgba(0, 0, 0, .45), 0 .8rem 2.4rem -.4rem var(--shadow-dark-source); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, .45); --elevation-overlay: inset 0 .1rem 0 rgba(255, 255, 255, .08), 0 .4rem .8rem rgba(0, 0, 0, .5), 0 2.4rem 4.8rem -1.2rem rgba(0, 0, 0, .7); --elevation-glow: 0 0 2rem -.2rem var(--brand-accent); --elevation-surround: 0 0 .4rem rgba(0, 0, 0, .45), 0 0 1.6rem .1rem var(--shadow-dark-source); --chart-inactive: #9CA3AF; } #root { width: 100dvw; height: 100dvh; transition: all var(--transition-base), height 0s, width 0s; } @media print { * { break-after: auto; break-before: auto; break-inside: avoid; /* break-inside: page; */ /* break-before: page; break-inside: page; */ /* break-before: always; -webkit-region-break-inside: avoid; */ } } /* Custom fonts Two registration paths exist and both must be kept in step: (a) the static @font-face blocks below — faces every document needs regardless of theme (the pre-theme floor, plus Inter and IBM Plex Mono); (b) the per-theme FontFace manifest at utilities/themes/themes.js (`fonts.assets[]`), registered by `ensureThemeFontsLoaded` during `setStyle` — theme-identity faces, fetched only for the applied theme. Adding a face to only one of the two is the classic "theme declares a family it never loads" bug. See knowledge-base/style/typography.md. Every block declares `font-display: swap`: the CSS default (`auto`) gives a block period of up to 3s, i.e. invisible text on first paint. */ /* Decorative faces — NO live CSS consumer today (the commented-out alternate body-font lines that used to reference them went out with the legacy alias retirement; the only other mentions are email inline styles where @font-face never applies). @font-face is lazy, so they cost no runtime bytes; retained because a per-entity `Body Font` customization is free-text CSS and could in principle name one. */ @font-face { font-family: 'Coda-Regular'; src: url('./assets/fonts/Coda-Regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Coda-Heavy'; src: url('./assets/fonts/Coda-Heavy.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Atomic-Age'; src: url('./assets/fonts/atomicage-regular-webfont.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Acumin-Bold'; src: url('./assets/fonts/Acumin-BdPro.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Acumin'; src: url('./assets/fonts/Acumin-RPro.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Apex-Normal'; src: url('./assets/fonts/ACPEX-NORMAL.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Kusangi'; src: url('./assets/fonts/Kusanagi.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Oxta'; src: url('./assets/fonts/Oxta.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Squarix'; src: url('./assets/fonts/SQUARIX.ttf') format('truetype'); font-display: swap; } /* Inter (OFL) — variable weight axis 100-900, split latin / latin-ext by unicode-range so a boot that never renders an extended glyph downloads 48 KB instead of the whole family. Sourced from @fontsource-variable/inter 5.3.0 (upstream Inter v4.1). Verified by binary FeatureList probe: these subsets retain `tnum` (tabular figures); Google's subsetting drops Inter's `zero`/`cv01`, neither of which has a consumer here. `format('woff2')`, not fontsource's legacy `format('woff2-variations')` — the latter is only understood by browsers we no longer target. */ @font-face { font-family: 'Inter'; src: url('./assets/fonts/inter/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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: 'Inter'; src: url('./assets/fonts/inter/Inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; src: url('./assets/fonts/inter/Inter-latin-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; 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: 'Inter'; src: url('./assets/fonts/inter/Inter-latin-ext-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Poppins (OFL) — the pre-theme --font-body/--font-display floor: the face the brief pre-setStyle paint uses. All 10 themes override both tokens, so this is the only surface it still reaches. Sourced from @fontsource/poppins 5.3.0; the 1.29 MB of .ttf it replaces carried Devanagari shaping tables the Latin subsets correctly drop. Weights 400/500/600/700 only — no --font-weight-* token or CSS rule selects 800/900. */ @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; 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: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; src: url('./assets/fonts/Poppins-latin-ext-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Mono (OFL) — bundled locally for the power theme's full-mono type. Latin subset; weights 400/500/600/700. */ @font-face { font-family: 'IBM Plex Mono'; src: url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('./assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('./assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('./assets/fonts/IBMPlexMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Standard `transform` only. The prior form declared `-webkit-transform` alone (unprefixed since 2013/2016, so every step was ignored by spec-compliant parsing) and wrote `translateX(-10)` / `translateX(10)` — a unitless non-zero length is invalid CSS, so those four steps were silently dropped and the cue only jittered at 75%/92%. Restoring them makes the shake read at its authored amplitude. The two prefixed duplicate blocks that followed are deleted. */ @keyframes shake { 8%, 41% { transform: translateX(-1rem); } 25%, 58% { transform: translateX(1rem); } 75% { transform: translateX(-.5rem); } 92% { transform: translateX(.5rem); } 0%, 100% { transform: translateX(0); } } @keyframes wander { 0%, 10% { transform: translate(.1rem, .1rem); } 25% { transform: translate(.2rem, .2rem); } 50% { transform: translate(.3rem, .1rem); } 75% { transform: translate(.2rem, .0rem); } 100% { transform: translate(.1rem, .1rem); } } /** * depth.css — app-wide [data-depth="3d"] gate for the ambient WebGL layer + card depth * @author Francisco J. Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * Everything here is scoped under html[data-depth="3d"], written by * Application.setStyle from the per-device depth preference (isDepth3d()). * 2D sessions never match a single rule below — strictly additive. * * @version 2026-Jun-19 Initial Version (incorporation of the styleBoard 3D experiment) * @version 2026-August-14 Card depth resolves --elevation-raised/--elevation-overlay; the bespoke casters were light-only and vanished in dark mode (#1840) */ /* The Ambient3D canvas self-mounts to with an inline z-index:0. In the app we push it BEHIND the content (negative z) and make the app's opaque background transparent so the room shows through. Ambient3D sets scene.background = --surface-page, so the page colour is preserved as the backdrop — only now it's a lit 3D room rather than a flat fill. */ html[data-depth="3d"] .ambient3d__canvas { z-index: -1 !important; } /* Only reveal the room when it actually mounts (WebGL present + 3D picked). AmbientBackground adds the canvas; if WebGL is absent the canvas never appears, so keep the app background opaque to avoid a bare white page. */ html[data-depth="3d"] body:has(.ambient3d__canvas) .application__view { background: transparent; } /* Establish a shared 3D context so card lifts read with perspective. */ html[data-depth="3d"] .application__view { perspective: 1600px; } /* ── Card depth ──────────────────────────────────────────────────────────── Every card primitive (.pillBox) lifts off the page with a soft shadow when 3D is on, and floats higher on hover. Needs no GPU — this is the visible 2D↔3D difference on every screen. The cursor-tracking tilt + pinned-light directional shadow from the styleBoard sandbox are a follow-up (they need an app-root pointer driver + per-card hit-testing). */ html[data-depth="3d"] .pillBox { box-shadow: var(--elevation-raised); transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-enter); } html[data-depth="3d"] .pillBox:hover { transform: translateY(-.4rem); box-shadow: var(--elevation-overlay); } /* Opt-in extra-depth hook for non-pillBox containers. */ html[data-depth="3d"] .depthCard { box-shadow: var(--elevation-raised); transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-enter); } /** * baseElements.css * @author Francisco J. Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * @version 2019-09-24 Initial Version * @version 2026-July-03 .visuallyHidden utility + fieldset/legend UA reset (#731) * @version 2026-July-29 Spacing / radius / type literals collapsed onto the app.css * role-token ladder. Retained literals carry an inline `intentional literal` note. * @version 2026-July-29 .emptyState / .emptyState-withAction / .emptyState__icon / .emptyState__action styles for getEmptyState (#1764). * @version 2026-August-10 .toggle — the controlled two-state switch (track/knob, third pending state, phone touch floor) * @version 2026-August-14 Phone-band .form-label one rung up — the required-fields note read 8.29px at 390px * @version 2026-August-14 .tooltip / .tooltiptext deleted with getTooltip (zero callers) */ /* #region toggle — the controlled switch (getToggle) */ .toggle { display: inline-flex; align-items: center; position: relative; /* intentional literal: fixed control dimensions, not spacing rhythm */ width: 4.4rem; height: 2.4rem; padding: 0; border: 0; background: none; cursor: pointer; } .toggle[disabled] { cursor: default; } .toggle__track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--surface-sunken); } .toggle__knob { position: absolute; /* intentional literal: fixed control dimensions, not spacing rhythm */ width: 1.8rem; height: 1.8rem; left: .3rem; border-radius: var(--radius-circle); background: var(--surface-raised); box-shadow: var(--elevation-surround); } .toggle[data-toggle-state="on"] .toggle__track { background: var(--brand-accent); } .toggle[data-toggle-state="on"] .toggle__knob { transform: translateX(2rem); } .toggle[data-toggle-state="pending"] .toggle__track { background: var(--status-warning); } .toggle[data-toggle-state="pending"] .toggle__knob { transform: translateX(1rem); } .toggle[disabled] .toggle__track { background: var(--text-disabled); } .toggle-large { /* intentional literal: fixed control dimensions, not spacing rhythm */ width: 5.6rem; height: 3rem; } .toggle-large .toggle__knob { /* intentional literal: fixed control dimensions, not spacing rhythm */ width: 2.4rem; height: 2.4rem; } .toggle-large[data-toggle-state="on"] .toggle__knob { transform: translateX(2.6rem); } .toggle-large[data-toggle-state="pending"] .toggle__knob { transform: translateX(1.3rem); } :root[data-viewport="phone"] .toggle { min-height: var(--touch-target-primary); min-width: var(--touch-target-primary); } /* #endregion toggle */ .elementContainer { width: auto; height: auto; } /* Visually removed but still announced by assistive tech (the standard clip-pattern). For content whose VISUAL design already communicates what AT needs told explicitly: hidden legends, the app live region, etc. Never use display:none / visibility:hidden for that — those hide from AT too. */ .visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* intentional literal: fixed a11y clip-pattern hairline, not spacing rhythm */ overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* getFieldset/getLegend (#731): strip the UA fieldset chrome so semantic grouping is layout-free — a fieldset drops into any existing grid/flex without visual change. min-inline-size unsets the UA min-content quirk that otherwise blocks fieldsets from shrinking inside grids. */ .fieldset { border: none; padding: 0; margin: 0; min-inline-size: 0; } .legend { padding: 0; } .elementContainer-rounded { border-radius: var(--radius-card); } .elementContainer-imgBackground { background-size: cover; background-position: center; background-repeat: no-repeat; } .elementContainer-leftBorder { border-left: var(--border-width) solid var(--border-default); } .elementContainer-topBorder { border-top: var(--border-width) solid var(--border-default); } .elementContainer-bottomBorder { border-bottom: var(--border-width) solid var(--border-default); } .elementContainer-rightBorder { border-right: var(--border-width) solid var(--border-default); } .elementContainer-allBorder { border: var(--border-width) solid var(--border-default); } .tileContainer { padding: var(--pad-card); border-radius: var(--radius-card); background-color: var(--surface-card); border-color: var(--border-default); } .tileContainer-hover { cursor: pointer; } .tileContainer-hover:hover { box-shadow: var(--elevation-raised); transform: scale(1.01); } .button { width: fit-content; height: fit-content; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-button); cursor: pointer; font-family: var(--font-body); color: var(--text-primary); box-shadow: var(--elevation-button); padding: var(--pad-cell) var(--pad-button); gap: var(--gap-tight); } .button:disabled { color: var(--text-disabled); background-color: transparent; border-color: var(--border-default); box-shadow: var(--elevation-flat); pointer-events: none; } .button:active { box-shadow: var(--elevation-inset); text-shadow: none; } .button-lightBackground, .button-darkBackground { border: var(--border-width) solid var(--border-default); } .button-darkBackground, .button-lightBackground:hover, .button-lightBackground:focus-visible:not(.button-loading) { background-color: var(--brand-accent); color: var(--text-on-brand); border-color: var(--brand-accent); } .button-darkBackground:hover, .button-darkBackground:focus-visible:not(.button-loading) { background-color: transparent; color: var(--text-primary); border-color: var(--border-default); } .button-danger { border: var(--border-width) solid var(--status-danger); background-color: var(--status-danger); color: var(--text-on-brand); } .button-danger:hover, .button-danger:focus-visible:not(.button-loading) { background-color: transparent; color: var(--status-danger); } /* .button-darkBackground:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); opacity: 0; border-radius: var(--radius-button); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; } */ /* .button-darkBackground:hover:after { opacity: 1; } */ /* .button-darkBackground:hover { */ /* background-color: transparent; color: var(--text-secondary); box-shadow: var(--elevation-raised); -webkit-box-shadow: var(--elevation-raised); -moz-box-shadow: var(--elevation-raised); */ /* } */ .button-img { height: 2rem; width: 2rem; background-size: cover; background-repeat: no-repeat; background-position: center; padding: var(--pad-card); } .button-imgAndText { display: flex; gap: var(--gap-stack); justify-content: start; padding: var(--pad-dense) var(--pad-card); } .button-textOnly { font-size: var(--font-size-lead); padding-top: .3rem; /* intentional literal: optical baseline nudge, not spacing rhythm */ } .button-textOnly:enabled:hover { box-shadow: none; text-shadow: var(--text-shadow-hover); } .button-textOnly:disabled { border: none; } /* Sizes — ordered after `.button-textOnly` so size wins the equal-specificity font-size tie when both classes apply. */ .button-small { font-size: var(--font-size-label); } .button-medium { font-size: var(--font-size-body); } .button-large { font-size: var(--font-size-subheading); } :root[data-viewport="phone"] .button-lightBackground, :root[data-viewport="phone"] .button-darkBackground { min-height: var(--touch-target-primary); min-width: var(--touch-target-primary); } .roundedCornerInput, .dropdown { border: var(--border-width) solid var(--border-default); color: var(--text-primary); accent-color: var(--brand-primary); border-radius: var(--radius-input); font: inherit; font-family: var(--font-body); text-align: left; padding: var(--pad-input) var(--pad-input-inline); background: var(--surface-sunken); box-shadow: var(--elevation-inset); } .roundedCornerInput::placeholder, .dropdown::placeholder { color: var(--text-secondary); } .roundedCornerInput:disabled, .dropdown:disabled { color: var(--text-disabled); border-color: var(--border-default); } /* Native ` attribute so single-mode dropdowns are untouched. */ /* Reserve the ✓ column on every option so checking the first doesn't shift text right; transparent glyph holds the space, painted glyph appears on `-checked`. */ .dropdown__view:has(select[multiple]) .dropdown__option::before { content: '✓ '; color: transparent; font-weight: bold; } .dropdown__view:has(select[multiple]) .dropdown__option-checked::before { color: var(--brand-accent); } /* Keyboard cursor in multi mode is a faint highlight — the ✓ already conveys selection, and the full color flip used in single mode reads as "selected", which is misleading when both checked + cursor land on different tiles. */ .dropdown__view:has(select[multiple]) .dropdown__currentOption { background-color: var(--surface-hover); color: inherit; } .dropdown__expandedArea { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap-inline); padding: var(--pad-dense); box-sizing: border-box; } /* Search-enabled dropdowns: give expandedArea its own top padding so the searchbar's `margin-top` can't collapse through the parent and land flush against the panel's expand-area padding. */ .dropdown__expandedArea:has(> .dropdown__searchbar) { padding-top: var(--pad-row); } .dropdown__searchbar { margin: 0 var(--gap-stack); } :root[data-viewport="phone"] { .dropdown__view, .dropdown__option-placeholder, .dropdown__option { min-height: var(--touch-target-primary); } .dropdown__placeholderNode-shrunk, .dropdown__placeholderNodeProxy { font-size: var(--font-size-caption); } } /** * endlessDropdown.css * @author Louis Flores * @copyright Seedbury Square, LLC. All Rights Reserved. * * @version 2026-Jul-13 Initial Version * @version 2026-July-29 Design-system adoption — spacing/type/radius literals collapsed onto the role-token ladder */ .endlessDropdown__view { display: flex; align-items: center; box-sizing: border-box; min-height: 2.5rem; min-width: 12rem; width: fit-content; position: relative; cursor: pointer; border-radius: var(--radius-input); background: var(--surface-sunken); } .endlessDropdown__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border: var(--border-shorthand); border-radius: var(--radius-input); transition: clip-path .5s .2s; } .endlessDropdown__frame-open { transition: clip-path .5s 0s; } .endlessDropdown__placeholderNode { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; transition: top .5s 0s, left .5s 0s, font-size .5s 0s, translate .5s 0s, width .5s 0s; line-height: 1.1; max-width: calc(100% - 1.2rem); width: calc(100% - 3rem); text-align: start; color: var(--text-secondary); overflow: hidden; display: flex; align-items: baseline; pointer-events: none; } .endlessDropdown__placeholderText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .endlessDropdown__placeholderNode-shrunk { top: 0; left: 1.5rem; font-size: var(--font-size-label); width: calc(100% - 3.5rem); transition: top .5s .4s, left .5s .4s, font-size .5s .4s, translate .5s .4s, width .5s .4s; } .endlessDropdown__placeholderNodeProxy { opacity: 0; position: fixed; font-size: var(--font-size-label); } .endlessDropdown__required { color: var(--status-danger); margin-left: var(--gap-hairline); flex: none; } .endlessDropdown__placeholder { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: start; font-size: var(--font-size-body); } /* Hidden native