/** * modern.css — modern theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "modern" theme, the app default: the category standard played * straight, with Linear and Notion as the craft bar. White panels on a * warm-neutral ground, hairline borders, one indigo accent, Inter at small * sizes with a true 500 medium and 600 headings tracked tight, hairline-plus-drop * card elevation under a long soft popover shadow, round-terminal 1.75px icons * with the accent on one element, no material in either mode. Dark is the same * system on near-black warm greys with the indigo lifted one step; every fill * keeps white ink except the status fills, which brighten and take dark ink so * their INK roles can equal them. Structural claims: the entity-image silhouette * (a rounded plate — the workspace-icon reading — unringed since #2438) and the * search field (a plain rounded hairline field); the tab bar is the base — its * ink underline is the library's own. Modern-light stays the app default; retune a * fill and re-check its ink pair (contrast.test.js gates both modes). Activated * by the runtime gate (data-theme/data-mode on ; knowledge-base/style/). * * @version 2026-Jun-19 Vibrant glassmorphism (indigo/fuchsia, Plus Jakarta Sans) — was the greyscale pass */ :root[data-theme="modern"] { --surface-page: #F6F6F4; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EFEFEC; --surface-hover: #F0F0EE; --surface-selected: #EEF0FB; --surface-overlay: rgba(15, 15, 15, 0.6); --surface-brandmark: #FFFFFF; --surface-blur: none; --brand-primary: #5760C9; --brand-secondary: #3E45A8; --brand-accent: #5760C9; --text-primary: #26272B; --text-secondary: #62666D; --text-on-brand: #FFFFFF; --text-on-status: #FFFFFF; --text-disabled: #7E8288; --text-link: #4A52BF; --text-brand: #5760C9; --text-accent: #5760C9; --text-success: #1A6E45; --text-warning: #855000; --text-danger: #B42D2D; --text-partial: #0B6478; --border-default: rgba(38, 39, 43, 0.10); --border-strong: rgba(38, 39, 43, 0.22); --border-width: .1rem; --status-success: #1F7A4D; --status-warning: #A05F00; --status-danger: #C93A3A; --status-partial: #0E7490; --status-info: #2F6FE0; --focus-ring-color: #5760C9; --chart-gradient: linear-gradient(135deg, #5760C9 0%, #7C84DD 50%, #B9BEEE 100%); --icon-accent: var(--brand-primary); --icon-fill: none; --icon-stroke-width: .175rem; --icon-cap: round; --icon-join: round; --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Menlo', monospace; --font-size-label: 1.2rem; --font-size-caption: 1.3rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.4rem; --font-size-stat: 3.2rem; --font-size-display: 4rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 600; --font-weight-display: 600; --line-height-tight: 1.2; --line-height-body: 1.5; --line-height-relaxed: 1.65; --letter-spacing-display: -.02em; --letter-spacing-body: normal; --radius-dense: .4rem; --radius-input: .6rem; --radius-button: .6rem; --radius-card: .8rem; --radius-sheet: 1rem; --radius-shell: 1.2rem; --radius-pill: 999rem; --radius-avatar: 999rem; --pad-cell: .6rem; --pad-dense: .8rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.2rem; --pad-button: .8rem; --pad-button-inline: 1.6rem; --pad-card: 1.6rem; --pad-sheet: 2rem; --pad-page: 1.6rem; --pad-shell: 2.4rem; --gap-hairline: .2rem; --gap-tight: .6rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.2rem; --gap-tile: 1.2rem; --gap-section: 1.4rem; --shadow-light-source: transparent; --shadow-dark-source: rgba(38, 39, 43, 0.08); --border-highlight: transparent; --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(38, 39, 43, 0.06); --elevation-raised: 0 0 0 .1rem rgba(38, 39, 43, 0.04), 0 .1rem .2rem rgba(38, 39, 43, 0.06); --elevation-inset: inset 0 .1rem .2rem rgba(38, 39, 43, 0.06); --elevation-overlay: 0 0 0 .1rem rgba(38, 39, 43, 0.06), 0 .8rem 2.4rem -.6rem rgba(38, 39, 43, 0.18); --elevation-glow: 0 .2rem 1.2rem -.2rem rgba(87, 96, 201, 0.35); --elevation-surround: 0 .1rem .2rem rgba(38, 39, 43, 0.06), 0 .4rem 1.2rem -.4rem var(--shadow-dark-source); --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 360ms; --motion-enter-distance: .4rem; --motion-enter-name: modernEnter; --sound-message-received: chime; --ease-standard: cubic-bezier(0.3, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --surface-page-backdrop: none; --surface-page-backdrop-size: cover; --surface-page-backdrop-repeat: no-repeat; --surface-card-texture: none; --chart-line-shape: smooth; --chart-area-opacity: .4; --chart-material: polished; --chart-line-weight: 1.4; --chart-glow-strength: 0; --chart-wash-opacity: 0.16; --chart-grid-opacity: 0.12; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: linear-gradient(145deg, color-mix(in srgb, var(--chart-series-1) 7%, transparent), transparent 65%); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35) 45%, transparent); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #257C83; --chart-series-3: #8660A5; --chart-series-4: #A76C35; --chart-series-5: #A95475; --chart-series-6: #647488; --stage-ground: #E6E3DC; --stage-plate-ink: #293632; --stage-prop: #626762; --stage-prop-lit: #343E3B; --landing-eyebrow-case: none; } :root[data-theme="modern"][data-mode="dark"] { --surface-page: #0F1011; --surface-card: #17181B; --surface-raised: #1D1E22; --surface-sunken: #0B0C0D; --surface-hover: #22242A; --surface-selected: #262A45; --surface-overlay: rgba(0, 0, 0, 0.7); --surface-brandmark: #FFFFFF; --surface-blur: none; --brand-primary: #5E67D6; --brand-secondary: #8B93F5; --brand-accent: #5E67D6; --text-primary: #F2F2F0; --text-secondary: #A2A5AC; --text-on-brand: #FFFFFF; --text-on-status: #0F1011; --text-disabled: #82868E; --text-link: #9AA2FF; --text-brand: #878DE0; --text-accent: #878DE0; --text-success: #4CC38A; --text-warning: #F2C24E; --text-danger: #F87171; --text-partial: #5AC8D8; --border-default: rgba(242, 242, 240, 0.10); --border-strong: rgba(242, 242, 240, 0.22); --border-width: .1rem; --status-success: #4CC38A; --status-warning: #F2C24E; --status-danger: #F87171; --status-partial: #5AC8D8; --status-info: #7C9CFF; --focus-ring-color: #8B93F5; --chart-gradient: linear-gradient(135deg, #5E67D6 0%, #8B93F5 50%, #C9CDFF 100%); --icon-accent: var(--brand-primary); --icon-fill: none; --icon-stroke-width: .175rem; --icon-cap: round; --icon-join: round; --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Menlo', monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.5); --border-highlight: rgba(255, 255, 255, 0.05); --elevation-flat: none; --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .2rem rgba(0, 0, 0, 0.4); --elevation-raised: inset 0 .1rem 0 var(--border-highlight), 0 0 0 .1rem rgba(0, 0, 0, 0.3), 0 .1rem .2rem rgba(0, 0, 0, 0.4); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, 0.5); --elevation-overlay: inset 0 .1rem 0 var(--border-highlight), 0 0 0 .1rem rgba(0, 0, 0, 0.5), 0 1.2rem 3.2rem -.8rem rgba(0, 0, 0, 0.7); --elevation-glow: 0 .2rem 1.6rem -.2rem rgba(139, 147, 245, 0.45); --elevation-surround: 0 .1rem .2rem rgba(0, 0, 0, 0.4), 0 .4rem 1.6rem -.4rem var(--shadow-dark-source); --surface-page-backdrop: none; --surface-page-backdrop-size: cover; --surface-page-backdrop-repeat: no-repeat; --surface-card-texture: none; --chart-series-2: #72BFC4; --chart-series-3: #B69DD9; --chart-series-4: #D6AA6E; --chart-series-5: #D593AE; --chart-series-6: #9EADBD; --stage-ground: #24272A; --stage-plate-ink: var(--text-primary); --stage-prop: var(--text-secondary); --stage-prop-lit: var(--text-primary); } @keyframes modernEnter { from { opacity: 0; transform: translateY(var(--motion-enter-distance, .4rem)) scale(.98); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- * Modern entity-image silhouette (ADR-0014 slot 3) — the workspace plate: a * rounded square, in every size the slot covers — the hairline ring retired with * the base ring it restated (#2438). The * plate view carries the silhouette; the lightbox print keeps the base card. * ------------------------------------------------------------------------- */ :root[data-theme="modern"] .entityDisplayImage__view, :root[data-theme="modern"] .entityDisplayImage__view .roundFigure__image { border-radius: var(--radius-button); } :root[data-theme="modern"] .entityImageAndName__img, :root[data-theme="modern"] .entityImageAndName__imageNode { border-radius: var(--radius-sheet); } /* --------------------------------------------------------------------------- * Modern search-field chrome (ADR-0014 slot 7) — the plain field: the base * parallelogram flattens to a rounded hairline input beside a filled button. * The input/button boxes re-space because the base geometry overlaps them * under its diagonals. * ------------------------------------------------------------------------- */ :root[data-theme="modern"] .mainSearchBar__view::before, :root[data-theme="modern"] .mainSearchBar__view::after { content: none; } :root[data-theme="modern"] .mainSearchBar__input { clip-path: none; border: var(--border-width) solid var(--border-default); background-color: var(--surface-card); border-radius: var(--radius-input); box-shadow: var(--elevation-button); width: calc(100% - 1.4rem - max(4.5rem, var(--touch-target-primary))); right: calc(1.4rem + max(4.5rem, var(--touch-target-primary))); padding: .3rem var(--pad-dense); /* intentional literal: the .3rem vertical is the base rule's, kept so the input's outer box height is unchanged */ } :root[data-theme="modern"] .mainSearchBar__input:focus-visible { border-color: var(--brand-primary); } :root[data-theme="modern"] .mainSearchBar__button { clip-path: none; border-radius: var(--radius-button); box-shadow: var(--elevation-button); } /* --------------------------------------------------------------------------- * Modern masthead (ADR-0014 slot 10) — the plain row: card white under the * default hairline; the cover keeps the base soft wash and the lamp the base * construction. * ------------------------------------------------------------------------- */ :root[data-theme="modern"] .mainHeader__view { background-color: var(--surface-card); box-shadow: none; } /** * cyber.css — cyber theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * The production "cyber" theme, rebuilt ground-up as the cyberpunk SIGNAL * world: hard print-tech HUD — registration-mark ground, bracket-framed * cards, notched slab buttons with hatch strips, zero radius everywhere. * Light is the chalky poster print (#D7D6D2 / #E3E2DD) with an ink field * (#16151C) and ONE signal, acid chartreuse (#B4D900), on brand-primary AND * brand-accent: every action slab is acid with ink type (`--text-on-brand` * is ink — the only ink that reads on both an acid slab and an acid glyph; * an ink primary pairs ink on ink at 1.00:1). Red (#B60E29) is demoted to * status-danger. Dark is the black instrument panel (#0A0A0D / #121216) in * warm white (#EDEBE2) with the yellow signal (#F2C40F) on primary + accent * and black ink on every fill. Both modes are opaque (no glass); hard-offset * low-alpha shadows in light, hairline + soft depth in dark. Type: SQUARIX * display (one 400 cut — hierarchy by scale; display rungs one notch DOWN * because the square face runs wide), Saira body, Martian Mono spec/data, * `--font-poster` (Kusanagi) as the ungated theme-voice token the HUD * furniture reads. Compact HUD density; snap motion; `cyberEnter` is a * stamped arrival (rise + early opacity commit, no dips, no lateral travel). * Material: registration-mark / circuit-trace data-URIs + scanline card * textures over the opaque surface colors. Claims slots 1–5 and the 0016 voice * claims (selection, caret, chip + figures → mono, tab ink, heading pins). Retune * a fill and re-check its ink pair — contrast.test.js gates both modes. Activated * by the runtime gate (data-theme/data-mode on ; knowledge-base/style/). * * @version 2026-Jun-19 Synthwave palette (was the cyan cyber-tron pass) */ :root[data-theme="cyber"] { --surface-page: #D7D6D2; --surface-card: #E3E2DD; --surface-raised: #EFEEE9; --surface-sunken: #C6C5BF; --surface-hover: #DBDAD5; --surface-selected: #E0E4C9; --surface-overlay: rgba(20, 20, 16, 0.50); --surface-brandmark: #FFFFFF; --surface-blur: none; --brand-primary: #B4D900; --brand-secondary: #4A4A42; --brand-accent: #B4D900; --text-primary: #16151C; --text-secondary: #504F47; --text-on-brand: #16151C; --text-on-status: #EFEEE9; --text-disabled: #66655C; --text-link: #465600; --text-brand: #485700; --text-accent: #485700; --text-success: #145A2E; --text-warning: #6E400A; --text-danger: #A10C24; --text-partial: #5C4380; --border-default: rgba(22, 21, 28, 0.18); --border-strong: rgba(22, 21, 28, 0.46); --border-width: .1rem; --status-success: #186334; --status-warning: #7E4A0B; --status-danger: #B60E29; --status-partial: #6A4E8C; --status-info: #2456A8; --focus-ring-color: #414F00; --chart-gradient: linear-gradient(135deg, #16151C 0%, #4C5E00 45%, #B4D900 100%); --scrollbar-thumb: var(--text-primary); --scrollbar-thumb-hover: var(--brand-secondary); --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: miter; --font-display: 'SQUARIX', 'Saira', sans-serif; --font-body: 'Saira', sans-serif; --font-mono: 'Martian Mono', monospace; --font-poster: 'Kusanagi', 'SQUARIX', 'Saira', sans-serif; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.2rem; --font-size-stat: 2.8rem; --font-size-display: 3.4rem; --font-weight-body: 400; --font-weight-medium: 600; --font-weight-heading: 400; --font-weight-display: 400; --line-height-tight: 1.15; --line-height-body: 1.5; --line-height-relaxed: 1.6; --letter-spacing-display: .02em; --letter-spacing-body: normal; --radius-dense: 0; --radius-input: 0; --radius-button: 0; --radius-card: 0; --radius-sheet: 0; --radius-shell: 0; --radius-pill: 0; --radius-avatar: 0; --pad-cell: .4rem; --pad-dense: .8rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.4rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 1.2rem; --pad-sheet: 2rem; --pad-page: 1.6rem; --pad-shell: 2.8rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.2rem; --gap-tile: 1.2rem; --gap-section: 1.2rem; --shadow-light-source: rgba(255, 255, 255, 0.70); --shadow-dark-source: rgba(22, 21, 28, 0.35); --border-highlight: transparent; --elevation-flat: none; --elevation-button: 0 0 0 .1rem rgba(22, 21, 28, 0.18), .3rem .3rem 0 rgba(22, 21, 28, 0.12); --elevation-raised: 0 0 0 .1rem rgba(22, 21, 28, 0.12), .4rem .4rem 0 rgba(22, 21, 28, 0.07); --elevation-inset: inset .2rem .2rem 0 rgba(22, 21, 28, 0.09), inset 0 0 0 .1rem rgba(22, 21, 28, 0.12); --elevation-overlay: 0 0 0 .1rem rgba(22, 21, 28, 0.24), 1rem 1rem 0 rgba(122, 143, 0, 0.16), 0 2.4rem 5rem rgba(22, 21, 28, 0.25); --elevation-glow: 0 0 0 .2rem rgba(102, 122, 0, 0.60), .4rem .4rem 0 rgba(22, 21, 28, 0.18); --elevation-surround: 0 0 0 .1rem rgba(22, 21, 28, 0.16); --surface-clip: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%); --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 360ms; --motion-enter-distance: .4rem; --motion-enter-name: cyberEnter; --sound-message-received: blip; --ease-standard: cubic-bezier(0.3, 0, 0.1, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.1, 0, 0.1, 1); --surface-page-backdrop: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27320%27%3E%3Cg stroke=%27%2316151C%27 stroke-opacity=%27.20%27 fill=%27none%27%3E%3Cpath d=%27M40 34v12M34 40h12%27/%3E%3Cpath d=%27M228 128v12M222 134h12%27/%3E%3Cpath d=%27M124 246v12M118 252h12%27/%3E%3C/g%3E%3Cg fill=%27%2316151C%27 fill-opacity=%27.16%27%3E%3Crect x=%27276%27 y=%2758%27 width=%273%27 height=%273%27/%3E%3Crect x=%2772%27 y=%27168%27 width=%273%27 height=%273%27/%3E%3C/g%3E%3Cpath d=%27M160 42v12M154 48h12%27 stroke=%27%237A8F00%27 stroke-opacity=%27.55%27 fill=%27none%27/%3E%3Crect x=%27246%27 y=%27236%27 width=%2712%27 height=%274%27 fill=%27%2316151C%27 fill-opacity=%27.14%27/%3E%3C/svg%3E"), radial-gradient(120rem 70rem at 50% -8%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%); --surface-page-backdrop-size: 32rem 32rem, 100% 100%; --surface-page-backdrop-repeat: repeat, no-repeat; --surface-card-texture: linear-gradient(180deg, rgba(22, 21, 28, 0.05), rgba(22, 21, 28, 0) 1rem), repeating-linear-gradient(180deg, rgba(22, 21, 28, 0.06) 0, rgba(22, 21, 28, 0.06) .1rem, rgba(22, 21, 28, 0) .1rem, rgba(22, 21, 28, 0) .3rem); --surface-card-texture-size: 100% 100%; --surface-card-texture-repeat: no-repeat; --chart-line-shape: angular; --chart-area-opacity: .44; --chart-material: signal; --chart-line-weight: 1.3; --chart-glow-strength: 0.2; --chart-wash-opacity: 0.24; --chart-grid-opacity: 0.24; --chart-marker-shape: square; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: linear-gradient(90deg, color-mix(in srgb, var(--chart-series-1) 8%, transparent), transparent 60%); --chart-plot-surface: transparent; --chart-plot-texture: repeating-linear-gradient(0deg, transparent, transparent .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .4rem); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-flat); --chart-mark-radius: var(--radius-dense); --chart-bar-texture: repeating-linear-gradient(135deg, transparent, transparent .3rem, rgba(255, 255, 255, .35) .3rem, rgba(255, 255, 255, .35) .4rem); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #655B42; --chart-series-3: #616775; --chart-series-4: #8B572A; --chart-series-5: #786B8B; --chart-series-6: #3C7775; } :root[data-theme="cyber"][data-mode="dark"] { --surface-page: #0A0A0D; --surface-card: #121216; --surface-raised: #17171B; --surface-sunken: #060608; --surface-hover: #1A1A1F; --surface-selected: #262112; --surface-overlay: rgba(0, 0, 0, 0.65); --surface-brandmark: #FFFFFF; --surface-blur: none; --brand-primary: #F2C40F; --brand-secondary: #B7940C; --brand-accent: #F2C40F; --text-primary: #EDEBE2; --text-secondary: #A5A297; --text-on-brand: #131208; --text-on-status: #131208; --text-disabled: #7A7869; --text-link: #F2C40F; --text-brand: #F2C40F; --text-accent: #F2C40F; --text-success: #8CC152; --text-warning: #E09E2F; --text-danger: #FF4D3E; --text-partial: #B08BC9; --border-default: rgba(237, 235, 226, 0.14); --border-strong: rgba(237, 235, 226, 0.34); --border-width: .1rem; --status-success: #8CC152; --status-warning: #E09E2F; --status-danger: #FF4D3E; --status-partial: #B08BC9; --status-info: #7FB4E0; --focus-ring-color: #F2C40F; --chart-gradient: linear-gradient(135deg, #B7940C 0%, #F2C40F 55%, #EDEBE2 100%); --scrollbar-thumb: var(--brand-accent); --scrollbar-thumb-hover: var(--brand-primary); --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: miter; --font-display: 'SQUARIX', 'Saira', sans-serif; --font-body: 'Saira', sans-serif; --font-mono: 'Martian Mono', monospace; --shadow-light-source: rgba(242, 196, 15, 0.08); --shadow-dark-source: rgba(0, 0, 0, 0.70); --border-highlight: rgba(237, 235, 226, 0.08); --elevation-flat: none; --elevation-button: 0 0 0 .1rem rgba(237, 235, 226, 0.16), 0 .3rem .8rem rgba(0, 0, 0, 0.50); --elevation-raised: 0 0 0 .1rem rgba(237, 235, 226, 0.10), 0 .8rem 2rem rgba(0, 0, 0, 0.55); --elevation-inset: inset 0 0 0 .1rem rgba(237, 235, 226, 0.08), inset 0 .3rem .8rem rgba(0, 0, 0, 0.55); --elevation-overlay: 0 0 0 .1rem rgba(242, 196, 15, 0.25), 0 2rem 5rem rgba(0, 0, 0, 0.70); --elevation-glow: 0 0 0 .2rem rgba(242, 196, 15, 0.55), 0 0 2rem rgba(242, 196, 15, 0.30); --elevation-surround: 0 0 0 .1rem rgba(237, 235, 226, 0.12); --surface-page-backdrop: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27360%27 height=%27360%27%3E%3Cg stroke=%27%23EDEBE2%27 stroke-opacity=%27.07%27 fill=%27none%27%3E%3Cpath d=%27M24 60h72v54h48%27/%3E%3Cpath d=%27M312 96v70h-58%27/%3E%3Cpath d=%27M96 300h84v-44%27/%3E%3C/g%3E%3Cg fill=%27%23EDEBE2%27 fill-opacity=%27.1%27%3E%3Crect x=%27142%27 y=%27112%27 width=%274%27 height=%274%27/%3E%3Crect x=%27252%27 y=%27164%27 width=%274%27 height=%274%27/%3E%3Crect x=%27178%27 y=%27254%27 width=%274%27 height=%274%27/%3E%3C/g%3E%3Cpath d=%27M210 24v40h56%27 stroke=%27%23F2C40F%27 stroke-opacity=%27.14%27 fill=%27none%27/%3E%3Crect x=%27264%27 y=%2762%27 width=%274%27 height=%274%27 fill=%27%23F2C40F%27 fill-opacity=%27.35%27/%3E%3C/svg%3E"), radial-gradient(110rem 60rem at 50% -10%, rgba(242, 196, 15, 0.05), rgba(0, 0, 0, 0) 55%); --surface-page-backdrop-size: 36rem 36rem, 100% 100%; --surface-page-backdrop-repeat: repeat, no-repeat; --surface-card-texture: linear-gradient(180deg, rgba(242, 196, 15, 0.05), rgba(242, 196, 15, 0) 1.2rem), repeating-linear-gradient(180deg, rgba(237, 235, 226, 0.06) 0, rgba(237, 235, 226, 0.06) .1rem, rgba(0, 0, 0, 0) .1rem, rgba(0, 0, 0, 0) .3rem); --surface-card-texture-size: 100% 100%; --surface-card-texture-repeat: no-repeat; --chart-series-2: #D7D0B7; --chart-series-3: #8F96A6; --chart-series-4: #C89456; --chart-series-5: #A89AB6; --chart-series-6: #83AAA1; } :root[data-theme="cyber"][data-viewport="phone"] { --surface-page-backdrop-size: 16rem 16rem, 100% 100%; } :root[data-theme="cyber"][data-mode="dark"][data-viewport="phone"] { --surface-page-backdrop-size: 18rem 18rem, 100% 100%; } @keyframes cyberEnter { from { opacity: 0; transform: translateY(var(--motion-enter-distance)); } 40% { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); } } /* ── structural claims (decision 0014) ── */ /* Card/pillBox frame slot: the registration brackets — eight ink dashes at the four corners, painted as the pillBox's own background layers in front of the card texture, so the host's positioning is untouched. */ :root[data-theme="cyber"] .pillBox { background-image: linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)), var(--surface-card-texture); background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0, 0 0; background-size: 1.4rem .1rem, .1rem 1.4rem, 1.4rem .1rem, .1rem 1.4rem, 1.4rem .1rem, .1rem 1.4rem, 1.4rem .1rem, .1rem 1.4rem, var(--surface-card-texture-size), var(--surface-card-texture-size); background-repeat: no-repeat; } /* Tile slot: the data-rule — a two-segment top edge, signal head over a hairline run. A selected tile runs the head the full width over the selected wash with an ink outline. */ :root[data-theme="cyber"] .tile { background-image: linear-gradient(90deg, var(--brand-accent) 0 1.8rem, var(--border-default) 1.8rem 100%); background-position: 0 0; background-size: 100% .2rem; background-repeat: no-repeat; } :root[data-theme="cyber"] .tile[class*="__view-selected"] { background-color: var(--surface-selected); background-image: linear-gradient(90deg, var(--brand-accent), var(--brand-accent)); background-size: 100% .3rem; border-color: var(--border-strong); } /* Entity-image silhouette slot: the square registration plate — zero radius with the top-right notch of --surface-clip; the clip repeats on the .roundFigure__image overlay because a parent's clip-path does not clip its children. The lockup plate view and its frame share the notch, the frame's ::after is a brand-primary rule traced inside it; the lightbox print and the tray's picks are squared and the print takes a larger notch; EntityTile avatars trace the same frame at hairline weight. */ :root[data-theme="cyber"] .entityDisplayImage__view { border-radius: 0; clip-path: polygon(0 0, calc(100% - .6rem) 0, 100% .6rem, 100% 100%, 0 100%); } :root[data-theme="cyber"] .entityDisplayImage__view .roundFigure__image { border-radius: 0; clip-path: polygon(0 0, calc(100% - .6rem) 0, 100% .6rem, 100% 100%, 0 100%); } :root[data-theme="cyber"] .entityImageAndName__img, :root[data-theme="cyber"] .entityImageAndName__imageNode { border-radius: 0; } :root[data-theme="cyber"] .entityImageAndName__img:not(:focus-visible), :root[data-theme="cyber"] .entityImageAndName__imageNode:not(:has(.expandableEntityImage__view:focus-visible)) { clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%); } :root[data-theme="cyber"] .entityImageAndName__imageNode::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-color: var(--brand-primary); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 1rem, calc(100% - 1rem) 0, .2rem 0, .2rem .2rem, calc(100% - 1.48rem) .2rem, calc(100% - .2rem) 1.48rem, calc(100% - .2rem) calc(100% - .2rem), .2rem calc(100% - .2rem), .2rem 0); } :root[data-theme="cyber"] .profileImageExpander__print, :root[data-theme="cyber"] .profileImageExpander__initials, :root[data-theme="cyber"] .profileImagesScrollArea__view, :root[data-theme="cyber"] .profileImagesScrollArea__imageFrame { border-radius: 0; } :root[data-theme="cyber"] .profileImageExpander__print, :root[data-theme="cyber"] .profileImageExpander__initials { clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%); } :root[data-theme="cyber"] .profileImagesScrollArea__view { border-top: calc(var(--border-width) * 3) solid var(--brand-primary); } :root[data-theme="cyber"] .profileImageExpander__close:not(:focus-visible), :root[data-theme="cyber"] .profileImageExpander__step:not(:focus-visible) { clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, 0 100%); } :root[data-theme="cyber"] .entityTile__pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-color: var(--brand-primary); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .6rem, calc(100% - .6rem) 0, .1rem 0, .1rem .1rem, calc(100% - .84rem) .1rem, calc(100% - .1rem) .84rem, calc(100% - .1rem) calc(100% - .1rem), .1rem calc(100% - .1rem), .1rem 0); } /* Header-underline slot: the spec-sheet rule — mono caps behind a `//` prefix (empty alt text: screen readers skip it) over a two-weight underline, signal head on a strong hairline. */ :root[data-theme="cyber"] .pillboxWithHeading__title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; background-image: linear-gradient(var(--brand-accent), var(--brand-accent)), linear-gradient(var(--border-strong), var(--border-strong)); background-position: 0 100%, 0 100%; background-size: 2.6rem .2rem, 100% .1rem; background-repeat: no-repeat; } :root[data-theme="cyber"] .pillboxWithHeading__title::before { content: '// ' / ''; color: var(--text-accent); } /* Button chrome slot (the shared button frame): tracked caps, a bottom-right corner notch that yields to :focus-visible so the app floor's focus ring is never cropped, and a hatch strip on the filled variants. */ :root[data-theme="cyber"] .button { text-transform: uppercase; letter-spacing: .06em; } :root[data-theme="cyber"] .button:not(:focus-visible):not(.navigationRail__mainPanel__option) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%); } :root[data-theme="cyber"] .button-darkBackground, :root[data-theme="cyber"] .button-danger { position: relative; } :root[data-theme="cyber"] .button-darkBackground::after, :root[data-theme="cyber"] .button-danger::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1.4rem; pointer-events: none; opacity: .3; background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor .2rem, rgba(0, 0, 0, 0) .2rem, rgba(0, 0, 0, 0) .6rem); } /* Tab-bar active indicator slot: the acid rule — the bar's sliding indicator in the signal colour, through the base bar's seam. */ :root[data-theme="cyber"] .tabHeaderBar__view { --tabHeaderBar-indicator-background-color: var(--brand-accent); --tabHeaderBar-tab-hover-color: var(--text-link); --tabHeaderBar-tab-selected-color: var(--text-link); } /* Segmented status-control slot: the slab — square track and knob, the knob notched like the button and flat (no elevation), tracked caps on the stop labels. The icon variant paints no track or knob and keeps base chrome. */ :root[data-theme="cyber"] .multiStepSlider__view-text .multiStepSlider__track-text, :root[data-theme="cyber"] .multiStepSlider__view-text .multiStepSlider__knob { border-radius: 0; } :root[data-theme="cyber"] .multiStepSlider__view-text .multiStepSlider__knob { box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%); } :root[data-theme="cyber"] .multiStepSlider__view-text .multiStepSlider__stopLabel { text-transform: uppercase; letter-spacing: .06em; } /* ── voice claims (decision 0016) ── */ :root[data-theme="cyber"] ::selection { background: var(--brand-accent); color: var(--text-on-brand); } :root[data-theme="cyber"] input, :root[data-theme="cyber"] textarea, :root[data-theme="cyber"] [contenteditable] { caret-color: var(--brand-accent); } :root[data-theme="cyber"] .chip, :root[data-theme="cyber"] .chip .heading { font-family: var(--font-mono); } :root[data-theme="cyber"] .taskTile__timer, :root[data-theme="cyber"] .teamMemberTile__timer, :root[data-theme="cyber"] .taskProgressSummary__percentageValue, :root[data-theme="cyber"] .taskProgressSummary__completedValue, :root[data-theme="cyber"] .projectProgressSummary__percentageValue, :root[data-theme="cyber"] .taskTimeSummary__remainingValue, :root[data-theme="cyber"] .projectTimeSummary__timeLeftValue, :root[data-theme="cyber"] .taskDeadlineSummary__daysLeftValue, :root[data-theme="cyber"] .projectDeadlineSummary__daysLeftValue, :root[data-theme="cyber"] .taskTimeSummary__total .headerWithSmallHeading__header, :root[data-theme="cyber"] .taskTimeSummary__consumed .headerWithSmallHeading__header, :root[data-theme="cyber"] .projectTimeSummary__total .headerWithSmallHeading__header, :root[data-theme="cyber"] .projectTimeSummary__consumed .headerWithSmallHeading__header, :root[data-theme="cyber"] .taskFinancialSummary__billed, :root[data-theme="cyber"] .projectFinancialSummary__billed { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :root[data-theme="cyber"] .heading { font-weight: 500; font-size-adjust: cap-height from-font; word-spacing: .1em; } :root[data-theme="cyber"] .heading-large, :root[data-theme="cyber"] .heading-larger { word-spacing: .15em; } :root[data-theme="cyber"] .overlayPanel { background-image: var(--surface-page-backdrop); background-size: var(--surface-page-backdrop-size); background-repeat: var(--surface-page-backdrop-repeat); } /* Masthead slot (ADR-0014 slot 10): scanlines over the cover's brand wash and a chamfered cover edge; registration corners plus the acid signal rule painted on the lockup row; the lamp a square signal plate under a mono label. */ :root[data-theme="cyber"] .mainHeader__cover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%); } :root[data-theme="cyber"] .mastheadCover__wash { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 .1rem, transparent .1rem .4rem), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 60%, transparent), color-mix(in srgb, var(--text-primary) 55%, transparent)); } :root[data-theme="cyber"] .mainHeader__view { background-color: var(--surface-card); background-image: linear-gradient(var(--brand-accent), var(--brand-accent)), linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)); background-size: 100% .2rem, 1.2rem .1rem, .1rem 1.2rem; background-position: 0 100%, calc(100% - .6rem) calc(100% - 1rem), calc(100% - .6rem) calc(100% - 1rem); background-repeat: no-repeat; border-bottom-color: transparent; } :root[data-theme="cyber"] .onlineIndicator__lamp { border-radius: 0; background-image: none; } :root[data-theme="cyber"] .onlineIndicator__header { font-family: var(--font-mono); } /** * 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 the chalk/acid * (light) and black/yellow (dark) print-tech HUD with SQUARIX, zero radius and * bracket/notch structure; futuristic is cyan-on-black flat with Audiowide + * crisp small radii and no structural claims. * * `--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 */ :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; --text-on-brand: #04121A; --text-on-status: #F7F7F8; --text-disabled: #737F92; --text-link: #0A6C78; --text-brand: #0A6C78; --text-accent: #0A6C78; --text-success: #00712F; --text-warning: #7D5D00; --text-danger: #C60A2C; --text-partial: #1A6E5F; --border-default: rgba(15, 169, 189, 0.24); --border-strong: rgba(15, 169, 189, 0.50); --border-width: .1rem; --status-success: #007B33; --status-warning: #876500; --status-danger: #D40B2F; --status-partial: #1C7768; --status-info: #1970A2; --focus-ring-color: #0C8595; --icon-accent: var(--brand-secondary); --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: butt; --icon-join: miter; --font-display: 'Audiowide', system-ui, sans-serif; --font-body: system-ui, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Courier New', monospace; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.7rem; --font-size-subheading: 2.3rem; --font-size-heading: 2.8rem; --font-size-stat: 3.2rem; --font-size-display: 4rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 400; --font-weight-display: 400; --line-height-tight: 1.2; --line-height-body: 1.5; --line-height-relaxed: 1.7; --letter-spacing-display: 0.02em; --letter-spacing-body: normal; --radius-dense: .2rem; --radius-input: .3rem; --radius-button: .3rem; --radius-card: .4rem; --radius-sheet: .5rem; --radius-shell: .6rem; --radius-pill: .6rem; --radius-avatar: .4rem; --pad-cell: .4rem; --pad-dense: .6rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.4rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 1.4rem; --pad-sheet: 2rem; --pad-page: 1.6rem; --pad-shell: 2.8rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .6rem; --gap-inline: .8rem; --gap-stack: 1.2rem; --gap-tile: 1.4rem; --gap-section: 1.4rem; --shadow-light-source: transparent; --shadow-dark-source: rgba(17, 24, 39, 0.14); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(17, 24, 39, 0.10); --elevation-raised: 0 .1rem .2rem rgba(17, 24, 39, 0.10); --elevation-inset: inset 0 .1rem .2rem rgba(17, 24, 39, 0.10); --elevation-overlay: 0 .2rem .4rem rgba(17, 24, 39, 0.10), 0 1.2rem 2.4rem -.6rem rgba(17, 24, 39, 0.18); --elevation-glow: 0 0 1rem .1rem rgba(15, 169, 189, 0.30); --elevation-surround: 0 0 .8rem rgba(15, 169, 189, 0.22); --surface-page-backdrop: radial-gradient(120% 80% at 50% 100%, rgba(15, 169, 189, 0.06) 0%, transparent 60%); --motion-fast: 150ms; --motion-base: 300ms; --motion-slow: 450ms; --motion-enter-distance: .2rem; --motion-enter-name: motionEnter; --sound-message-received: ping; --ease-standard: cubic-bezier(0.3, 0, 0.7, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.1, 0, 0.3, 1); --chart-line-shape: angular; --chart-area-opacity: .52; --chart-material: luminous; --chart-line-weight: 1.25; --chart-glow-strength: 1.4; --chart-wash-opacity: 0.32; --chart-grid-opacity: 0.17; --chart-marker-shape: ring; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-glow); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--chart-series-1) 15%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--chart-series-2) 4%, transparent), transparent 60%); --chart-plot-surface: transparent; --chart-plot-texture: linear-gradient(0deg, color-mix(in srgb, var(--chart-series-1) 5%, transparent), transparent 75%); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-glow); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 50%, rgba(255, 255, 255, .65)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #6956C4; --chart-series-3: #276B9B; --chart-series-4: #A84083; --chart-series-5: #267663; --chart-series-6: #57677E; --stage-ground: #DCE5EC; --stage-plate-ink: var(--text-primary); --stage-prop: #626762; --stage-prop-lit: var(--text-primary); --landing-eyebrow-case: uppercase; } :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-on-status: #111827; --text-disabled: #777C96; --text-link: #54EAFD; --text-brand: #54EAFD; --text-accent: #54EAFD; --text-success: #00E676; --text-warning: #FFD600; --text-danger: #FF698B; --text-partial: #5FE3C7; --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: #FF2E5E; --status-partial: #5FE3C7; --status-info: #3AB4FF; --focus-ring-color: #54EAFD; --icon-accent: var(--brand-secondary); --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: butt; --icon-join: miter; --font-display: 'Audiowide', system-ui, sans-serif; --font-body: system-ui, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Courier New', monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.50); --border-highlight: rgba(84, 234, 253, 0.16); --surface-blur: none; --elevation-flat: none; --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .2rem rgba(0, 0, 0, 0.45); --elevation-raised: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .3rem rgba(0, 0, 0, 0.50); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, 0.50); --elevation-overlay: 0 .2rem .6rem rgba(0, 0, 0, 0.55), 0 0 2rem rgba(84, 234, 253, 0.12); --elevation-glow: 0 1.4rem 2rem -.4rem rgba(84, 234, 253, 0.18), 0 0 1rem rgba(84, 234, 253, 0.25); --elevation-surround: 0 0 1rem rgba(84, 234, 253, 0.25); --surface-page-backdrop: radial-gradient(120% 80% at 50% 100%, rgba(84, 234, 253, 0.07) 0%, transparent 60%); --chart-series-2: #9389FA; --chart-series-3: #3B89BD; --chart-series-4: #D383CE; --chart-series-5: #71CBAA; --chart-series-6: #A7B9D4; --stage-ground: var(--surface-page); --stage-prop: var(--text-secondary); --stage-prop-lit: var(--brand-accent); } /* Masthead slot (ADR-0014 slot 10): a cyan horizon glow rising from the cover's base; the instrument edge on the row's bottom hairline over the button elevation's top highlight; the lamp is a square. */ :root[data-theme="futuristic"] .mastheadCover__wash { background-image: linear-gradient(to top, color-mix(in srgb, var(--brand-primary) 70%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 40%, transparent), color-mix(in srgb, var(--brand-secondary) 30%, transparent)); } :root[data-theme="futuristic"] .mainHeader__view { border-bottom-color: var(--brand-primary); box-shadow: var(--elevation-button); } :root[data-theme="futuristic"] .onlineIndicator__lamp { border-radius: 0; } /* --------------------------------------------------------------------------- Landing — the era's structural claim on the showroom demo tiles. The landing forces its own three eras (decision 13), so these live here rather than in the landing stylesheets (decision 0014). The shell axis rides along because the landing's own sheet now scores (0,3,0) too and imports later: without it these rules TIE and lose (#2506, gotchas/css.md CSS-35). --------------------------------------------------------------------------- */ :root[data-shell="landing"][data-theme="futuristic"] .realtime-space { border-top: .288rem solid var(--demo-accent); } :root[data-shell="landing"][data-theme="futuristic"] .realtime-space__identity { letter-spacing: .08em; text-transform: uppercase; } /** * 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 * * The production "neumorphism" theme: soft extruded UI. Cards are the SAME * color as the page — depth comes from dual light/dark caster * shadows with a soft edge highlight. Teal accent, Quicksand display and body (Space * Mono only on `--font-mono`), `--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`) and * `--border-highlight`; light and dark share the elevation formulas. * Component consumers use these roles; structural claims live below. * * 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/. */ :root[data-theme="neumorphism"] { --surface-page: #E8EEEC; --surface-card: #E8EEEC; --surface-raised: #E8EEEC; --surface-sunken: #E0E6E4; --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: #2C8379; --text-primary: #293D38; --text-secondary: #56605E; --text-on-brand: #FFFFFF; --text-on-status: #F7F7F8; --text-disabled: #6C7C78; --text-link: #006666; --text-brand: #006666; --text-accent: #236860; --text-success: #236860; --text-warning: #8A4F1E; --text-danger: #B42626; --text-partial: #A43554; --border-default: rgba(45, 58, 56, 0.10); --border-strong: rgba(45, 58, 56, 0.18); --border-width: 0; --status-success: #28766D; --status-warning: #9C5A21; --status-danger: #CA2A2A; --status-partial: #B93C5F; --status-info: #21789D; --focus-ring-color: #006666; --icon-accent: #2B8177; --icon-fill: rgba(43, 129, 119, 0.14); --icon-stroke-width: .25rem; --icon-cap: round; --icon-join: round; --font-display: 'Quicksand', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --font-size-label: 1.1rem; --font-size-caption: 1.3rem; --font-size-body: 1.5rem; --font-size-lead: 1.7rem; --font-size-subheading: 2.1rem; --font-size-heading: 2.5rem; --font-size-stat: 3rem; --font-size-display: 3.6rem; --font-weight-body: 500; --font-weight-medium: 600; --font-weight-heading: 700; --font-weight-display: 700; --line-height-tight: 1.25; --line-height-body: 1.55; --line-height-relaxed: 1.7; --letter-spacing-display: normal; --letter-spacing-body: 0.01em; --radius-dense: .8rem; --radius-input: 1.2rem; --radius-button: 1.2rem; --radius-card: 1.6rem; --radius-sheet: 2rem; --radius-shell: 2.4rem; --radius-pill: 999rem; --radius-avatar: 999rem; --pad-cell: .6rem; --pad-dense: 1rem; --pad-row: 1.2rem; --pad-input: 1.2rem; --pad-input-inline: 1.6rem; --pad-button: 1.2rem; --pad-button-inline: 2.4rem; --pad-card: 2.4rem; --pad-sheet: 2.8rem; --pad-page: 2.4rem; --pad-shell: 4rem; --gap-hairline: .2rem; --gap-tight: .6rem; --gap-dense: 1rem; --gap-inline: 1rem; --gap-stack: 1.6rem; --gap-tile: 2.8rem; --gap-section: 2.8rem; --shadow-light-source: rgba(255, 255, 255, 0.88); --shadow-dark-source: rgba(151, 172, 164, 0.42); --border-highlight: rgba(255, 255, 255, 0.40); --surface-blur: none; --elevation-flat: none; --elevation-raised: .7rem .7rem 1.6rem var(--shadow-dark-source), -.6rem -.6rem 1.4rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-overlay: 1.2rem 1.2rem 2.8rem var(--shadow-dark-source), -.8rem -.8rem 2rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-inset: inset .2rem .2rem .5rem var(--shadow-dark-source), inset -.2rem -.2rem .4rem var(--shadow-light-source); --elevation-button: .25rem .25rem .6rem var(--shadow-dark-source), -.25rem -.25rem .6rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-surround: .4rem .4rem .9rem var(--shadow-dark-source), -.4rem -.4rem .9rem var(--shadow-light-source); --elevation-glow: 0 0 0 .2rem rgba(35, 119, 110, 0.18), 0 0 1.2rem -.2rem rgba(35, 119, 110, 0.25); --motion-fast: 180ms; --motion-base: 320ms; --motion-slow: 500ms; --motion-enter-distance: .3rem; --motion-enter-name: motionEnter; --sound-message-received: pop; --ease-standard: cubic-bezier(0.35, 0, 0.15, 1); --ease-emphasized: cubic-bezier(0.25, 0, 0.05, 1); --ease-enter: cubic-bezier(0.05, 0, 0.15, 1); --chart-line-shape: smooth; --chart-area-opacity: .34; --chart-material: sculpted; --chart-line-weight: 1.8; --chart-glow-strength: 0; --chart-wash-opacity: 0.12; --chart-grid-opacity: 0.09; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: transparent; --chart-frame-texture: none; --chart-plot-surface: var(--surface-card); --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-inset); --chart-mark-elevation: var(--elevation-raised); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(110deg, rgba(255, 255, 255, .7), transparent 60%, rgba(0, 0, 0, .12)); --chart-track-surface: var(--surface-card); --chart-track-elevation: var(--elevation-inset); --chart-ring-detail: 0; --chart-series-2: #647F92; --chart-series-3: #9A785D; --chart-series-4: #776B92; --chart-series-5: #6E805C; --chart-series-6: #93667C; } :root[data-theme="neumorphism"][data-mode="dark"] { --surface-page: #28322F; --surface-card: #28322F; --surface-raised: #28322F; --surface-sunken: #222B28; --surface-hover: #313736; --surface-selected: #383F3D; --surface-overlay: rgba(0, 0, 0, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #70CBBB; --brand-secondary: #99DED2; --brand-accent: #70CBBB; --text-primary: #E4ECE8; --text-secondary: #ADBDB6; --text-on-brand: #0E1413; --text-on-status: #2D3A38; --text-disabled: #7D8D8A; --text-link: #83D4C7; --text-brand: #83D4C7; --text-accent: #83D4C7; --text-success: #48C0B1; --text-warning: #E1A36E; --text-danger: #EC9090; --text-partial: #DD96A9; --border-default: rgba(220, 228, 226, 0.10); --border-strong: rgba(220, 228, 226, 0.16); --border-width: 0; --status-success: #40B8AA; --status-warning: #DF9A60; --status-danger: #EC9090; --status-partial: #D98AA0; --status-info: #47ACD8; --focus-ring-color: #83D4C7; --icon-accent: #99DED2; --icon-fill: rgba(153, 222, 210, 0.12); --icon-stroke-width: .25rem; --icon-cap: round; --icon-join: round; --font-display: 'Quicksand', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --shadow-light-source: rgba(103, 127, 117, 0.16); --shadow-dark-source: rgba(7, 15, 12, 0.42); --border-highlight: rgba(213, 238, 225, 0.07); --surface-blur: none; --elevation-flat: none; --elevation-raised: .7rem .7rem 1.6rem var(--shadow-dark-source), -.6rem -.6rem 1.4rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-overlay: 1.2rem 1.2rem 2.8rem var(--shadow-dark-source), -.8rem -.8rem 2rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-inset: inset .2rem .2rem .5rem var(--shadow-dark-source), inset -.2rem -.2rem .4rem var(--shadow-light-source); --elevation-button: .25rem .25rem .6rem var(--shadow-dark-source), -.25rem -.25rem .6rem var(--shadow-light-source), inset .1rem .1rem .1rem var(--border-highlight); --elevation-surround: .4rem .4rem .9rem var(--shadow-dark-source), -.4rem -.4rem .9rem var(--shadow-light-source); --elevation-glow: 0 0 0 .2rem rgba(112, 203, 187, 0.20), 0 0 1.4rem -.2rem rgba(112, 203, 187, 0.25); --chart-series-2: #90ADB4; --chart-series-3: #BCA99A; --chart-series-4: #8995B9; --chart-series-5: #B8C3A1; --chart-series-6: #CDAEBE; } /* ── structural claims (decision 0014) ── */ :root[data-theme="neumorphism"] .button-textOnly:not(:active) { box-shadow: var(--elevation-flat); } :root[data-theme="neumorphism"] .button-darkBackground:enabled:hover, :root[data-theme="neumorphism"] .button-darkBackground:enabled:focus-visible { background-color: var(--brand-accent); color: var(--text-on-brand); box-shadow: var(--elevation-surround); } :root[data-theme="neumorphism"] .button-darkBackground:enabled:active { box-shadow: var(--elevation-inset); } :root[data-theme="neumorphism"] .entityImageAndName__img, :root[data-theme="neumorphism"] .entityImageAndName__imageNode { border-radius: var(--radius-avatar); } :root[data-theme="neumorphism"] .profileImageExpander__print, :root[data-theme="neumorphism"] .profileImageExpander__initials, :root[data-theme="neumorphism"] .profileImagesScrollArea__view { outline: 0; } :root[data-theme="neumorphism"] .profileImagesScrollArea__imageFrame { box-shadow: var(--elevation-raised); } :root[data-theme="neumorphism"] .profileImagesScrollArea__highlightedImage { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--brand-primary), var(--elevation-raised); } :root[data-theme="neumorphism"] .mainSearchBar__view::before, :root[data-theme="neumorphism"] .mainSearchBar__view::after { content: none; } :root[data-theme="neumorphism"] .mainSearchBar__input { clip-path: none; border-radius: var(--radius-pill); box-shadow: var(--elevation-inset); width: calc(100% - 1.4rem - max(4.5rem, var(--touch-target-primary))); right: calc(1.4rem + max(4.5rem, var(--touch-target-primary))); padding: .3rem var(--pad-input-inline); /* intentional literal: the .3rem vertical is the base rule's, kept so the input's outer box height is unchanged */ } :root[data-theme="neumorphism"] .mainSearchBar__button { clip-path: none; color: var(--text-on-brand); border-radius: var(--radius-pill); box-shadow: var(--elevation-button); } :root[data-theme="neumorphism"] .tabHeaderBar__view { --tabHeaderBar-rail-border-color: transparent; --tabHeaderBar-indicator-thickness: 0; } :root[data-theme="neumorphism"] .tabHeaderBar__tab:active, :root[data-theme="neumorphism"] .tabHeaderBar__tab[aria-selected='true'] { background-color: var(--surface-sunken); box-shadow: var(--elevation-inset); } :root[data-theme="neumorphism"] .multiStepSlider__view-text .multiStepSlider__track-text, :root[data-theme="neumorphism"] .multiStepSlider__view-text .multiStepSlider__knob { border-radius: var(--radius-pill); } :root[data-theme="neumorphism"] .multiStepSlider__view-text .multiStepSlider__track-text { box-shadow: var(--elevation-inset); } @media (prefers-contrast: more) { :root[data-theme="neumorphism"], :root[data-theme="neumorphism"][data-mode="dark"] { --border-width: .1rem !important; --border-default: var(--border-strong) !important; } } @media (forced-colors: active) { :root[data-theme="neumorphism"], :root[data-theme="neumorphism"][data-mode="dark"] { --border-width: .1rem !important; } } /* ── masthead (decision 0014, slot 10) ── */ :root[data-theme="neumorphism"] .mainHeader__cover { border-radius: 0 0 var(--radius-shell) var(--radius-shell); box-shadow: var(--elevation-inset); } :root[data-theme="neumorphism"] .mainHeader__view { border-bottom-color: transparent; box-shadow: var(--elevation-raised); border-radius: 0 0 var(--radius-shell) var(--radius-shell); } :root[data-theme="neumorphism"] .onlineIndicator__lamp { border-radius: var(--radius-avatar); } /** * 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. Claims five * structural slots (decision 0014, section at the end of this file); the * rest is token-expressible. Activated by the runtime gate (dt-runtime): * `data-theme="retro"` (+ `data-mode="dark"`) on . Values are authored * here; the styleBoard mirrors them. `:root[...]` specificity so the * theme block beats the `:root` modern floor at the same source order. * * @version 2026-Jun-19 Initial deep-theming version */ :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: #B33528; --text-brand: #B33528; --text-accent: #B33528; --text-success: #4E6C34; --text-warning: #7D5C20; --text-danger: #8E2418; --text-partial: #9A4C3C; --border-default: rgba(26, 26, 26, 0.20); --border-strong: rgba(26, 26, 26, 0.40); --border-width: .1rem; --status-success: #5A7D3C; --status-warning: #8F6A25; --status-danger: #8E2418; --status-partial: #B55A47; --status-info: #6E6A60; --focus-ring-color: #C0392B; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .225rem; --icon-cap: butt; --icon-join: miter; --font-display: 'Fraunces', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', monospace; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.5rem; --font-size-lead: 1.8rem; --font-size-subheading: 2.2rem; --font-size-heading: 2.9rem; --font-size-stat: 3.4rem; --font-size-display: 4.4rem; --font-weight-body: 400; --font-weight-medium: 700; --font-weight-heading: 700; --font-weight-display: 900; --line-height-tight: 1.15; --line-height-body: 1.5; --line-height-relaxed: 1.65; --letter-spacing-display: normal; --letter-spacing-body: normal; --radius-dense: .2rem; --radius-input: .2rem; --radius-button: .2rem; --radius-card: .3rem; --radius-sheet: .4rem; --radius-shell: .4rem; --radius-pill: .3rem; --radius-avatar: .3rem; --pad-cell: .4rem; --pad-dense: .8rem; --pad-row: 1.1rem; --pad-input: 1.2rem; --pad-input-inline: 1.6rem; --pad-button: 1.1rem; --pad-button-inline: 2.2rem; --pad-card: 2rem; --pad-sheet: 2.6rem; --pad-page: 2rem; --pad-shell: 3.6rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.4rem; --gap-tile: 1.8rem; --gap-section: 2.2rem; --shadow-light-source: transparent; --shadow-dark-source: rgba(26, 26, 26, 0.12); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem 0 rgba(26, 26, 26, 0.14); --elevation-raised: 0 0.1rem 0 rgba(26, 26, 26, 0.10); --elevation-inset: inset 0 0.1rem 0.1rem rgba(26, 26, 26, 0.08); --elevation-overlay: 0 0.2rem 0 rgba(26, 26, 26, 0.16); --elevation-glow: none; --elevation-surround: 0 0 0 .1rem rgba(26, 26, 26, 0.10); --surface-card-texture: url('/assets/textures/retro-paper-grain.svg'); --motion-fast: 180ms; --motion-base: 280ms; --motion-slow: 420ms; --motion-enter-distance: .2rem; --motion-enter-name: motionEnter; --sound-message-received: bell; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.05, 1); --chart-line-shape: angular; --chart-area-opacity: .3; --chart-material: printed; --chart-line-weight: 1.2; --chart-glow-strength: 0; --chart-wash-opacity: 0.12; --chart-grid-opacity: 0.25; --chart-marker-shape: diamond; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: var(--border-strong); --chart-frame-texture: var(--surface-card-texture); --chart-plot-surface: transparent; --chart-plot-texture: repeating-linear-gradient(0deg, transparent, transparent 1.9rem, color-mix(in srgb, var(--text-primary) 5%, transparent) 1.9rem, color-mix(in srgb, var(--text-primary) 5%, transparent) 2rem); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-dense); --chart-bar-texture: repeating-linear-gradient(135deg, transparent, transparent .2rem, color-mix(in srgb, var(--surface-card) 70%, transparent) .2rem, color-mix(in srgb, var(--surface-card) 70%, transparent) .3rem); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #555B51; --chart-series-3: #877044; --chart-series-4: #6B7585; --chart-series-5: #965E6A; --chart-series-6: #647D72; --stage-ground: #E9E4D9; --stage-plate-ink: #293632; --stage-prop: #626762; --stage-prop-lit: #343E3B; --landing-eyebrow-case: none; } :root[data-theme="retro"][data-mode="dark"] { --surface-page: #151310; --surface-card: #26241F; --surface-raised: #26241F; --surface-sunken: #0E0C0A; --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: #E67C67; --text-brand: #E67C67; --text-accent: #E67C67; --text-success: #7FA856; --text-warning: #D9A24E; --text-danger: #F36E86; --text-partial: #D98A78; --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: #F2607A; --status-partial: #D98A78; --status-info: #A8A294; --focus-ring-color: #E2674F; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .225rem; --icon-cap: butt; --icon-join: miter; --font-display: 'Fraunces', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-mono: 'Courier New', monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.35); --border-highlight: rgba(242, 241, 236, 0.06); --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem 0 rgba(0, 0, 0, 0.40); --elevation-raised: 0 0.1rem 0 rgba(0, 0, 0, 0.30); --elevation-inset: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.25); --elevation-overlay: 0 0.2rem 0 rgba(0, 0, 0, 0.40); --elevation-glow: none; --elevation-surround: 0 0 0 .1rem rgba(242, 241, 236, 0.14); --chart-series-2: #CCC3AF; --chart-series-3: #A7AA91; --chart-series-4: #AE9D76; --chart-series-5: #92A1B3; --chart-series-6: #BA929D; --stage-ground: #24242B; --stage-plate-ink: var(--text-primary); --stage-prop: var(--text-secondary); --stage-prop-lit: var(--text-primary); } /* ── structural claims (decision 0014) ── */ /* Header-underline slot: the editorial section rule — a double hairline rule under section titles (newspaper section-head grammar; CSS `double` draws two equal lines), drawn in ink, not the accent, so it reads as typesetting rather than decoration. The 3px floor keeps it a double rule at the phone band's smaller root — below 3px, `double` collapses to a solid band. */ :root[data-theme="retro"] .pillboxWithHeading__title { border-bottom: max(.3rem, 3px) double var(--border-strong); /* intentional literal: `double` needs >=3px for two lines + gap; .3rem alone falls to 2px below root ~10px */ padding-bottom: var(--gap-tight); } /* Card/pillBox frame slot: the printed ledger-card rule — an ink hairline inset inside the card pad (regalia's negative-offset outline mechanism, ink instead of gold, tighter offset). Outline, not a positioned pseudo, per the 0014 external-layout invariant; excludes the zero-block-pad .chip (the rule would strike its label) and yields to :focus-visible so the app floor's focus ring wins on focusable pillBoxes. */ :root[data-theme="retro"] .pillBox:not(.chip):not(:focus-visible) { outline: .1rem solid var(--border-default); outline-offset: -.5rem; } /* Tile slot: night print is line-drawn — dark-mode tiles take the strong cream hairline instead of the faint default, matching the letterpress elevation language (rules, not lifts). */ :root[data-theme="retro"][data-mode="dark"] .tile:not([class*="__view-selected"]) { border-color: var(--border-strong); } /* Overlay sheet-edge slot: the newspaper masthead — every overlay sheet opens under a thick-thin rule pair, vintage red over an ink hairline. A paint layer (regalia's ::before mechanism): the sheet's box and its children's layout are untouched. */ :root[data-theme="retro"] .overlayPanel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: max(.4rem, 4px); /* intentional literal: the thick-thin pair needs 4 whole px — .4rem alone falls to 3.31px at the phone band's 8.29px root and the percentage stops go sub-pixel */ background: linear-gradient(to bottom, var(--brand-primary) 0 50%, transparent 50% 75%, var(--border-strong) 75% 100%); z-index: 1; } /* Search-field chrome slot (the 0014 amendment landing with this file): the base HUD parallelogram flattens to a letterpress field — square hairline input, red stamp button, decorative diagonals removed. The input/button boxes re-space because the base geometry overlaps them under the diagonals; the view's outer box is untouched (the amendment's invariant). */ :root[data-theme="retro"] .mainSearchBar__view::before, :root[data-theme="retro"] .mainSearchBar__view::after { content: none; } :root[data-theme="retro"] .mainSearchBar__input { clip-path: none; border: var(--border-width) solid var(--border-strong); background-color: var(--surface-card); border-radius: var(--radius-input); width: calc(100% - 1.4rem - max(4.5rem, var(--touch-target-primary))); right: calc(1.4rem + max(4.5rem, var(--touch-target-primary))); padding: .3rem var(--pad-dense); /* intentional literal: the .3rem vertical is the base rule's, kept so the input's outer box height is unchanged */ } :root[data-theme="retro"] .mainSearchBar__button { clip-path: none; border-radius: var(--radius-button); box-shadow: var(--elevation-button); } /* Masthead slot (ADR-0014 slot 10): a halftone screen over the cover's wash, the newspaper thick-thin rule pair under the row in ink; the lamp is a square inside an ink hairline. */ :root[data-theme="retro"] .mastheadCover__wash { background-image: radial-gradient(circle, rgba(0, 0, 0, .38) .08rem, transparent .12rem), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 55%, transparent), color-mix(in srgb, var(--brand-secondary) 40%, transparent)); background-size: .5rem .5rem, auto; } :root[data-theme="retro"] .mainHeader__view { border-bottom-color: transparent; background-image: linear-gradient(var(--text-primary), var(--text-primary)), linear-gradient(var(--text-primary), var(--text-primary)); background-size: 100% .3rem, 100% .1rem; background-position: 0 100%, 0 calc(100% - .5rem); background-repeat: no-repeat; } :root[data-theme="retro"] .onlineIndicator__lamp { border-radius: 0; outline: var(--border-width) solid var(--text-primary); outline-offset: .1rem; background-image: none; } /* --------------------------------------------------------------------------------------- * Retro picture lightbox (ADR-0014 slot 3) — the photo print: a paper border around the * picture under the letterpress offset, the tray sheet a heavy-ruled paper card, no glass. * ------------------------------------------------------------------------------------- */ :root[data-theme="retro"] .profileImageExpander__print, :root[data-theme="retro"] .profileImageExpander__initials { border: var(--pad-dense) solid var(--surface-card); border-radius: 0; background-color: var(--surface-card); outline: var(--border-width) solid var(--border-strong); outline-offset: 0; box-shadow: var(--elevation-overlay); } :root[data-theme="retro"] .profileImagesScrollArea__view { border: calc(var(--border-width) * 2) solid var(--border-strong); border-radius: 0; background-color: var(--surface-card); background-image: var(--surface-card-texture); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="retro"] .profileImageExpander__close, :root[data-theme="retro"] .profileImageExpander__step, :root[data-theme="retro"] .profileImagesScrollArea__imageFrame { border-radius: 0; } :root[data-theme="retro"] .profileImageExpander__close, :root[data-theme="retro"] .profileImageExpander__step { border-color: var(--border-strong); } /* --------------------------------------------------------------------------- Landing — the era's structural claim on the showroom demo tiles. The landing forces its own three eras (decision 13), so these live here rather than in the landing stylesheets (decision 0014). The shell axis rides along because the landing's own sheet now scores (0,3,0) too and imports later: without it these rules TIE and lose (#2506, gotchas/css.md CSS-35). --------------------------------------------------------------------------- */ :root[data-shell="landing"][data-theme="retro"] .realtime-space { border-width: .16rem; box-shadow: .352rem .352rem 0 var(--demo-line); /* intentional literal: retro's hard offset sticker edge in the demo's own line color — the era's voice, drawn in --demo-* rather than lifted off the shared ladder */ } :root[data-shell="landing"][data-theme="retro"] .realtime-space__identity { letter-spacing: .035em; } /** * ember.css — ember theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * Warm terminal: charcoal glass, copper edges and amber controls, with cyan * reserved for brand emphasis. Compact Space Mono typography and a restrained * hearth glow carry the same identity into the warm-paper light mode. * * 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 */ :root[data-theme="ember"] { --surface-page: #F2EEE8; --surface-card: rgba(255, 252, 247, 0.92); --surface-raised: #FFFCF7; --surface-sunken: #E9E1D7; --surface-hover: #EDE1D2; --surface-selected: #EDDDC9; --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: #665748; --text-on-brand: #18120A; --text-on-status: #F7F7F8; --text-disabled: #806B58; --text-link: #096A76; --text-brand: #096A76; --text-accent: #914E17; --text-success: #196C5D; --text-warning: #914E17; --text-danger: #BB193F; --text-partial: #196C5D; --border-default: rgba(137, 87, 43, 0.20); --border-strong: rgba(137, 87, 43, 0.45); --border-width: .1rem; --status-success: #1C7768; --status-warning: #A15719; --status-danger: #CF1B45; --status-partial: #1C7768; --status-info: #0A7582; --focus-ring-color: #C96C20; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: miter; --font-display: 'Space Mono', 'Courier New', monospace; --font-body: 'Space Mono', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; --radius-dense: .2rem; --radius-input: .3rem; --radius-button: .3rem; --radius-card: .6rem; --radius-sheet: .8rem; --radius-shell: 1rem; --radius-pill: .6rem; --radius-avatar: .6rem; --pad-cell: .4rem; --pad-dense: .6rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.4rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 1.2rem; --pad-sheet: 2rem; --pad-page: 1.6rem; --pad-shell: 2.8rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: 1rem; --gap-stack: 1.2rem; --gap-tile: 1.4rem; --gap-section: 1.4rem; --font-size-label: 1rem; --font-size-caption: 1.1rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.2rem; --font-size-stat: 2.6rem; --font-size-display: 3.2rem; --font-weight-body: 400; --font-weight-medium: 700; --font-weight-heading: 700; --font-weight-display: 700; --line-height-tight: 1.25; --line-height-body: 1.5; --line-height-relaxed: 1.6; --letter-spacing-display: -.025em; --letter-spacing-body: normal; --motion-fast: 140ms; --motion-base: 240ms; --motion-slow: 380ms; --motion-enter-distance: .3rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); --motion-enter-name: emberEnter; --sound-message-received: tick; --shadow-light-source: transparent; --shadow-dark-source: rgba(36, 24, 12, 0.16); --border-highlight: transparent; --surface-blur: blur(1rem); --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(36, 24, 12, 0.10); --elevation-raised: inset 0 0 0 .1rem var(--border-default), 0 .2rem .6rem -.2rem rgba(36, 24, 12, 0.08), 0 .6rem 1.6rem -.6rem var(--shadow-dark-source); --elevation-inset: inset 0 .1rem .2rem rgba(36, 24, 12, 0.10); --elevation-overlay: 0 .2rem .4rem rgba(36, 24, 12, 0.10), 0 1.2rem 2.8rem -.6rem rgba(36, 24, 12, 0.22); --elevation-glow: 0 0 .8rem rgba(224, 133, 58, 0.22); --elevation-surround: 0 0 .4rem rgba(36, 24, 12, 0.08), 0 0 1rem .1rem var(--shadow-dark-source); --surface-clip: none; --surface-page-backdrop: radial-gradient(ellipse at 50% 30%, rgba(255, 214, 170, 0.18) 0%, rgba(255, 214, 170, 0) 45%, rgba(140, 70, 20, 0.07) 100%); --surface-page-backdrop-size: cover; --surface-page-backdrop-repeat: no-repeat; --chart-line-shape: angular; --chart-area-opacity: .48; --chart-material: luminous; --chart-line-weight: 1.6; --chart-glow-strength: 0.9; --chart-wash-opacity: 0.26; --chart-grid-opacity: 0.13; --chart-marker-shape: ring; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--chart-series-1) 15%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--chart-series-2) 4%, transparent), transparent 60%); --chart-plot-surface: transparent; --chart-plot-texture: linear-gradient(0deg, color-mix(in srgb, var(--chart-series-1) 5%, transparent), transparent 75%); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-glow); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 50%, rgba(255, 255, 255, .65)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #316F73; --chart-series-3: #85608C; --chart-series-4: #967239; --chart-series-5: #AA5360; --chart-series-6: #62707D; } :root[data-theme="ember"][data-mode="dark"] { --surface-page: #110F0D; --surface-card: rgba(34, 29, 25, 0.94); --surface-raised: #2B241E; --surface-sunken: #191512; --surface-hover: #352A20; --surface-selected: #3B2B1E; --surface-overlay: rgba(9, 7, 5, 0.76); --surface-brandmark: #FFFFFF; --brand-primary: #25D8EC; --brand-secondary: #FF9D3D; --brand-accent: #FF9D3D; --text-primary: #F0E6DC; --text-secondary: #C2AE9B; --text-on-brand: #1A0F06; --text-on-status: #241B14; --text-disabled: #A08A76; --text-link: #25D8EC; --text-brand: #25D8EC; --text-accent: #FF9D3D; --text-success: #5FE3C7; --text-warning: #FFB347; --text-danger: #FF617E; --text-partial: #5FE3C7; --border-default: rgba(255, 181, 112, 0.18); --border-strong: rgba(255, 181, 112, 0.40); --border-width: .1rem; --status-success: #5FE3C7; --status-warning: #FFB347; --status-danger: #FF5C7A; --status-partial: #5FE3C7; --status-info: #25D8EC; --focus-ring-color: #FF9D3D; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: miter; --font-display: 'Space Mono', 'Courier New', monospace; --font-body: 'Space Mono', monospace; --font-mono: 'Space Mono', 'Courier New', monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.55); --border-highlight: rgba(255, 157, 61, 0.10); --surface-blur: blur(1rem); --elevation-flat: none; --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .2rem rgba(0, 0, 0, 0.50); --elevation-raised: inset 0 0 0 .1rem var(--border-default), inset 0 .1rem 0 var(--border-highlight), 0 .4rem 1.2rem -.4rem var(--shadow-dark-source); --elevation-inset: inset 0 .1rem .3rem rgba(0, 0, 0, 0.55); --elevation-overlay: 0 .4rem .8rem rgba(0, 0, 0, 0.50), 0 1.6rem 3.6rem -.8rem rgba(0, 0, 0, 0.70), 0 0 2rem rgba(255, 157, 61, 0.08); --elevation-glow: 0 0 1.2rem rgba(255, 157, 61, 0.22), inset 0 0 .6rem rgba(255, 157, 61, 0.08); --elevation-surround: 0 0 .4rem rgba(0, 0, 0, 0.50), 0 0 1.2rem .1rem rgba(255, 157, 61, 0.12); --surface-clip: none; --surface-page-backdrop: radial-gradient(ellipse at 50% 30%, rgba(255, 157, 61, 0.05) 0%, rgba(255, 157, 61, 0) 50%, rgba(0, 0, 0, 0.35) 100%); --chart-series-2: #62AFB3; --chart-series-3: #B98DC4; --chart-series-4: #D1B073; --chart-series-5: #D38E98; --chart-series-6: #8FA5B8; } @keyframes emberEnter { from { opacity: 0; transform: translateY(var(--motion-enter-distance)); } 55% { opacity: 1; } 75% { opacity: .94; } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { :root[data-theme="ember"] { --motion-enter-name: motionEnter; } } /* Masthead — structural slot 10 */ :root[data-theme="ember"] .mastheadCover__wash { background-image: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 16%, transparent), color-mix(in srgb, var(--brand-secondary) 24%, transparent)); } :root[data-theme="ember"] .mainHeader__view { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent, var(--brand-accent) 30%, var(--brand-accent) 70%, transparent); background-size: 100% .1rem; background-position: 0 100%; background-repeat: no-repeat; backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); } :root[data-theme="ember"] .onlineIndicator__header { font-family: var(--font-mono); } /** * elegant.css — elegant theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * A quiet botanical palette: eucalyptus, ivory, pale sage and warm taupe. * Fine serif headings, open spacing and matte paper surfaces carry the theme. * Dark mode pairs deep eucalyptus surfaces with soft ivory and sage ink. * * 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) */ :root[data-theme="elegant"] { --surface-page: #F8F9F6; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EFF2ED; --surface-hover: #E7EDE7; --surface-selected: #CCD6CD; --surface-overlay: rgba(30, 39, 32, 0.45); --surface-brandmark: #FFFFFF; --brand-primary: #526158; --brand-secondary: #847461; --brand-accent: #526158; --text-primary: #202420; --text-secondary: #505A52; --text-on-brand: #FFFFFF; --text-on-status: #FFFFFF; --text-disabled: #687168; --text-link: #3F5747; --text-brand: #3F5747; --text-accent: #655443; --text-success: #3F593D; --text-warning: #695025; --text-danger: #853F3A; --text-partial: #705034; --border-default: rgba(48, 61, 51, 0.10); --border-strong: rgba(48, 61, 51, 0.40); --border-width: .1rem; --status-success: #50694F; --status-warning: #81663B; --status-danger: #944F48; --status-partial: #856446; --status-info: #53686C; --focus-ring-color: #465A4B; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .125rem; --icon-cap: round; --icon-join: round; --font-display: 'Baskervville', Georgia, serif; --font-body: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --radius-dense: .2rem; --radius-input: .2rem; --radius-button: .2rem; --radius-card: 0; --radius-pill: .2rem; --radius-sheet: .4rem; --radius-shell: 0; --radius-avatar: 999rem; --pad-cell: .4rem; --pad-dense: .8rem; --pad-row: 1.2rem; --pad-input: 1.4rem; --pad-input-inline: 1.8rem; --pad-button: 1.2rem; --pad-button-inline: 2.6rem; --pad-card: 2.4rem; --pad-sheet: 2.8rem; --pad-page: 2.4rem; --pad-shell: 4rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.4rem; --gap-tile: 2rem; --gap-section: 2.2rem; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.7rem; --font-size-subheading: 2.5rem; --font-size-heading: 3rem; --font-size-stat: 3.75rem; --font-size-display: 4.5rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 400; --font-weight-display: 400; --line-height-tight: 1.3; --line-height-body: 1.6; --line-height-relaxed: 1.7; --letter-spacing-display: -.035em; --letter-spacing-body: .005em; --motion-fast: 220ms; --motion-base: 420ms; --motion-slow: 600ms; --motion-enter-distance: .6rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --motion-enter-name: motionEnter; --sound-message-received: chime; --shadow-light-source: transparent; --shadow-dark-source: rgba(30, 39, 32, 0.12); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: inset 0 .1rem .2rem rgba(30, 39, 32, 0.06); --elevation-overlay: 0 1.2rem 3.2rem rgba(30, 39, 32, 0.18); --elevation-glow: 0 0 1.2rem -.2rem rgba(70, 90, 75, 0.16); --elevation-surround: 0 0 .3rem rgba(30, 39, 32, 0.06), 0 .4rem 1.2rem var(--shadow-dark-source); --surface-page-backdrop: url('/assets/textures/elegant-laid-paper.svg'); --surface-page-backdrop-size: 18rem 18rem; --surface-page-backdrop-repeat: repeat; --surface-card-texture: url('/assets/textures/elegant-laid-paper.svg'); --surface-card-texture-size: 18rem 18rem; --surface-card-texture-repeat: repeat; --chart-line-shape: angular; --chart-area-opacity: .32; --chart-material: metallic; --chart-line-weight: 1.15; --chart-glow-strength: 0; --chart-wash-opacity: 0.13; --chart-grid-opacity: 0.1; --chart-marker-shape: diamond; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 35%, var(--border-default)); --chart-frame-texture: linear-gradient(120deg, color-mix(in srgb, var(--chart-series-1) 6%, transparent), transparent 35%, color-mix(in srgb, var(--chart-series-1) 4%, transparent)), var(--surface-card-texture); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(0deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .35) 45%, transparent 55%, rgba(255, 255, 255, .25)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #917456; --chart-series-3: #7B768F; --chart-series-4: #4F7B83; --chart-series-5: #9A6870; --chart-series-6: #6A7857; } :root[data-theme="elegant"][data-mode="dark"] { --surface-card-texture: url('/assets/textures/elegant-paper-grain-dark.svg'); --surface-page-backdrop: url('/assets/textures/elegant-paper-grain-dark.svg'); --surface-page: #17211E; --surface-card: #2C3933; --surface-raised: #36483E; --surface-sunken: #111B16; --surface-hover: #394F43; --surface-selected: #43594D; --surface-overlay: rgba(9, 17, 13, 0.72); --surface-brandmark: #FFFFFF; --brand-primary: #B8CBBE; --brand-secondary: #BCAD99; --brand-accent: #B8CBBE; --text-primary: #FAFCF9; --text-secondary: #C5D0C8; --text-on-brand: #1B2A21; --text-on-status: #1B2A21; --text-disabled: #A5B4AA; --text-link: #D4E4D8; --text-brand: #D4E4D8; --text-accent: #E2D2BC; --text-success: #BFDCB6; --text-warning: #E4C493; --text-danger: #FFC0B5; --text-partial: #E1C4A7; --border-default: rgba(230, 241, 233, 0.12); --border-strong: rgba(230, 241, 233, 0.36); --border-width: .1rem; --status-success: #ACCBB0; --status-warning: #DDC398; --status-danger: #E8AAA2; --status-partial: #CCB598; --status-info: #ACCDCB; --focus-ring-color: #D4E4D8; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .125rem; --icon-cap: round; --icon-join: round; --font-display: 'Baskervville', Georgia, serif; --font-body: 'Manrope', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(6, 15, 10, 0.32); --border-highlight: rgba(240, 248, 242, 0.05); --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: inset 0 .1rem .2rem rgba(6, 15, 10, 0.18); --elevation-overlay: 0 1.6rem 4rem rgba(6, 15, 10, 0.5); --elevation-glow: 0 0 1.2rem -.2rem rgba(184, 203, 190, 0.10); --elevation-surround: 0 0 .3rem rgba(12, 20, 15, 0.16), 0 .4rem 1.2rem var(--shadow-dark-source); --chart-series-2: #C1AA88; --chart-series-3: #A69CB8; --chart-series-4: #85ABB3; --chart-series-5: #C29BA0; --chart-series-6: #A5B594; } /* Card frames and section titles — ADR-0014 slots 1 and 4 */ :root[data-theme="elegant"] .pillBox:not(.chip) { border: var(--border-width) solid var(--border-default); } :root[data-theme="elegant"] .pillboxWithHeading__title { border-bottom-color: transparent; font-weight: var(--font-weight-display); font-size: var(--font-size-subheading); } /* Masthead — ADR-0014 slot 10 */ :root[data-theme="elegant"] .mastheadCover__view { background-color: var(--brand-primary); background-image: none; } :root[data-theme="elegant"] .mastheadCover__wash { background-image: var(--surface-card-texture), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 35%, transparent), color-mix(in srgb, var(--brand-secondary) 20%, transparent)); background-size: var(--surface-card-texture-size), auto; background-repeat: var(--surface-card-texture-repeat), no-repeat; } :root[data-theme="elegant"] .mainHeader__view { border-bottom-color: transparent; background-image: linear-gradient(var(--border-default), var(--border-default)); background-size: 100% var(--border-width); background-position: 0 100%; background-repeat: no-repeat; } :root[data-theme="elegant"] .onlineIndicator__lamp { border-radius: var(--radius-avatar); outline: var(--border-width) solid var(--border-strong); outline-offset: .2rem; } /* Picture lightbox — ADR-0014 slot 3 */ :root[data-theme="elegant"] .profileImageExpander__print, :root[data-theme="elegant"] .profileImageExpander__initials { outline: var(--border-width) solid var(--border-strong); outline-offset: var(--gap-inline); } :root[data-theme="elegant"] .profileImagesScrollArea__view, :root[data-theme="elegant"] .profileImageExpander__close:not(:focus-visible), :root[data-theme="elegant"] .profileImageExpander__step:not(:focus-visible) { outline: var(--border-width) solid var(--border-strong); outline-offset: calc(-1 * var(--gap-tight)); } /** * 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) */ :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: #F7F7F8; --text-disabled: #788192; --text-link: #1558E9; --text-brand: #1558E9; --text-accent: #1558E9; --text-success: #047351; --text-warning: #985404; --text-danger: #C61818; --text-partial: #BE2067; --border-default: #E5E7EB; --border-strong: #D1D5DB; --border-width: .1rem; --status-success: #047955; --status-warning: #A05804; --status-danger: #D21919; --status-partial: #C8226C; --status-info: #1F5FEA; --focus-ring-color: #2563EB; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: square; --icon-join: miter; --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; --radius-dense: .2rem; --radius-input: .4rem; --radius-button: .4rem; --radius-card: .4rem; --radius-pill: .4rem; --radius-sheet: .4rem; --radius-shell: .4rem; --radius-avatar: .4rem; --pad-cell: .4rem; --pad-dense: .6rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.4rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 1.2rem; --pad-sheet: 1.8rem; --pad-page: 1.6rem; --pad-shell: 2.4rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .6rem; --gap-inline: .8rem; --gap-stack: 1.2rem; --gap-tile: 1.2rem; --gap-section: 1.2rem; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.4rem; --font-size-stat: 3rem; --font-size-display: 3.6rem; --font-weight-body: 400; --font-weight-medium: 400; --font-weight-heading: 700; --font-weight-display: 700; --line-height-tight: 1.2; --line-height-body: 1.35; --line-height-relaxed: 1.5; --letter-spacing-display: normal; --letter-spacing-body: .01em; --motion-fast: 140ms; --motion-base: 250ms; --motion-slow: 380ms; --motion-enter-distance: 0rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --motion-enter-name: motionEnter; --sound-message-received: tick; --shadow-light-source: transparent; --shadow-dark-source: transparent; --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: none; --elevation-overlay: none; --elevation-glow: none; --elevation-surround: none; --chart-line-shape: angular; --chart-area-opacity: .3; --chart-material: precise; --chart-line-weight: 1.25; --chart-glow-strength: 0; --chart-wash-opacity: 0.1; --chart-grid-opacity: 0.1; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-flat); --chart-frame-surface: var(--surface-card); --chart-frame-border: var(--border-default); --chart-frame-texture: none; --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-flat); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: none; --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #65758D; --chart-series-3: #26817C; --chart-series-4: #985C89; --chart-series-5: #A8752C; --chart-series-6: #6B639C; } :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-on-status: #111827; --text-disabled: #657285; --text-link: #60A5FA; --text-brand: #5D8BF0; --text-accent: #5D8BF0; --text-success: #10B981; --text-warning: #F59E0B; --text-danger: #F15B5B; --text-partial: #ED549F; --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; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: square; --icon-join: miter; --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; --shadow-light-source: transparent; --shadow-dark-source: transparent; --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: none; --elevation-overlay: none; --elevation-glow: none; --elevation-surround: none; --chart-series-2: #A0AEC0; --chart-series-3: #6CBBB5; --chart-series-4: #C392B8; --chart-series-5: #D4AB6B; --chart-series-6: #A59EC8; } /* Masthead slot (ADR-0014 slot 10): the cover picture goes greyscale under a flat brand block; the row sits on the page colour under a strong hairline with no lift; the lamp is a flat square. */ :root[data-theme="minimalist"] .mastheadCover__wash { backdrop-filter: blur(1.6rem) grayscale(1); -webkit-backdrop-filter: blur(1.6rem) grayscale(1); background-image: linear-gradient(color-mix(in srgb, var(--brand-primary) 70%, transparent), color-mix(in srgb, var(--brand-primary) 70%, transparent)); } :root[data-theme="minimalist"] .mainHeader__view { background-color: var(--surface-page); border-bottom-color: var(--border-strong); box-shadow: none; } :root[data-theme="minimalist"] .onlineIndicator__lamp { border-radius: 0; background-image: none; } /** * fluid.css — Fluid theme: system typography, rounded surfaces and decelerating motion * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * @version 2026-September-16 Initial Version */ :root[data-theme="fluid"] { --surface-page: #F2F2F7; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #E7E7EE; --surface-hover: #F6F6F9; --surface-selected: #E1EBFB; --surface-overlay: rgba(17, 17, 26, .32); --surface-brandmark: #FFFFFF; --brand-primary: #0B62CE; --brand-secondary: #3B3FB8; --brand-accent: #0970D9; --text-primary: #11111A; --text-secondary: #55555F; --text-on-brand: #FFFFFF; --text-on-status: #FFFFFF; --text-disabled: #82828C; --text-link: #0B62CE; --text-brand: #0B62CE; --text-accent: #0A55B0; --text-success: #15612E; --text-warning: #7A4806; --text-danger: #A11F24; --text-partial: #543C9B; --border-default: rgba(17, 17, 26, .10); --border-strong: rgba(17, 17, 26, .22); --border-width: .1rem; --status-success: #1C7F3C; --status-warning: #9A5B08; --status-danger: #C0272D; --status-partial: #6A4FBF; --status-info: #0B62CE; --focus-ring-color: #0A6BD8; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .175rem; --icon-cap: round; --icon-join: round; --font-display: system-ui, -apple-system, 'Inter', sans-serif; --font-body: system-ui, -apple-system, 'Inter', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', monospace; --radius-dense: .8rem; --radius-input: 1rem; --radius-button: 1rem; --radius-card: 1.8rem; --radius-pill: 999rem; --radius-sheet: 2.4rem; --radius-shell: 2.8rem; --radius-avatar: 999rem; --pad-cell: .6rem; --pad-dense: .8rem; --pad-row: 1.2rem; --pad-input: 1.2rem; --pad-input-inline: 1.6rem; --pad-button: 1.2rem; --pad-button-inline: 2rem; --pad-card: 2rem; --pad-sheet: 2.4rem; --pad-page: 2rem; --pad-shell: 2.8rem; --gap-hairline: .2rem; --gap-tight: .6rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.2rem; --gap-tile: 1.6rem; --gap-section: 2.8rem; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.4rem; --font-size-stat: 3rem; --font-size-display: 3.6rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 600; --font-weight-display: 600; --line-height-tight: 1.2; --line-height-body: 1.5; --line-height-relaxed: 1.65; --letter-spacing-display: -.022em; --letter-spacing-body: 0em; --motion-fast: 160ms; --motion-base: 360ms; --motion-slow: 480ms; --motion-enter-distance: .8rem; --ease-standard: cubic-bezier(.32, .72, 0, 1); --ease-emphasized: cubic-bezier(.34, 1.26, .64, 1); --ease-enter: cubic-bezier(.2, .3, .3, 1); --motion-enter-name: fluidEnter; --sound-message-received: tick; --shadow-light-source: rgba(255, 255, 255, .9); --shadow-dark-source: rgba(17, 17, 26, .14); --border-highlight: rgba(255, 255, 255, .8); --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(17, 17, 26, .10); --elevation-raised: 0 .1rem .2rem rgba(17, 17, 26, .06), 0 .8rem 2.4rem -.6rem rgba(17, 17, 26, .16); --elevation-inset: inset 0 .1rem .2rem rgba(17, 17, 26, .10); --elevation-overlay: 0 .2rem .6rem rgba(17, 17, 26, .10), 0 2.4rem 5.6rem -1.2rem rgba(17, 17, 26, .28); --elevation-glow: 0 0 0 .4rem rgba(10, 132, 255, .22); --elevation-surround: 0 0 0 .1rem rgba(17, 17, 26, .08), 0 .4rem 1.6rem -.4rem rgba(17, 17, 26, .18); --surface-clip: none; --surface-page-backdrop-repeat: no-repeat; --surface-page-backdrop-size: cover; --surface-card-texture-repeat: no-repeat; --surface-card-texture-size: cover; --surface-page-backdrop: radial-gradient(120% 80% at 50% -10%, rgba(10, 132, 255, .10), transparent 60%); --surface-card-texture: none; --chart-line-shape: smooth; --chart-area-opacity: .42; --chart-material: glass; --chart-line-weight: 1.65; --chart-glow-strength: 0.45; --chart-wash-opacity: 0.23; --chart-grid-opacity: 0.08; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--chart-series-1) 14%, transparent), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 55%); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(110deg, rgba(255, 255, 255, .6), transparent 45%, rgba(0, 0, 0, .12)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #A35490; --chart-series-3: #367C96; --chart-series-4: #9B773F; --chart-series-5: #6F7F45; --chart-series-6: #6B66A7; } :root[data-theme="fluid"][data-mode="dark"] { --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .175rem; --icon-cap: round; --icon-join: round; --border-width: .1rem; --surface-blur: none; --surface-clip: none; --surface-page-backdrop-repeat: no-repeat; --surface-page-backdrop-size: cover; --surface-card-texture-repeat: no-repeat; --surface-card-texture-size: cover; --elevation-flat: none; --surface-page: #000000; --surface-card: #1C1C1E; --surface-raised: #2C2C2E; --surface-sunken: #121214; --surface-hover: #242427; --surface-selected: #15325E; --surface-overlay: rgba(0, 0, 0, .64); --surface-page-backdrop: radial-gradient(120% 80% at 50% -10%, rgba(10, 132, 255, .18), transparent 60%); --surface-card-texture: none; --brand-primary: #0A84FF; --brand-secondary: #7D74F2; --brand-accent: #64D2FF; --text-primary: #F4F4F7; --text-secondary: #A5A5AF; --text-disabled: #7D7D88; --text-on-brand: #0A0D12; --text-link: #5AB0FF; --text-brand: #5AB0FF; --text-accent: #64D2FF; --border-default: rgba(244, 244, 247, .14); --border-strong: rgba(244, 244, 247, .28); --status-success: #2FA95A; --status-warning: #D18A1E; --status-danger: #E0565B; --status-partial: #9B87E8; --status-info: #0A84FF; --text-success: #5FD68A; --text-warning: #EFB765; --text-danger: #FF9A9E; --text-partial: #C3B4FF; --text-on-status: #10131A; --shadow-light-source: rgba(255, 255, 255, .06); --shadow-dark-source: rgba(0, 0, 0, .7); --focus-ring-color: #4DA6FF; --elevation-raised: inset 0 .1rem 0 rgba(255, 255, 255, .06), 0 .2rem .4rem rgba(0, 0, 0, .5), 0 1.2rem 3.2rem -.8rem rgba(0, 0, 0, .7); --elevation-button: inset 0 .1rem 0 rgba(255, 255, 255, .07), 0 .1rem .2rem rgba(0, 0, 0, .5); --elevation-inset: inset 0 .1rem .3rem rgba(0, 0, 0, .6); --elevation-overlay: inset 0 .1rem 0 rgba(255, 255, 255, .07), 0 .4rem 1rem rgba(0, 0, 0, .55), 0 3.2rem 6.4rem -1.6rem rgba(0, 0, 0, .8); --elevation-surround: 0 0 0 .1rem rgba(244, 244, 247, .10), 0 .4rem 1.6rem -.4rem rgba(0, 0, 0, .6); --elevation-glow: 0 0 0 .4rem rgba(10, 132, 255, .34); --surface-brandmark: #FFFFFF; --border-highlight: rgba(255, 255, 255, .08); --chart-series-2: #D794C6; --chart-series-3: #79BDD3; --chart-series-4: #D8B575; --chart-series-5: #B3C48B; --chart-series-6: #AAA6DF; } @keyframes fluidEnter { from { opacity: 0; transform: translateY(calc(var(--motion-enter-distance) * 1.5)) scale(.96); } 40% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } } :root[data-theme="fluid"] .button:enabled:active { transform: scale(.97); transition-duration: var(--motion-fast); } @media (prefers-reduced-motion: reduce) { :root[data-theme="fluid"] { --motion-enter-name: motionEnter; } :root[data-theme="fluid"] .button:enabled:active { transform: 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 */ :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; --brand-primary: #2F62E6; --brand-secondary: #6E9BFF; --brand-accent: #2F62E6; --text-primary: #1B1D21; --text-secondary: #5C606B; --text-on-brand: #FFFFFF; --text-on-status: #F7F7F8; --text-disabled: #757B88; --text-link: #1B52E1; --text-brand: #1B52E1; --text-accent: #1B52E1; --text-success: #266D41; --text-warning: #835517; --text-danger: #BD181E; --text-partial: #B1295C; --border-default: rgba(255, 255, 255, 0.45); --border-strong: rgba(255, 255, 255, 0.70); --border-width: .1rem; --status-success: #2A7847; --status-warning: #925F1A; --status-danger: #D11B21; --status-partial: #C32D65; --status-info: #2B5FE6; --focus-ring-color: #2F62E6; --icon-accent: var(--brand-secondary); --icon-fill: rgba(47, 98, 230, 0.10); --icon-stroke-width: .2rem; --icon-cap: round; --icon-join: round; --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --radius-dense: .6rem; --radius-input: 1.2rem; --radius-button: 1.4rem; --radius-card: 2rem; --radius-pill: 999rem; --radius-sheet: 2.4rem; --radius-shell: 2.8rem; --radius-avatar: 999rem; --pad-cell: .4rem; --pad-dense: .8rem; --pad-row: 1.2rem; --pad-input: 1.2rem; --pad-input-inline: 1.6rem; --pad-button: 1.2rem; --pad-button-inline: 2.4rem; --pad-card: 2rem; --pad-sheet: 2.4rem; --pad-page: 2rem; --pad-shell: 3.2rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.6rem; --gap-tile: 2rem; --gap-section: 2rem; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.4rem; --font-size-stat: 3rem; --font-size-display: 3.6rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 600; --font-weight-display: 700; --line-height-tight: 1.25; --line-height-body: 1.55; --line-height-relaxed: 1.7; --letter-spacing-display: normal; --letter-spacing-body: normal; --motion-fast: 220ms; --motion-base: 400ms; --motion-slow: 560ms; --motion-enter-distance: .5rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --motion-enter-name: motionEnter; --sound-message-received: ping; --shadow-light-source: transparent; --shadow-dark-source: rgba(20, 24, 35, 0.18); --border-highlight: transparent; --surface-blur: blur(2rem); --elevation-flat: none; --elevation-button: 0 .2rem .6rem rgba(20, 24, 35, 0.12); --elevation-raised: 0 .8rem 3rem rgba(20, 24, 35, 0.18); --elevation-inset: inset 0 .1rem .3rem rgba(20, 24, 35, 0.10); --elevation-overlay: 0 1.4rem 4rem rgba(20, 24, 35, 0.26); --elevation-glow: 0 0 1.6rem -.2rem rgba(47, 98, 230, 0.35); --elevation-surround: 0 0 .6rem rgba(20, 24, 35, 0.10), 0 0 1.6rem .1rem var(--shadow-dark-source); --chart-line-shape: smooth; --chart-area-opacity: .42; --chart-material: glass; --chart-line-weight: 1.4; --chart-glow-strength: 0.35; --chart-wash-opacity: 0.22; --chart-grid-opacity: 0.1; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--chart-series-1) 14%, transparent), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 55%); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(110deg, rgba(255, 255, 255, .6), transparent 45%, rgba(0, 0, 0, .12)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #7762B5; --chart-series-3: #337C88; --chart-series-4: #A7618F; --chart-series-5: #A17B40; --chart-series-6: #5A7D62; } :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; --brand-primary: #6E9BFF; --brand-secondary: #A9C2FF; --brand-accent: #6E9BFF; --text-primary: #F0F2F6; --text-secondary: #AFB3BD; --text-on-brand: #0E1014; --text-on-status: #1B1D21; --text-disabled: #8D929E; --text-link: #8FB2FF; --text-brand: #8FB2FF; --text-accent: #8FB2FF; --text-success: #69C88D; --text-warning: #E4AE64; --text-danger: #FF9699; --text-partial: #E89DB9; --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; --icon-accent: var(--brand-secondary); --icon-fill: rgba(110, 155, 255, 0.14); --icon-stroke-width: .2rem; --icon-cap: round; --icon-join: round; --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.50); --border-highlight: rgba(255, 255, 255, 0.10); --surface-blur: blur(2rem); --elevation-flat: none; --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .2rem .6rem rgba(0, 0, 0, 0.40); --elevation-raised: inset 0 .1rem 0 var(--border-highlight), 0 .8rem 3rem rgba(0, 0, 0, 0.45); --elevation-inset: inset 0 .1rem .3rem rgba(0, 0, 0, 0.40); --elevation-overlay: inset 0 .1rem 0 rgba(255, 255, 255, 0.08), 0 1.4rem 4rem rgba(0, 0, 0, 0.55); --elevation-glow: 0 0 2rem -.2rem rgba(110, 155, 255, 0.35); --elevation-surround: 0 0 .6rem rgba(0, 0, 0, 0.45), 0 0 2rem .1rem var(--shadow-dark-source); --chart-series-2: #B59EE9; --chart-series-3: #79BDC8; --chart-series-4: #DDA3C8; --chart-series-5: #D7BA87; --chart-series-6: #A0C5A6; } /* Masthead slot (ADR-0014 slot 10): floating glass — a deeper blur on the cover picture, the translucent row blurred over the page with sheet corners and the raised shadow; the lamp is a pill. */ :root[data-theme="perspective"] .mastheadCover__wash { backdrop-filter: blur(2.4rem) saturate(1.2); -webkit-backdrop-filter: blur(2.4rem) saturate(1.2); } :root[data-theme="perspective"] .mainHeader__view { backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur); border-bottom-color: var(--border-highlight); border-radius: 0 0 var(--radius-sheet) var(--radius-sheet); box-shadow: var(--elevation-raised); } :root[data-theme="perspective"] .onlineIndicator__lamp { border-radius: var(--radius-pill); width: 1.4rem; } /** * power.css — power theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * Compact operations dashboard: indigo surfaces, warm orange actions and * IBM Plex Mono. Light mode uses warm mineral surfaces and burnt orange. * Activated by data-theme="power" and the optional data-mode="dark" gate. * Design rationale: knowledge-base/style/theme-voices.md. * * @version 2026-Jun-28 Initial deep-theming version (typeui power brief; monochrome) */ :root[data-theme="power"] { --surface-page: #F5F2ED; --surface-card: #FAF8F4; --surface-raised: #FFFFFF; --surface-sunken: #EBE7E0; --surface-hover: #EEE9E1; --surface-selected: #E6DED3; --surface-overlay: rgba(40, 28, 16, 0.34); --surface-brandmark: #FFFFFF; --brand-primary: #B84B1C; --brand-secondary: #6E665C; --brand-accent: #B84B1C; --text-primary: #221E1A; --text-secondary: #686057; --text-on-brand: #FFFFFF; --text-on-status: #FFFFFF; --text-disabled: #7F766B; --text-link: #AC3A0B; --text-brand: #AC3A0B; --text-accent: #A44408; --text-success: #126E35; --text-warning: #9E4908; --text-danger: #BD1F1F; --text-partial: #666157; --border-default: #DED8CF; --border-strong: #C4B9A9; --border-width: .1rem; --status-success: #15803D; --status-warning: #B45309; --status-danger: #DC2626; --status-partial: #7B7469; --status-info: #B8460F; --focus-ring-color: #B8460F; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: round; --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-dense: .4rem; --radius-input: .8rem; --radius-button: .8rem; --radius-card: 1.2rem; --radius-pill: 999rem; --radius-sheet: 1.6rem; --radius-shell: 1.2rem; --radius-avatar: 999rem; --pad-cell: .4rem; --pad-dense: .6rem; --pad-row: 1rem; --pad-input: 1rem; --pad-input-inline: 1.4rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 1.6rem; --pad-sheet: 1.8rem; --pad-page: 1.6rem; --pad-shell: 2.4rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .6rem; --gap-inline: .8rem; --gap-stack: 1rem; --gap-tile: 1.2rem; --gap-section: 1.6rem; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.4rem; --font-size-stat: 3rem; --font-size-display: 3.6rem; --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; --letter-spacing-display: -.01em; --letter-spacing-body: normal; --motion-fast: 100ms; --motion-base: 180ms; --motion-slow: 300ms; --motion-enter-distance: .1rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.1, 1); --motion-enter-name: motionEnter; --sound-message-received: tick; --shadow-light-source: rgba(255, 255, 255, 0.90); --shadow-dark-source: rgba(60, 40, 20, 0.18); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(60, 40, 20, 0.08); --elevation-raised: 0 0 0 .1rem var(--border-default), 0 .3rem 1.2rem rgba(60, 40, 20, 0.06); --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); --elevation-surround: 0 0 .4rem rgba(60, 40, 20, 0.10), 0 0 1.2rem .1rem var(--shadow-dark-source); --chart-line-shape: smooth; --chart-area-opacity: .44; --chart-material: signal; --chart-line-weight: 1.6; --chart-glow-strength: 0; --chart-wash-opacity: 0.2; --chart-grid-opacity: 0.22; --chart-marker-shape: square; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: linear-gradient(90deg, color-mix(in srgb, var(--chart-series-1) 8%, transparent), transparent 60%); --chart-plot-surface: transparent; --chart-plot-texture: repeating-linear-gradient(0deg, transparent, transparent .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .4rem); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-flat); --chart-mark-radius: var(--radius-dense); --chart-bar-texture: repeating-linear-gradient(135deg, transparent, transparent .3rem, rgba(255, 255, 255, .35) .3rem, rgba(255, 255, 255, .35) .4rem); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #427B73; --chart-series-3: #796D89; --chart-series-4: #92783F; --chart-series-5: #5F7791; --chart-series-6: #9A6161; } :root[data-theme="power"][data-mode="dark"] { --surface-page: #191B2B; --surface-card: #24273C; --surface-raised: #2C3046; --surface-sunken: #141725; --surface-hover: #30344B; --surface-selected: #44332E; --surface-overlay: rgba(12, 14, 24, 0.72); --surface-brandmark: #FFFFFF; --brand-primary: #FF7A2E; --brand-secondary: #9496A8; --brand-accent: #FF7A2E; --text-primary: #F4F1EC; --text-secondary: #BDC0D0; --text-on-brand: #2B1400; --text-on-status: #221E1A; --text-disabled: #969BB3; --text-link: #FF7A2E; --text-brand: #FF7A2E; --text-accent: #FF7A2E; --text-success: #34D399; --text-warning: #FBBF24; --text-danger: #F87878; --text-partial: #B3B7C9; --border-default: rgba(213, 220, 255, 0.12); --border-strong: rgba(213, 220, 255, 0.24); --border-width: .1rem; --status-success: #34D399; --status-warning: #FBBF24; --status-danger: #F87171; --status-partial: #9496A8; --status-info: #7578F3; --focus-ring-color: #FF7A2E; --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: square; --icon-join: round; --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; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.50); --border-highlight: rgba(255, 255, 255, 0.08); --surface-blur: none; --elevation-flat: none; --elevation-button: inset 0 .1rem 0 var(--border-highlight), 0 .1rem .2rem rgba(0, 0, 0, 0.25); --elevation-raised: inset 0 .1rem 0 var(--border-highlight), 0 0 0 .1rem var(--border-default), 0 .4rem 1.6rem rgba(0, 0, 0, 0.20); --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); --elevation-surround: 0 0 .4rem rgba(0, 0, 0, 0.40), 0 0 1.6rem .1rem var(--shadow-dark-source); --surface-page-backdrop: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0) 60%); --chart-series-2: #8CAFA5; --chart-series-3: #ADA2BC; --chart-series-4: #C9B47F; --chart-series-5: #94B0CA; --chart-series-6: #D19D9D; } :root[data-theme="power"] .pillboxWithHeading__title { font-size: var(--font-size-caption); font-weight: var(--font-weight-heading); letter-spacing: .06em; text-transform: uppercase; } :root[data-theme="power"] .button-darkBackground:hover, :root[data-theme="power"] .button-darkBackground:focus-visible:not(.button-loading) { background-color: color-mix(in srgb, var(--brand-accent) 94%, var(--text-primary)); color: var(--text-on-brand); border-color: var(--brand-accent); } :root[data-theme="power"] .tabHeaderBar__view { --tabHeaderBar-indicator-background-color: var(--brand-accent); --tabHeaderBar-tab-hover-color: var(--text-accent); --tabHeaderBar-tab-selected-color: var(--text-accent); } :root[data-theme="power"] .mainSearchBar__view::before, :root[data-theme="power"] .mainSearchBar__view::after { content: none; } :root[data-theme="power"] .mainSearchBar__input { clip-path: none; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-input); box-shadow: var(--elevation-inset); width: calc(100% - 5.9rem); right: 5.9rem; padding: .3rem var(--pad-dense); /* intentional literal: preserve the base field's vertical geometry */ } :root[data-theme="power"] .mainSearchBar__input:focus-visible { border-color: var(--focus-ring-color); } :root[data-theme="power"] .mainSearchBar__button { clip-path: none; border-radius: var(--radius-button); box-shadow: var(--elevation-button); } :root[data-theme="power"] .mastheadCover__view { background-color: var(--surface-sunken); background-image: none; } :root[data-theme="power"] .mastheadCover__wash { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 10%, transparent) 0 .1rem, transparent .1rem 2.4rem), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-secondary) 10%, transparent) 0 .1rem, transparent .1rem 2.4rem), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 14%, transparent), color-mix(in srgb, var(--brand-secondary) 20%, transparent)); } :root[data-theme="power"] .mainHeader__view { background-color: var(--surface-card); border-bottom-color: var(--border-strong); box-shadow: var(--elevation-button); } :root[data-theme="power"] .onlineIndicator__lamp { border-radius: 0; } /** * regalia.css — regalia theme role-token overrides (deep theming) * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * Regalia: dark-first navy and ivory, rounded framed panels, restrained brass * rules, and finely drawn stationery icons. Playfair Display leads over Libre * Baskerville; light mode uses warm paper and navy ink. Framed panels stand * above a woven page texture. Accent fills are navy by day and ivory * by night, paired with contrasting ink; status hues remain distinct. * Structural paint stays in this file (decision 0014). * * @version 2026-August-31 Initial Version (#2042 — the eleventh theme) */ :root[data-theme="regalia"] { --surface-page: #F0EBE2; --surface-card: #FFFDF8; --surface-raised: #FFFFFF; --surface-sunken: #E8E0D3; --surface-hover: #F4EFE6; --surface-selected: #EAE2D4; --surface-overlay: rgba(18, 34, 56, 0.50); --surface-brandmark: #FFFFFF; --brand-primary: #122238; --brand-secondary: #34465B; --brand-accent: #122238; --text-primary: #122238; --text-secondary: #495363; --text-on-brand: #F2EBDD; --text-on-status: #FFFFFF; --text-disabled: #767D8F; --text-link: #6E5522; --text-brand: #122238; --text-accent: #122238; --text-success: #49613D; --text-warning: #884E21; --text-danger: #944536; --text-partial: #72563C; --border-default: rgba(18, 34, 56, 0.26); --border-strong: rgba(18, 34, 56, 0.36); --border-width: .1rem; --status-success: #5E7A4E; --status-warning: #9C5A26; --status-danger: #9E4A3C; --status-partial: #916E4D; --status-info: #34465B; --focus-ring-color: #6E5522; --icon-accent: var(--text-link); --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: butt; --icon-join: round; --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif; --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'Courier New', monospace; --radius-dense: .4rem; --radius-input: .8rem; --radius-button: .8rem; --radius-card: 1.6rem; --radius-pill: 1.6rem; --radius-sheet: 2rem; --radius-shell: .5rem; --radius-avatar: 999rem; --pad-cell: .4rem; --pad-dense: .7rem; --pad-row: 1.2rem; --pad-input: 1.3rem; --pad-input-inline: 1.6rem; --pad-button: 1.1rem; --pad-button-inline: 2.4rem; --pad-card: 2.4rem; --pad-sheet: 2.8rem; --pad-page: 2.4rem; --pad-shell: 4rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: .8rem; --gap-stack: 1.4rem; --gap-tile: 2rem; --gap-section: 2.6rem; --font-size-label: 1.1rem; --font-size-caption: 1.3rem; --font-size-body: 1.4rem; --font-size-lead: 1.7rem; --font-size-subheading: 2.2rem; --font-size-heading: 3rem; --font-size-stat: 3.6rem; --font-size-display: 4.4rem; --font-weight-body: 400; --font-weight-medium: 700; --font-weight-heading: 500; --font-weight-display: 400; --line-height-tight: 1.25; --line-height-body: 1.65; --line-height-relaxed: 1.75; --letter-spacing-display: .015em; --letter-spacing-body: .01em; --motion-fast: 240ms; --motion-base: 460ms; --motion-slow: 680ms; --motion-enter-distance: .5rem; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.2, 1, 0.36, 1); --motion-enter-name: regaliaEnter; --sound-message-received: bell; --shadow-light-source: transparent; --shadow-dark-source: rgba(18, 34, 56, 0.16); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem .2rem rgba(18, 34, 56, 0.08); --elevation-raised: 0 .3rem 1.2rem rgba(18, 34, 56, 0.12); --elevation-inset: inset 0 .1rem .2rem rgba(18, 34, 56, 0.08); --elevation-overlay: 0 .1rem 0 rgba(18, 34, 56, 0.20), 0 1.2rem 2.6rem rgba(18, 34, 56, 0.26); --elevation-glow: 0 0 0 .2rem rgba(110, 85, 34, 0.30), 0 0 1.2rem -.2rem rgba(110, 85, 34, 0.42); --elevation-surround: 0 0 .3rem rgba(18, 34, 56, 0.10), 0 0 .8rem .1rem var(--shadow-dark-source); --surface-page-backdrop: repeating-linear-gradient(45deg, rgba(18, 34, 56, 0.035) 0 .1rem, transparent .1rem .4rem); --surface-page-backdrop-size: auto; --surface-page-backdrop-repeat: repeat; --chart-line-shape: smooth; --chart-area-opacity: .4; --chart-material: metallic; --chart-line-weight: 1.25; --chart-glow-strength: 0.15; --chart-wash-opacity: 0.19; --chart-grid-opacity: 0.16; --chart-marker-shape: diamond; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 35%, var(--border-default)); --chart-frame-texture: linear-gradient(120deg, color-mix(in srgb, var(--chart-series-1) 6%, transparent), transparent 35%, color-mix(in srgb, var(--chart-series-1) 4%, transparent)), var(--surface-card-texture); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(0deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .35) 45%, transparent 55%, rgba(255, 255, 255, .25)); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #947744; --chart-series-3: #4E7078; --chart-series-4: #836780; --chart-series-5: #A46451; --chart-series-6: #66734E; } :root[data-theme="regalia"][data-mode="dark"] { --surface-page: #080F1C; --surface-card: #1D2C40; --surface-raised: #25364A; --surface-sunken: #132236; --surface-hover: #2B3D53; --surface-selected: #1A3350; --surface-overlay: rgba(0, 0, 0, 0.60); --surface-brandmark: #FFFFFF; --brand-primary: #D8CBB1; --brand-secondary: #E8DDC8; --brand-accent: #D8CBB1; --text-primary: #EEE5D4; --text-secondary: #C1B6A2; --text-on-brand: #101D2D; --text-on-status: #0B1422; --text-disabled: #8C97A4; --text-link: #CFBB94; --text-brand: #CFBB94; --text-accent: #CFBB94; --text-success: #9EB787; --text-warning: #DEA66A; --text-danger: #DA9586; --text-partial: #BFA188; --border-default: rgba(216, 203, 177, 0.32); --border-strong: rgba(216, 203, 177, 0.52); --border-width: .1rem; --status-success: #7E9B62; --status-warning: #D08A3E; --status-danger: #CD6F5B; --status-partial: #B79579; --status-info: #8FA3CE; --focus-ring-color: #D8CBB1; --icon-accent: var(--text-link); --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: butt; --icon-join: round; --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif; --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'Courier New', monospace; --shadow-light-source: rgba(216, 203, 177, 0.06); --shadow-dark-source: rgba(0, 0, 0, 0.55); --border-highlight: rgba(216, 203, 177, 0.08); --surface-blur: none; --elevation-flat: none; --elevation-button: 0 .1rem .3rem rgba(0, 0, 0, 0.20); --elevation-raised: 0 .4rem 1.4rem rgba(0, 0, 0, 0.32); --elevation-inset: inset 0 .1rem .2rem rgba(0, 0, 0, 0.20); --elevation-overlay: 0 1.4rem 3rem rgba(0, 0, 0, 0.60); --elevation-glow: 0 0 0 .2rem rgba(216, 203, 177, 0.28), 0 0 1.4rem -.2rem rgba(216, 203, 177, 0.18); --elevation-surround: 0 0 0 .1rem rgba(216, 203, 177, 0.22), 0 0 1rem .1rem var(--shadow-dark-source); --surface-page-backdrop: repeating-linear-gradient(45deg, rgba(238, 229, 212, 0.035) 0 .1rem, transparent .1rem .4rem); --surface-page-backdrop-size: auto; --surface-page-backdrop-repeat: repeat; --chart-series-2: #A28C63; --chart-series-3: #86A7AC; --chart-series-4: #B9A0B6; --chart-series-5: #C39382; --chart-series-6: #A6B490; } /* ── structural claims (decision 0014) ── */ :root[data-theme="regalia"] .pillboxWithHeading__title { text-transform: uppercase; letter-spacing: .16em; font-family: var(--font-body); font-size: var(--font-size-caption); border-bottom: .1rem solid color-mix(in srgb, var(--text-link) 30%, transparent); padding-bottom: var(--gap-tight); } :root[data-theme="regalia"][data-mode="dark"] .tile:not([class*="__view-selected"]) { border-color: color-mix(in srgb, var(--brand-accent) 42%, transparent); } :root[data-theme="regalia"] .pillBox:not(.chip):not(:focus-visible) { outline: .1rem solid color-mix(in srgb, var(--text-link) 40%, transparent); outline-offset: -.5rem; } :root[data-theme="regalia"] .overlayPanel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--brand-primary) 0 .4rem, transparent .4rem); pointer-events: none; z-index: 1; } /* ── entrance (stately: rise, no bounce, long settle) ── */ @keyframes regaliaEnter { from { opacity: 0; transform: translateY(var(--motion-enter-distance)) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { :root[data-theme="regalia"] { --motion-enter-name: motionEnter; } } /* ── masthead (decision 0014, slot 10) ── */ :root[data-theme="regalia"] .mastheadCover__wash { background-image: linear-gradient(var(--text-link), var(--text-link)), var(--surface-page-backdrop), linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 55%, transparent), color-mix(in srgb, var(--surface-page) 40%, transparent)); background-size: 100% .1rem, auto, auto; background-position: 0 100%, 0 0, 0 0; background-repeat: no-repeat, repeat, no-repeat; } :root[data-theme="regalia"] .mainHeader__view { border-bottom-color: transparent; background-image: linear-gradient(var(--text-link), var(--text-link)), linear-gradient(var(--text-link), var(--text-link)); background-size: 100% .1rem, 100% .1rem; background-position: 0 100%, 0 calc(100% - .4rem); background-repeat: no-repeat; } :root[data-theme="regalia"] .onlineIndicator__lamp { border-radius: 0; rotate: 45deg; scale: .8; background-image: none; } /* --------------------------------------------------------------------------------------- * Regalia picture lightbox (ADR-0014 slot 3) — the gilt mat: one gold rule floats around the * print, the tray sheet and the discs carry the same rule. * ------------------------------------------------------------------------------------- */ :root[data-theme="regalia"] .profileImageExpander__print, :root[data-theme="regalia"] .profileImageExpander__initials { outline: var(--border-width) solid var(--text-link); outline-offset: var(--gap-tight); } :root[data-theme="regalia"] .profileImagesScrollArea__view, :root[data-theme="regalia"] .profileImageExpander__close, :root[data-theme="regalia"] .profileImageExpander__step { border-color: var(--text-link); } :root[data-theme="regalia"] .profileImagesScrollArea__view { border-top-width: calc(var(--border-width) * 2); } /** * neovision.css — NeoVision: the black-edition editorial poster. A true-black gallery * ground under light, wide, uppercase lettering, one hard diagonal cut on the masthead, * and no colour anywhere the task does not need it. Claims decision-0014 slots 1, 3, 4, * 5, 7, 8, 9 and 10; the structural blocks follow the two token blocks. * Rationale: knowledge-base/style/theme-voices.md § neovision. * * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * @version 2026-September-16 Graduated NeoVision from the style-board candidate */ :root[data-theme="neovision"] { --font-display: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-size-label: 1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.6rem; --font-size-subheading: 2rem; --font-size-heading: 2.8rem; --font-size-stat: 3.6rem; --font-size-display: 4.4rem; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-heading: 300; --font-weight-display: 200; --line-height-tight: 1.02; --line-height-body: 1.5; --line-height-relaxed: 1.7; --letter-spacing-display: -.03em; --letter-spacing-body: normal; --radius-dense: .4rem; --radius-input: 1.2rem; --radius-button: 1.2rem; --radius-card: 1.8rem; --radius-pill: 999rem; --radius-sheet: 2rem; --radius-shell: 2rem; --radius-avatar: 999rem; --pad-cell: .6rem; --pad-dense: .8rem; --pad-row: 1.2rem; --pad-input: 1rem; --pad-input-inline: 1.6rem; --pad-button: 1rem; --pad-button-inline: 2rem; --pad-card: 2.2rem; --pad-sheet: 2.6rem; --pad-page: 2.4rem; --pad-shell: 3.2rem; --gap-hairline: .2rem; --gap-tight: .4rem; --gap-dense: .8rem; --gap-inline: 1.2rem; --gap-stack: 1.2rem; --gap-tile: 1.6rem; --gap-section: 3.2rem; --border-width: .1rem; --focus-ring-width: .2rem; --focus-ring-offset: .3rem; --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: round; --icon-join: round; --elevation-flat: none; --elevation-button: none; --elevation-inset: none; --elevation-glow: none; --surface-blur: none; --surface-clip: none; --surface-page-backdrop: none; --surface-page-backdrop-repeat: no-repeat; --surface-page-backdrop-size: cover; --surface-card-texture-repeat: no-repeat; --surface-card-texture-size: cover; --border-highlight: transparent; --motion-fast: 140ms; --motion-base: 260ms; --motion-slow: 420ms; --motion-enter-distance: .8rem; --motion-enter-name: motionEnter; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --surface-page: #FFFFFF; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #F1F1EF; --surface-hover: #F4F4F2; --surface-selected: #E6E6E3; --surface-overlay: rgba(10, 10, 10, 0.55); --surface-brandmark: #FFFFFF; --surface-card-texture: none; --brand-primary: #0A0A0A; --brand-secondary: #4A4A4A; --brand-accent: #0A0A0A; --text-primary: #0A0A0A; --text-secondary: #555553; --text-disabled: #70706F; --text-on-brand: #FFFFFF; --text-on-status: #F7F7F5; --text-link: #0A0A0A; --text-brand: #0A0A0A; --text-accent: #0A0A0A; --text-success: #1D3A2C; --text-warning: #46330F; --text-danger: #571F1F; --text-partial: #392B3F; --border-default: #D5D5D2; --border-strong: #2E2E2E; --status-success: #2E5743; --status-warning: #6A4C1C; --status-danger: #7B2E2E; --status-partial: #53405A; --status-info: #33566B; --focus-ring-color: #0A0A0A; --shadow-light-source: rgba(255, 255, 255, 0.7); --shadow-dark-source: rgba(10, 10, 10, 0.12); --elevation-raised: none; --elevation-overlay: 0 2rem 6rem rgba(10, 10, 10, 0.18); --elevation-surround: 0 0 0 .1rem rgba(10, 10, 10, 0.12); --sound-message-received: tick; --chart-line-shape: smooth; --chart-area-opacity: .36; --chart-material: polished; --chart-line-weight: 1.6; --chart-glow-strength: 0; --chart-wash-opacity: 0.18; --chart-grid-opacity: 0.1; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: linear-gradient(145deg, color-mix(in srgb, var(--chart-series-1) 7%, transparent), transparent 65%); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35) 45%, transparent); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; --chart-series-2: #707070; --chart-series-3: #898989; --chart-series-4: #51515B; --chart-series-5: #7C7C8D; --chart-series-6: #8A8076; } :root[data-theme="neovision"][data-mode="dark"] { --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .15rem; --icon-cap: round; --icon-join: round; --elevation-flat: none; --elevation-button: none; --elevation-inset: none; --elevation-glow: none; --surface-blur: none; --border-highlight: transparent; --surface-page: #080808; --surface-card: #131313; --surface-raised: #1D1D1D; --surface-sunken: #000000; --surface-hover: #202020; --surface-selected: #2B2B2B; --surface-overlay: rgba(0, 0, 0, 0.82); --surface-brandmark: #FFFFFF; --surface-card-texture: none; --brand-primary: #FFFFFF; --brand-secondary: #8C8C8C; --brand-accent: #FFFFFF; --text-primary: #F5F5F3; --text-secondary: #A2A2A0; --text-disabled: #818180; --text-on-brand: #080808; --text-on-status: #101010; --text-link: #FFFFFF; --text-brand: #FFFFFF; --text-accent: #FFFFFF; --text-success: #A9CCB9; --text-warning: #D8BE94; --text-danger: #DFAFAF; --text-partial: #C4B2C8; --border-default: #2C2C2C; --border-strong: #7A7A7A; --status-success: #9CC2AE; --status-warning: #CDB187; --status-danger: #D5A4A4; --status-partial: #B8A5BC; --status-info: #A2B8C6; --focus-ring-color: #FFFFFF; --shadow-light-source: rgba(255, 255, 255, 0.04); --shadow-dark-source: rgba(0, 0, 0, 0.5); --elevation-raised: none; --elevation-overlay: 0 2rem 6rem rgba(0, 0, 0, 0.66); --elevation-surround: 0 0 0 .1rem rgba(255, 255, 255, 0.09); --chart-series-2: #A2A2A2; --chart-series-3: #757575; --chart-series-4: #B8B8C3; --chart-series-5: #8D8DAB; --chart-series-6: #BAADA0; } /* Poster voice — the top heading rung only (decision 0016's voice channel). */ :root[data-theme="neovision"] .heading-larger:not(.styleBoardLanding__headline) { font-weight: var(--font-weight-display); line-height: var(--line-height-tight); text-transform: uppercase; } :root[data-theme="neovision"] .heading { font-weight: var(--font-weight-heading); } /* Slots 1 + 2 — card/pillBox frame and tile: the opposing broad/tight pair under an inset hairline. */ :root[data-theme="neovision"] :is(.pillBox, .tile):not(.chip, .button) { border-radius: var(--radius-card) var(--radius-dense) var(--radius-card) var(--radius-dense); } :root[data-theme="neovision"] .pillBox:not(.chip, .button) { box-shadow: inset 0 0 0 var(--border-width) var(--border-default); } /* Slot 4 — header underline: the eyebrow over a short leading rule. */ :root[data-theme="neovision"] .pillboxWithHeading__title { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); text-transform: uppercase; letter-spacing: .16em; color: var(--text-secondary); border-bottom-color: transparent; background-image: linear-gradient(to right, var(--border-strong), var(--border-strong)); background-size: var(--gap-section) var(--border-width); background-position: left bottom; background-repeat: no-repeat; } /* Chips — tracked caps under the panel pair, stated at the button rung its box can carry. */ :root[data-theme="neovision"] .chip { border-radius: var(--radius-button) var(--radius-dense) var(--radius-button) var(--radius-dense); text-transform: uppercase; letter-spacing: .1em; } /* Slot 5 — standalone actions: capsules, holding out every member of a set. */ :root[data-theme="neovision"] .button:not(.tabHeaderBar__tab, .backgroundToggleBar__tab, .toggleButtonBar__button, .fileViewer__ladderStop, .worksheetToolbar__groupToggle__option, .threadSidePanel__threadTile, .styleBoard__segmentButton) { border-radius: var(--radius-pill); } /* Slot 3 — entity-image silhouette: the card-rung plate under an inset ring. */ :root[data-theme="neovision"] .entityImageAndName__img, :root[data-theme="neovision"] .entityImageAndName__imageNode, :root[data-theme="neovision"] .profileImageExpander__print, :root[data-theme="neovision"] .profileImageExpander__initials { border-radius: var(--radius-card); } :root[data-theme="neovision"] .entityImageAndName__imageNode::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); box-shadow: inset 0 0 0 var(--border-width) var(--border-strong); pointer-events: none; } /* Slot 7 — search field: the slanted ends cut back to a capsule pair. */ :root[data-theme="neovision"] .mainSearchBar__view::before, :root[data-theme="neovision"] .mainSearchBar__view::after { content: none; } :root[data-theme="neovision"] .mainSearchBar__input { clip-path: none; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-width) var(--border-default); width: calc(100% - 5.9rem); /* intentional literal: 4.5rem button + 1rem right inset + .4rem gap, matching the de-slanted search geometry */ right: 5.9rem; padding: .3rem var(--pad-input-inline); /* intentional literal: preserves the base input's vertical inset and outer height while removing its diagonal ends */ } :root[data-theme="neovision"] .mainSearchBar__button { clip-path: none; border-radius: var(--radius-pill); } /* Slot 8 — tab bar: tracked caps, the current item a solid ink pill. */ :root[data-theme="neovision"] .tabHeaderBar__view { --tabHeaderBar-rail-border-color: transparent; --tabHeaderBar-indicator-thickness: 0; --tabHeaderBar-tab-radius: var(--radius-pill); } :root[data-theme="neovision"] .tabHeaderBar__tab { font-weight: var(--font-weight-medium); letter-spacing: .06em; } :root[data-theme="neovision"] .tabHeaderBar__tab[aria-selected='true'] { background-color: var(--brand-accent); color: var(--text-on-brand); } /* Slot 9 — segmented status control: a capsule track and knob. */ :root[data-theme="neovision"] .multiStepSlider__view-text :is(.multiStepSlider__track-text, .multiStepSlider__knob) { border-radius: var(--radius-pill); } :root[data-theme="neovision"] .multiStepSlider__view-text .multiStepSlider__track-text { box-shadow: inset 0 0 0 var(--border-width) var(--border-default); } /* Slot 10 — masthead: the hard cut, unblurred; the dark arm restated on specificity. */ :root[data-theme="neovision"] .mainHeader__view { border-radius: 0 0 var(--radius-shell) var(--radius-shell); } :root[data-theme="neovision"] .mastheadCover__view { background-image: linear-gradient(112deg, var(--brand-primary) 0 52%, var(--brand-secondary) 52% 53.5%, var(--surface-sunken) 53.5%); } :root[data-theme="neovision"] .mastheadCover__wash, :root[data-theme="neovision"][data-mode="dark"] .mastheadCover__wash { backdrop-filter: none; -webkit-backdrop-filter: none; background-image: linear-gradient(112deg, color-mix(in srgb, var(--brand-primary) 84%, transparent) 0 52%, color-mix(in srgb, var(--brand-secondary) 90%, transparent) 52% 53.5%, color-mix(in srgb, var(--surface-sunken) 88%, transparent) 53.5%); } /** * dial.css — Dial theme: the weekDial instrument poster as a complete visual world * @author Francisco Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * One warm print-gray sheet, near-black ink, one signal orange spent on marks and * fills, mid-gray trace circles. Wallpoet casts the stencil on the theme-voice * --font-poster (the two large heading rungs and the lockup), B612 tells on every * display and body rung, B612 Mono measures. Flat print on .2rem working strokes: capsules and rounded * plates, no lift, the dial trace drawn as the page backdrop and the masthead cover. * Claims all ten decision-0014 slots; the structural blocks follow the two token * blocks. Rationale: knowledge-base/style/theme-voices.md § dial. * * @version 2026-September-18 Initial Version (#2466) */ :root[data-theme="dial"] { --surface-page: #DEDDD8; --surface-card: #EBEAE5; --surface-raised: #F2F1EC; --surface-sunken: #D0CFC9; --surface-hover: #D6D5CF; --surface-selected: #F1D6C2; --surface-overlay: rgba(22, 21, 19, 0.55); --surface-brandmark: #FFFFFF; --brand-primary: #E86A10; --brand-secondary: #F29A5E; --brand-accent: #E86A10; --text-primary: #161513; --text-secondary: #4E4D49; --text-on-brand: #161513; --text-on-status: #F2F1EC; --text-disabled: #74736E; --text-link: #8F3D05; --text-brand: #8F3D05; --text-accent: #8F3D05; --text-success: #244F2E; --text-warning: #5E3F00; --text-danger: #8E2418; --text-partial: #524290; --border-default: rgba(22, 21, 19, 0.30); --border-strong: #161513; --border-width: .2rem; --status-success: #285E36; --status-warning: #6E4A00; --status-danger: #9B2A1C; --status-partial: #5B4A98; --status-info: #3A5570; --focus-ring-color: #161513; --chart-gradient: linear-gradient(135deg, #E86A10 0%, #F29A5E 45%, #161513 100%); --scrollbar-thumb: var(--text-primary); --scrollbar-thumb-hover: var(--brand-accent); --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: butt; --icon-join: miter; --font-display: 'B612', 'Helvetica Neue', Arial, sans-serif; --font-poster: 'Wallpoet', 'B612', 'Arial Narrow', sans-serif; --font-body: 'B612', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'B612 Mono', 'Courier New', monospace; --font-size-label: 1.1rem; --font-size-caption: 1.2rem; --font-size-body: 1.4rem; --font-size-lead: 1.7rem; --font-size-subheading: 2.1rem; --font-size-heading: 2.7rem; --font-size-stat: 3.4rem; --font-size-display: 4.4rem; --font-weight-body: 400; --font-weight-medium: 700; --font-weight-heading: 400; --font-weight-display: 400; --line-height-tight: 1.1; --line-height-body: 1.6; --line-height-relaxed: 1.7; --letter-spacing-display: .04em; --letter-spacing-body: 0em; --radius-dense: .6rem; --radius-input: 1.2rem; --radius-button: 2.5rem; --radius-card: 1.6rem; --radius-sheet: 2.4rem; --radius-shell: 2.4rem; --radius-pill: 999rem; --radius-avatar: 999rem; --pad-cell: .6rem; --pad-dense: 1rem; --pad-row: 1.1rem; --pad-input: 1.2rem; --pad-input-inline: 1.6rem; --pad-button: 1rem; --pad-button-inline: 2.2rem; --pad-card: 2rem; --pad-sheet: 2.6rem; --pad-page: 2rem; --pad-shell: 3.2rem; --gap-hairline: .2rem; --gap-tight: .6rem; --gap-dense: .9rem; --gap-inline: 1rem; --gap-stack: 1.4rem; --gap-tile: 1.8rem; --gap-section: 2.4rem; --shadow-light-source: transparent; --shadow-dark-source: rgba(22, 21, 19, 0.30); --border-highlight: transparent; --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: inset 0 .2rem 0 rgba(22, 21, 19, 0.22); --elevation-overlay: 0 0 0 .2rem #161513; --elevation-glow: 0 0 0 .3rem rgba(232, 106, 16, 0.55); --elevation-surround: 0 0 0 .2rem rgba(22, 21, 19, 0.30); --surface-clip: none; --surface-page-backdrop: radial-gradient(circle at 100% 0%, transparent 27.8rem, #A6A49D 27.8rem, #A6A49D 28rem, transparent 28rem), radial-gradient(circle at 100% 0%, transparent 35.8rem, rgba(166, 164, 157, 0.55) 35.8rem, rgba(166, 164, 157, 0.55) 36rem, transparent 36rem), radial-gradient(circle at 100% 0%, transparent 21.5rem, #161513 21.5rem, #161513 22.5rem, transparent 22.5rem); --surface-page-backdrop-size: 100% 100%; --surface-page-backdrop-repeat: no-repeat; --surface-card-texture: none; --surface-card-texture-size: auto; --surface-card-texture-repeat: no-repeat; --motion-fast: 90ms; --motion-base: 160ms; --motion-slow: 260ms; --motion-enter-distance: .4rem; --motion-enter-name: dialEnter; --sound-message-received: tick; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --ease-enter: cubic-bezier(0.1, 0, 0.2, 1); --chart-line-shape: smooth; --chart-area-opacity: .4; --chart-material: signal; --chart-line-weight: 1.3; --chart-glow-strength: 0; --chart-wash-opacity: 0.16; --chart-grid-opacity: 0.22; --chart-marker-shape: square; --chart-label-font: var(--font-mono); --chart-frame-elevation: var(--elevation-flat); --chart-frame-surface: var(--surface-card); --chart-frame-border: color-mix(in srgb, var(--chart-series-1) 18%, var(--border-default)); --chart-frame-texture: linear-gradient(90deg, color-mix(in srgb, var(--chart-series-1) 8%, transparent), transparent 60%); --chart-plot-surface: transparent; --chart-plot-texture: repeating-linear-gradient(0deg, transparent, transparent .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .3rem, color-mix(in srgb, var(--chart-series-1) 4%, transparent) .4rem); --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-flat); --chart-mark-radius: var(--radius-dense); --chart-bar-texture: repeating-linear-gradient(135deg, transparent, transparent .3rem, rgba(255, 255, 255, .35) .3rem, rgba(255, 255, 255, .35) .4rem); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 9%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 1; --chart-series-2: #5D625C; --chart-series-3: #8A7653; --chart-series-4: #637B8B; --chart-series-5: #876673; --chart-series-6: #677D69; } :root[data-theme="dial"][data-mode="dark"] { --surface-page: #161513; --surface-card: #21201D; --surface-raised: #2A2926; --surface-sunken: #0E0D0C; --surface-hover: #2E2D29; --surface-selected: #4A2C17; --surface-overlay: rgba(0, 0, 0, 0.65); --surface-brandmark: #FFFFFF; --brand-primary: #E86A10; --brand-secondary: #DEDDD8; --brand-accent: #E86A10; --text-primary: #DEDDD8; --text-secondary: #B3B2AC; --text-on-brand: #161513; --text-on-status: #161513; --text-disabled: #8A8983; --text-link: #F5A66B; --text-brand: #F5A66B; --text-accent: #F5A66B; --text-success: #86C069; --text-warning: #E5B54D; --text-danger: #F28572; --text-partial: #B9A8F2; --border-default: rgba(222, 221, 216, 0.30); --border-strong: #DEDDD8; --border-width: .2rem; --status-success: #86C069; --status-warning: #E5B54D; --status-danger: #F28572; --status-partial: #B9A8F2; --status-info: #93B7E0; --focus-ring-color: #E86A10; --chart-gradient: linear-gradient(135deg, #E86A10 0%, #F29A5E 45%, #DEDDD8 100%); --scrollbar-thumb: var(--text-primary); --scrollbar-thumb-hover: var(--brand-accent); --icon-accent: var(--brand-accent); --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: butt; --icon-join: miter; --font-display: 'B612', 'Helvetica Neue', Arial, sans-serif; --font-poster: 'Wallpoet', 'B612', 'Arial Narrow', sans-serif; --font-body: 'B612', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'B612 Mono', 'Courier New', monospace; --shadow-light-source: transparent; --shadow-dark-source: rgba(0, 0, 0, 0.50); --border-highlight: rgba(222, 221, 216, 0.06); --surface-blur: none; --elevation-flat: none; --elevation-button: none; --elevation-raised: none; --elevation-inset: inset 0 .2rem 0 rgba(0, 0, 0, 0.45); --elevation-overlay: 0 0 0 .2rem rgba(222, 221, 216, 0.80); --elevation-glow: 0 0 0 .3rem rgba(232, 106, 16, 0.55); --elevation-surround: 0 0 0 .2rem rgba(222, 221, 216, 0.30); --surface-clip: none; --surface-page-backdrop: radial-gradient(circle at 100% 0%, transparent 27.8rem, rgba(222, 221, 216, 0.22) 27.8rem, rgba(222, 221, 216, 0.22) 28rem, transparent 28rem), radial-gradient(circle at 100% 0%, transparent 35.8rem, rgba(222, 221, 216, 0.12) 35.8rem, rgba(222, 221, 216, 0.12) 36rem, transparent 36rem), radial-gradient(circle at 100% 0%, transparent 21.5rem, rgba(222, 221, 216, 0.80) 21.5rem, rgba(222, 221, 216, 0.80) 22.5rem, transparent 22.5rem); --surface-page-backdrop-size: 100% 100%; --surface-page-backdrop-repeat: no-repeat; --surface-card-texture: none; --surface-card-texture-size: auto; --surface-card-texture-repeat: no-repeat; --chart-series-2: #C1BEB2; --chart-series-3: #99917E; --chart-series-4: #96B0C0; --chart-series-5: #BC9AA8; --chart-series-6: #9EB6A0; } :root[data-theme="dial"][data-viewport="phone"] { --surface-page-backdrop: radial-gradient(circle at 100% 0%, transparent 13.8rem, #A6A49D 13.8rem, #A6A49D 14rem, transparent 14rem), radial-gradient(circle at 100% 0%, transparent 17.8rem, rgba(166, 164, 157, 0.55) 17.8rem, rgba(166, 164, 157, 0.55) 18rem, transparent 18rem); } :root[data-theme="dial"][data-mode="dark"][data-viewport="phone"] { --surface-page-backdrop: radial-gradient(circle at 100% 0%, transparent 13.8rem, rgba(222, 221, 216, 0.22) 13.8rem, rgba(222, 221, 216, 0.22) 14rem, transparent 14rem), radial-gradient(circle at 100% 0%, transparent 17.8rem, rgba(222, 221, 216, 0.12) 17.8rem, rgba(222, 221, 216, 0.12) 18rem, transparent 18rem); } @keyframes dialEnter { from { opacity: 0; transform: translateY(var(--motion-enter-distance)) rotate(-1.2deg); } 55% { opacity: 1; } to { opacity: 1; transform: translateY(0) rotate(0deg); } } /* ── structural claims (decision 0014) ── */ :root[data-theme="dial"] .pillBox:not(.chip):not(.button):not(:focus-visible) { outline: var(--border-width) solid var(--border-strong); outline-offset: calc(-1 * var(--border-width)); } :root[data-theme="dial"] .tile:not(.chip):not(.button)[class*="__view-selected"] { background-color: var(--surface-selected); border-color: var(--border-strong); } :root[data-theme="dial"] .entityDisplayImage__view:not(:focus-visible) { outline: var(--border-width) solid var(--border-strong); outline-offset: calc(-1 * var(--border-width)); } :root[data-theme="dial"] .entityImageAndName__img, :root[data-theme="dial"] .entityImageAndName__imageNode { border-radius: var(--radius-avatar); } :root[data-theme="dial"] .entityImageAndName__imageNode:not(:has(.expandableEntityImage__view:focus-visible))::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; outline: var(--border-width) solid var(--border-strong); outline-offset: calc(-1 * var(--border-width)); background-image: radial-gradient(circle at 50% calc(100% - .9rem), var(--brand-accent) .4rem, transparent .5rem); } :root[data-theme="dial"] .profileImageExpander__print, :root[data-theme="dial"] .profileImageExpander__initials { outline: var(--border-width) solid var(--border-strong); outline-offset: 0; box-shadow: none; } :root[data-theme="dial"] .profileImagesScrollArea__view { border: var(--border-width) solid var(--border-strong); background-color: var(--surface-page); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dial"] .profileImagesScrollArea__imageFrame { border-radius: var(--radius-avatar); } :root[data-theme="dial"] .profileImageExpander__close:not(:focus-visible), :root[data-theme="dial"] .profileImageExpander__step:not(:focus-visible) { outline: var(--border-width) solid var(--border-strong); outline-offset: calc(-1 * var(--border-width)); } :root[data-theme="dial"] .pillboxWithHeading__title { display: flex; align-items: center; gap: var(--gap-tight); font-family: var(--font-body); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: .14em; border-bottom: var(--border-width) solid var(--text-primary); padding-bottom: var(--gap-tight); } :root[data-theme="dial"] .pillboxWithHeading__title::before { content: ''; flex: none; width: 1rem; height: .8rem; background-color: var(--brand-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); } :root[data-theme="dial"] .button { font-family: var(--font-body); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: .12em; } :root[data-theme="dial"] .button-lightBackground, :root[data-theme="dial"] .button-darkBackground { border-color: var(--border-strong); } :root[data-theme="dial"] .overlayPanel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .6rem; background-image: repeating-linear-gradient(135deg, var(--text-primary) 0 .3rem, transparent .3rem .7rem); z-index: 1; pointer-events: none; } :root[data-theme="dial"] .mainSearchBar__view::before, :root[data-theme="dial"] .mainSearchBar__view::after { content: none; } :root[data-theme="dial"] .mainSearchBar__input { clip-path: none; border: var(--border-width) solid var(--border-strong); background-color: var(--surface-card); border-radius: var(--radius-pill); width: calc(100% - 1.4rem - max(4.5rem, var(--touch-target-primary))); right: calc(1.4rem + max(4.5rem, var(--touch-target-primary))); padding: .3rem var(--pad-dense); /* intentional literal: the .3rem vertical is the base rule's, kept so the input's outer box height is unchanged */ } :root[data-theme="dial"] .mainSearchBar__input:focus-visible { border-color: var(--brand-primary); } :root[data-theme="dial"] .mainSearchBar__button { clip-path: none; border-radius: var(--radius-pill); } :root[data-theme="dial"] .tabHeaderBar__view { --tabHeaderBar-rail-border-color: var(--text-primary); --tabHeaderBar-indicator-background-color: var(--brand-accent); --tabHeaderBar-indicator-thickness: .4rem; --tabHeaderBar-indicator-radius: 0; --tabHeaderBar-tab-radius: var(--radius-pill); } :root[data-theme="dial"] .tabHeaderBar__tab { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; } :root[data-theme="dial"] .multiStepSlider__view-text .multiStepSlider__track-text { border-radius: var(--radius-pill); background-color: var(--surface-page); box-shadow: 0 0 0 var(--border-width) var(--border-strong); } :root[data-theme="dial"] .multiStepSlider__view-text .multiStepSlider__knob { border-radius: var(--radius-pill); background-color: var(--brand-accent); box-shadow: none; } :root[data-theme="dial"] .multiStepSlider__view-text .multiStepSlider__stopLabel { font-family: var(--font-mono); font-weight: var(--font-weight-body); text-transform: uppercase; letter-spacing: .1em; } :root[data-theme="dial"] .mastheadCover__view { background-image: none; background-color: var(--surface-sunken); } :root[data-theme="dial"] .mastheadCover__wash { backdrop-filter: none; -webkit-backdrop-filter: none; background-image: radial-gradient(circle at 84% 50%, var(--brand-accent) .5rem, transparent .6rem), radial-gradient(circle at 84% 50%, transparent 2.3rem, var(--text-primary) 2.3rem, var(--text-primary) 2.6rem, transparent 2.6rem), radial-gradient(circle at 84% 50%, transparent 3.9rem, var(--text-secondary) 3.9rem, var(--text-secondary) 4.1rem, transparent 4.1rem), linear-gradient(color-mix(in srgb, var(--surface-page) 84%, transparent), color-mix(in srgb, var(--surface-page) 84%, transparent)); } :root[data-theme="dial"] .mainHeader__view { border-bottom-color: var(--text-primary); } :root[data-theme="dial"] .onlineIndicator__lamp { border-radius: var(--radius-pill); background-image: none; box-shadow: 0 0 0 var(--border-width) var(--surface-page), 0 0 0 calc(2 * var(--border-width)) var(--text-primary); } :root[data-theme="dial"] .onlineIndicator__header { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; } /* ── voice claims (decision 0016) ── */ :root[data-theme="dial"] ::selection { background: var(--text-primary); color: var(--surface-page); } :root[data-theme="dial"][data-mode="dark"] ::selection { background: var(--brand-accent); color: var(--text-on-brand); } :root[data-theme="dial"] input, :root[data-theme="dial"] textarea, :root[data-theme="dial"] [contenteditable] { caret-color: var(--brand-accent); } :root[data-theme="dial"] .heading { font-family: var(--font-body); font-weight: var(--font-weight-medium); } :root[data-theme="dial"] .heading-large, :root[data-theme="dial"] .heading-larger { font-family: var(--font-poster); font-weight: var(--font-weight-display); text-transform: uppercase; } :root[data-theme="dial"] .chip, :root[data-theme="dial"] .chip .heading { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; } :root[data-theme="dial"] .chip { border-color: var(--border-strong); } :root[data-theme="dial"] .styleBoardScene__statValue, :root[data-theme="dial"] .taskEntryTile__total, :root[data-theme="dial"] .taskTile__timer, :root[data-theme="dial"] .teamMemberTile__timer, :root[data-theme="dial"] .taskProgressSummary__percentageValue, :root[data-theme="dial"] .taskProgressSummary__completedValue, :root[data-theme="dial"] .projectProgressSummary__percentageValue, :root[data-theme="dial"] .taskTimeSummary__remainingValue, :root[data-theme="dial"] .projectTimeSummary__timeLeftValue, :root[data-theme="dial"] .taskDeadlineSummary__daysLeftValue, :root[data-theme="dial"] .projectDeadlineSummary__daysLeftValue, :root[data-theme="dial"] .taskTimeSummary__total .headerWithSmallHeading__header, :root[data-theme="dial"] .taskTimeSummary__consumed .headerWithSmallHeading__header, :root[data-theme="dial"] .projectTimeSummary__total .headerWithSmallHeading__header, :root[data-theme="dial"] .projectTimeSummary__consumed .headerWithSmallHeading__header, :root[data-theme="dial"] .taskFinancialSummary__billed, :root[data-theme="dial"] .projectFinancialSummary__billed { font-family: var(--font-mono); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { :root[data-theme="dial"] { --motion-enter-name: motionEnter; } } /** * app.css * @author Francisco J. Medina * @copyright Seedbury Square, LLC. All Rights Reserved. * * @version 2026-July-03 Header backfilled (#605) */ /* 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); letter-spacing: var(--letter-spacing-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. The highlight badge fills with --brand-accent, not a status fill, so it inks the BRAND on-fill role — one ink per fill family, each gated against the fill it lands on. */ --Badge_On_Fill_Font_Color: var(--text-on-status); --Badge_Highlight_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. The floor is its own default set — since #2076 every theme, modern included, states its bespoke values over it. Signal: bare role = themeable; `--_` = fixed. See knowledge-base/style/architecture.md. ============================================================ */ /* --- 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: 999rem; --_space-0: 0; --_space-05: .2rem; --_space-1: .8rem; --_space-2: 1rem; --_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; floor 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; /* menus (derived roles — knowledge-base/style/tokens.md § Menus) */ --menu-surface: var(--surface-card); --menu-border-color: var(--border-default); --menu-elevation: var(--elevation-overlay); --menu-radius: var(--radius-card); --menu-option-hover: var(--surface-hover); --menu-option-selected: var(--surface-selected); --menu-check-ink: var(--text-accent); /* brand */ --brand-primary: #9D33F2; --brand-secondary: #7C3AED; --brand-accent: #E61542; /* text */ --text-primary: #3f4a5f; --text-secondary: #606273; --text-on-brand: #ffffff; --text-on-status: #F7F7F8; --text-disabled: #7E7E7E; --text-link: #8D11F0; --text-brand: #8D11F0; --text-accent: #C41238; /* 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; --text-success: #466C30; --text-warning: #95510C; --text-danger: #C41238; --text-partial: #BF1B48; /* border */ --border-default: rgba(0, 0, 0, .1); --border-strong: rgba(0, 0, 0, .2); --border-width: .1rem; /* status */ --status-success: #4C7534; --status-warning: #A1570D; --status-danger: #D2133C; --status-partial: #CD1D4E; --status-info: #1164DD; /* focus ring (a11y, themeable; width never < 2px per WCAG 2.4.11) */ --focus-ring-color: #297aef; --focus-ring-width: .2rem; --focus-ring-offset: .2rem; /* icon — drawn-glyph knobs. The three stroke knobs are INHERITED SVG presentation properties, so they pierce the shadow tree (icon.css consumes them); accent/fill are read by inline style="var(…)" layers inside the icon drawings. .2rem ≡ 2 SVG user units on the 24-grid at the 10px desktop root. Accent floors at currentColor so an un-themed icon stays monochrome and state-driven coloring (disabled, danger, selected nav) survives. */ --icon-accent: currentColor; --icon-fill: none; --icon-stroke-width: .2rem; --icon-cap: round; --icon-join: round; /* 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; --letter-spacing-display: normal; --letter-spacing-body: normal; /* 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. cyber/perspective 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); --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; --surface-page-backdrop: none; --surface-page-backdrop-size: cover; --surface-page-backdrop-repeat: no-repeat; --surface-card-texture: none; --surface-card-texture-size: auto; --surface-card-texture-repeat: repeat; /* 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%, #E61542 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; --chart-series-1: var(--brand-accent); --chart-series-2: #EB6834; --chart-series-3: #1BAF7A; --chart-series-4: #EDA100; --chart-series-5: #4A3AA7; --chart-series-6: #E87BA4; /* 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: 3.2rem; --touch-target-minimum: 2.4rem; /* control heights */ --control-height-smaller: 2.4rem; --control-height-small: 2.8rem; --control-height-medium: 3.2rem; --control-height-large: 3.6rem; --control-height-larger: 4rem; /* shell rhythm */ --shell-tab-row-height: calc(var(--control-height-medium) + var(--pad-page)); /* 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; --motion-enter-name: motionEnter; /* sound */ --sound-message-received: chime; --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; /* intentional literal: one row of buttons + gutter — consumed by DisplayOverlay's `peekHeight: '--nav-rail-peek-height'` and by viewManager.css's phone-band `:root[data-viewport="phone"] .viewManager__view` rule. */ --nav-rail-peek-height: 7.5rem; --chart-ideal: var(--chart-series-3); --chart-line-shape: smooth; --chart-area-opacity: .4; --chart-material: polished; --chart-line-weight: 1.4; --chart-glow-strength: 0; --chart-wash-opacity: .16; --chart-grid-opacity: .12; --chart-marker-shape: ring; --chart-label-font: var(--font-body); --chart-frame-elevation: var(--elevation-raised); --chart-frame-surface: var(--surface-card); --chart-frame-texture: linear-gradient(145deg, color-mix(in srgb, var(--chart-series-1) 5%, transparent), transparent 55%); --chart-frame-border: var(--border-default); --chart-plot-surface: transparent; --chart-plot-texture: none; --chart-plot-elevation: var(--elevation-flat); --chart-mark-elevation: var(--elevation-button); --chart-mark-radius: var(--radius-pill); --chart-bar-texture: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 45%, transparent); --chart-track-surface: color-mix(in srgb, var(--chart-series-1) 7%, transparent); --chart-track-elevation: var(--elevation-flat); --chart-ring-detail: 0; } /* 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-on-status: #0F0F12; --text-disabled: #7A7A7A; --text-link: #BE79F6; --text-brand: #BE79F6; --text-accent: #F26B88; --text-success: #85BB65; --text-warning: #F2A65A; --text-danger: #F26B88; --text-partial: #F19BB3; --border-default: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); --border-highlight: rgba(255, 255, 255, .06); /* status */ --status-success: #85BB65; --status-warning: #F2A65A; --status-danger: #EE4368; --status-partial: #F19BB3; --status-info: #297aef; --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; --chart-series-2: #D95926; --chart-series-3: #199E70; --chart-series-4: #C98500; --chart-series-5: #9085E9; --chart-series-6: #D55181; } #root { width: 100dvw; height: 100dvh; transition: all var(--transition-base), height 0s, width 0s; } /* ── The landing shell (`data-shell="landing"`) ── Written only for the landing view and removed for every other one, so the app chrome is the untouched no-attribute default and this block is the whole delta: hide the chrome the landing replaces, and hand the scroll back to the document. Handing back the scroll retracts the app-wide `overflow: hidden` that was the only thing stopping a page from scrolling behind an open modal, so the landing re-locks it for itself while one is open. See knowledge-base/domain/landing-page.md. */ :root[data-shell='landing'] { --nav-rail-peek-height: 0rem; } :root[data-shell='landing'] .application__mainHeader, :root[data-shell='landing'] .application__navigationRail, :root[data-shell='landing'] .application__sideDock { display: none; } :root[data-shell='landing'] body, :root[data-shell='landing'] #root { width: auto; height: auto; overflow: visible; } :root[data-shell='landing']:has(dialog[open]) body { overflow: hidden; } :root[data-shell='landing'] .application__view { display: block; width: auto; height: auto; min-height: 100dvh; } :root[data-shell='landing'] .viewManager__view, :root[data-shell='landing'] .viewManager__mainPanel { width: auto; height: auto; overflow: visible; padding-bottom: 0; } @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: 'Oxta'; src: url('./assets/fonts/Oxta.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 registered 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); } } @keyframes emptyStateDrawIn { from { opacity: 0; stroke-dasharray: 80; /* intentional literal: the dash length — every sprite stroke subpath measures under it (max 74), so each stroke finishes drawing before the release */ stroke-dashoffset: 80; } to { opacity: 0.4; stroke-dasharray: 80; stroke-dashoffset: 0; } } @keyframes onlineIndicatorBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @keyframes emojiBlink { 0%, 36%, 42%, 76%, 82%, 100% { transform: scaleY(1); } 39%, 79% { transform: scaleY(.12); } } @keyframes emojiLaugh { 0%, 15%, 80%, 100% { transform: scale(1); } 35%, 60% { transform: scale(1.08, .72); } 47%, 70% { transform: scale(.98, 1.05); } } @keyframes emojiSmile { 0%, 100% { transform: scale(1); } 40%, 65% { transform: scale(1.12, 1.15); } } @keyframes emojiWink { 0%, 25%, 70%, 100% { transform: scaleY(1); } 40%, 55% { transform: scaleY(.3); } } @keyframes emojiLove { 0%, 20%, 70%, 100% { transform: scale(1); } 32%, 52% { transform: scale(1.12, 1.08); } 42%, 62% { transform: scale(.98); } } @keyframes emojiTear { 0%, 100% { transform: translateY(0) scale(.9); opacity: 1; } 55% { transform: translateY(25%) scale(1); opacity: 1; } 75% { transform: translateY(50%) scale(.75); opacity: 0; } 76% { transform: translateY(-15%) scale(.65); opacity: 0; } } @keyframes emojiBrow { 0%, 100% { transform: translateY(0); } 35%, 65% { transform: translateY(-22%) rotate(-4deg); } } @keyframes emojiConsider { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-9deg) translateY(-6%); } } @keyframes emojiBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8, 1.2); } } @keyframes emojiHug { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-12deg) scale(1.08); } } @keyframes emojiGlint { 0%, 100% { transform: scale(.85); opacity: .75; } 45% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(.65); opacity: .4; } } @keyframes emojiThumb { 0%, 100% { transform: scaleY(1); } 40%, 65% { transform: scaleY(1.08) rotate(-5deg); } } @keyframes emojiFingers { 0%, 100% { transform: skewX(0); } 25%, 65% { transform: skewX(-9deg) scaleX(.96); } 45%, 80% { transform: skewX(6deg) scaleX(1.02); } } @keyframes emojiSignal { 0%, 100% { opacity: 1; } 45%, 65% { opacity: .35; } } @keyframes emojiClapBack { 0%, 70%, 100% { transform: rotate(0); } 25%, 50% { transform: translateX(-10%) rotate(-12deg); } 37%, 62% { transform: translateX(4%) rotate(4deg); } } @keyframes emojiClapFront { 0%, 70%, 100% { transform: rotate(0); } 25%, 50% { transform: translateX(12%) rotate(12deg); } 37%, 62% { transform: translateX(-4%) rotate(-4deg); } } @keyframes emojiPray { 0%, 100% { transform: rotate(0); } 45%, 65% { transform: rotate(4deg); } } @keyframes emojiFlame { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(.94, 1.06) skewX(3deg); } 65% { transform: scale(1.03, .92) skewX(-3deg); } } @keyframes emojiUnderline { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.85); } } @keyframes emojiConfetti { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; } 45% { transform: translate(8%, -12%) scale(1.12); opacity: 1; } 70% { transform: translate(12%, 10%) scale(1); opacity: 0; } 71% { transform: translate(-5%, 10%) scale(.75); opacity: 0; } } @keyframes emojiPupils { 0%, 15%, 100% { transform: translateX(0); } 30%, 50% { transform: translateX(-12%); } 65%, 85% { transform: translateX(6%); } } @keyframes emojiJaw { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(12%); } } @keyframes emojiEar { 0%, 65%, 100% { transform: rotate(0); } 30%, 50% { transform: rotate(10deg); } 40%, 60% { transform: rotate(-3deg); } } @keyframes emojiTongue { 0%, 100% { transform: scaleY(1); } 45%, 65% { transform: scaleY(1.2); } } @keyframes emojiCheck { 0%, 100% { transform: scale(1); } 45% { transform: scale(.85); } 65% { transform: scale(1.06); } } @keyframes emojiCross { 0%, 100% { transform: scale(1); } 35%, 65% { transform: scale(.88); } } @keyframes emojiLight { 0%, 100% { opacity: 1; } 45% { opacity: .65; } } @keyframes emojiBloom { 0%, 100% { transform: scale(1); } 45%, 65% { transform: scale(.88, .92); } } @keyframes emojiCheese { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.35); } } @keyframes emojiSteam { 0%, 100% { transform: translateY(0); opacity: .8; } 60% { transform: translateY(-25%) skewX(8deg); opacity: .25; } 75% { transform: translateY(-30%); opacity: 0; } 76% { transform: translateY(10%); opacity: 0; } } @keyframes emojiFoam { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } } @keyframes permissionCellSettle { from { background-color: var(--surface-selected); } to { background-color: transparent; } } @keyframes punchCardGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /** * 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) */ /* 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-color: transparent; background-image: none; } /* Establish a shared 3D context so card lifts read with perspective. */ html[data-depth="3d"] .application__view { perspective: 160rem; } /* ── 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 */ /* #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; left: 0; right: 0; top: 50%; /* intentional literal: fixed control dimensions, not spacing rhythm */ height: 2.4rem; translate: 0 -50%; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: var(--elevation-inset); } .toggle__knob { position: absolute; /* intentional literal: fixed control dimensions, not spacing rhythm */ width: 1.8rem; height: 1.8rem; left: .3rem; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--elevation-button); } .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__track { /* intentional literal: fixed control dimensions, not spacing rhythm */ 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: .1rem; height: .1rem; padding: 0; margin: -.1rem; /* 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; } .summary { list-style: none; cursor: pointer; } .summary::-webkit-details-marker { display: none; } .summary::marker { content: none; } .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); --icon-accent: currentColor; } .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-status); } .button-danger:hover, .button-danger:focus-visible:not(.button-loading) { background-color: transparent; color: var(--text-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