/*
* Aurora — OCM 2026 design tokens + base components.
*
* Mockup-only; not wired into the production app yet. The token names are
* the contract that every Aurora component will consume. Light + dark are a
* pure token swap on the same component CSS.
*/
/*
* The Inter @font-face declarations used to arrive here as
* `@import url("https://rsms.me/inter/inter.css")`. Two problems with
* that: it was a fifth third-party origin on the render path, and a CSS
* @import cannot be seen by the browser's preload scanner, so it only
* starts downloading after aurora.css has arrived and parsed. First
* paint waited on a serial round trip to a host nobody here controls.
*
* Inter is now vendored at js/vendor/inter/ and pulled in as a real
* ahead of this file, which the preload scanner can start
* immediately and in parallel. The three places that load aurora.css
* emit it: pl_aurora_asset_tags() in pika-danio.php, login-form.html and
* enroll-mfa.html. Add the link alongside aurora.css in any new one.
*/
:root {
color-scheme: light;
/* --- Neutral ramp (OKLCH) --- */
--gray-0: oklch(99% 0.002 270);
--gray-1: oklch(97% 0.003 270);
--gray-2: oklch(94% 0.004 270);
--gray-3: oklch(89% 0.005 270);
--gray-4: oklch(82% 0.006 270);
--gray-5: oklch(70% 0.008 270);
--gray-6: oklch(58% 0.010 270);
--gray-7: oklch(46% 0.012 270);
--gray-8: oklch(36% 0.013 270);
--gray-9: oklch(26% 0.012 270);
--gray-10: oklch(18% 0.010 270);
--gray-11: oklch(12% 0.008 270);
/* --- Brand accent --- one color, one job: action.
* Steps 2/4/8 were referenced by component sheets but never
* defined (second alias sweep, 2026-08-12) — interpolated
* between their neighbours. */
--accent-1: oklch(96% 0.04 250);
--accent-2: oklch(90% 0.07 250);
--accent-3: oklch(82% 0.10 250);
--accent-4: oklch(73% 0.13 250);
--accent-5: oklch(64% 0.16 250);
--accent-6: oklch(56% 0.18 250);
--accent-7: oklch(48% 0.18 250);
--accent-8: oklch(41% 0.16 250);
--accent-9: oklch(34% 0.14 250);
/* --- Semantic --- (warning-1/2/8 and danger-7: same story) */
--success-3: oklch(86% 0.10 150);
--success-6: oklch(58% 0.16 150);
--success-9: oklch(35% 0.12 150);
--warning-1: oklch(96% 0.05 80);
--warning-2: oklch(92% 0.09 80);
--warning-3: oklch(88% 0.12 80);
--warning-6: oklch(70% 0.16 80);
--warning-8: oklch(52% 0.14 80);
--warning-9: oklch(45% 0.13 80);
--danger-3: oklch(86% 0.10 25);
--danger-6: oklch(58% 0.20 25);
--danger-7: oklch(52% 0.19 25);
--danger-9: oklch(40% 0.16 25);
--info-3: oklch(88% 0.06 220);
--info-6: oklch(60% 0.14 220);
/* info-8/-9 (#374). The ramp stopped at -6, which is 3.63:1 on white —
* fine as a fill behind white text, but below AA as *text*. custom.css's
* .btn-outline-info therefore could not move onto the info ramp without
* undoing the #247 contrast fix, and kept its own hard-coded #0769a3
* (5.90:1) / #055880 (7.74:1). These two rungs land on the same numbers
* through the token layer: -8 = 5.92:1, -9 = 10.23:1 on white. */
--info-8: oklch(48% 0.13 220);
--info-9: oklch(35% 0.12 220);
/* --- Surfaces --- */
--surface-0: var(--gray-0); /* page background */
--surface-1: white; /* card / panel */
--surface-2: var(--gray-1); /* subtle inset */
--surface-3: var(--gray-2); /* hover */
--text-1: var(--gray-11); /* primary */
--text-2: var(--gray-8); /* secondary */
--text-3: var(--gray-7); /* tertiary / placeholder.
* #233: was gray-6 (4.29:1 on white,
* sub-AA). Bumped to gray-7 (~5.7:1)
* so .nav-label / .sidebar .count /
* .palette li .kind / .palette-foot
* (which is wired to text-2 already)
* all clear AA without each component
* having to opt into a darker token. */
--text-on-accent: white;
--border-subtle: var(--gray-2);
--border-default: var(--gray-3);
--border-strong: var(--gray-5);
/* --- Accent tints (#233) ---
* Selection / "active row" tints in components that need a soft
* accent wash behind text. Keeping these as semantic tokens means
* dark + high-contrast can pick a wash that actually reads against
* their darker / pure-white surfaces — which `--accent-1` (a near-
* white pale-blue) cannot do on either. The contract is the same
* for every theme: bg pairs with fg at AA contrast or better.
*
* Light theme: very pale accent wash + deep accent text.
* Dark theme: semi-transparent accent-6 wash + light accent text.
* HC theme: deep-accent inverse for unmistakable selection.
*/
--accent-soft-bg: var(--accent-1);
--accent-soft-fg: var(--accent-9);
/* Link color (#233). Was raw `var(--accent-7)` baked into the `a {}`
* rule. Promoting it to a token means dark mode can lighten the link
* without having to bump the whole accent ramp (which would knock
* over button + selection contrast). The companion --link-decoration
* token toggles the always-on underline. We default to "underline"
* across every theme — the WCAG 1.4.1 "link distinguishable from
* surrounding text" check needs 3:1 colour separation OR a non-
* colour cue, and our --link (accent-7) sits at only ~1.7:1 against
* --text-1 (gray-11) on white. Underline is the cheapest non-colour
* cue and reads as a link affordance everywhere. */
--link: var(--accent-7);
--link-hover: var(--accent-9);
--link-decoration: underline;
/* Semantic TEXT colours (#374). Distinct from both the raw --success-9 /
* --danger-9 rungs and the --badge-*-fg pair, and it is worth being
* explicit about why, because both of the obvious choices are wrong:
*
* - the -9 rung is a fixed dark green/red. Right on light, but it does
* not lighten for dark, where --surface-1 is gray-10 and the text
* lands at ~1.8:1.
* - --badge-*-fg assumes the matching --badge-*-bg is painted behind
* it. High-contrast sets those fg tokens to #ffffff (HC badges are
* solid blocks of colour), so borrowing one for *unfilled* text puts
* white on HC's white surface: 1:1, invisible.
*
* These two are for coloured text sitting directly on a page surface —
* an open/closed badge, an inline error. Each theme picks the rung that
* reads against its own --surface-1: -9 on light, -3 on dark, and the
* AA-darkened -6 on high-contrast. */
--text-success: var(--success-9);
--text-danger: var(--danger-9);
/* --text-info / --text-warning (#374). Same reason as the two above:
* the -8 rungs are correct as *text on a light surface* and as the
* *fill behind white text*, but those two jobs need opposite moves in
* dark theme. --info-8 on dark's --surface-1 is 3.18:1, below AA. The
* fills must stay on -8 (white text needs a dark fill), so the text
* role gets its own token that swaps to the light end of the ramp on
* dark. Light 5.92:1 / 5.58:1, dark 13.32:1 / 12.91:1, HC 7.94:1 /
* 7.54:1. */
--text-info: var(--info-8);
--text-warning: var(--warning-8);
/* Focus ring (#374). custom.css has painted the keyboard focus outline
* #ffbf47 (the GDS yellow) since before Aurora, in four places. It is
* deliberately non-semantic — a thick offset outline that has to read
* against the dark sidebar and the white content area alike — so it is
* its own token rather than a rung on the warning ramp. The value is
* unchanged in all three themes; promoting it to a token is what lets
* the polish pass (#372) retune it in one place. */
--focus-ring: #ffbf47;
/* Scrim — overlay/backdrop tint behind modals. Stays "darker than
* the page" in every theme so the layering always reads. */
--scrim: color-mix(in oklch, var(--gray-11) 50%, transparent);
/* Toast — inverse of body. Light → dark pill; dark → light pill;
* HC → black-on-white for max attention. Component-agnostic so the
* future "snackbar" / "command-bar tray" can reuse the same pair. */
--toast-bg: var(--gray-11);
--toast-fg: var(--gray-1);
/* Semantic badge tints (#233). The original .badge.* rules
* `color-mix(in oklch, var(--success-3) 50%, var(--surface-1))`
* give the right pastel on light, but on dark surface-1 the same
* mix produces a murky colour with poor text contrast. Promote
* each tint pair to a token so dark + HC can override the BG and
* FG independently of the parent surface. */
--badge-success-bg: color-mix(in oklch, var(--success-3) 50%, var(--surface-1));
--badge-success-fg: var(--success-9);
--badge-warning-bg: color-mix(in oklch, var(--warning-3) 50%, var(--surface-1));
--badge-warning-fg: var(--warning-9);
--badge-danger-bg: color-mix(in oklch, var(--danger-3) 50%, var(--surface-1));
--badge-danger-fg: var(--danger-9);
--badge-info-bg: color-mix(in oklch, var(--info-3) 50%, var(--surface-1));
--badge-info-fg: var(--gray-10);
/* Case-note highlighter marks (#374). `.yh` / `.ph` in custom.css are
* the marker-pen highlights that `pl.php` writes as
* from the [y] / [p] note tags. They are NOT badges: a badge is a pale
* wash behind small label text, a highlight has to shout. Mapping them
* onto --badge-*-bg would have faded #ffff44 to #ffe7bb and made a
* highlighted note harder to spot than an unhighlighted one, so they
* get their own token pair. Light keeps the historic marker colours
* exactly; dark dims the fill so it does not glare; both keep black
* text, because a marker is dark ink on bright colour.
* Contrast on the paired fg: light 19.64:1 / 8.16:1, dark 11.34:1 /
* 7.93:1, high-contrast 19.59:1 / 8.76:1. */
--mark-yellow-bg: #ffff44;
--mark-yellow-fg: #000000;
--mark-pink-bg: #ff7777;
--mark-pink-fg: #000000;
/* Inline foreground (#545). Bootstrap's own #d63384 measures
* 4.26:1 on the page surface and 3.5:1 inside an .alert — both under
* the 4.5:1 WCAG AA floor, and the alert case is where OCM actually
* shows code (file paths and setting values on System Settings).
* Keeping the magenta family so inline code still reads as code, but
* dark enough to clear the floor on the worst background we render it
* on: measured 7.19:1 on the .alert-secondary tint (#e2e3e5) and
* 8.76:1 on the page surface. */
--code-fg: oklch(42% 0.16 350);
/* Destructive outline-button label (#545). Bootstrap's resting
* .btn-outline-danger colour (#dc3545) measures 4.15:1 on the pop-up
* timer's whitesmoke page and ~4.5:1 on the Aurora page surface, so on the
* one button in the product that discards work it sits at or under the AA
* floor. Two steps darker in the same hue: 5.58:1 on whitesmoke, 5.77:1 on
* the Aurora page surface, 6.08:1 on a card. A token and not a literal
* because dark mode has to go the other way -- see the dark block. */
--danger-outline-fg: var(--danger-7);
/* ── Legacy token aliases (#273 / #277) ──────────────────────────
*
* The Aurora sub-stylesheets (aurora-saved-views.css,
* aurora-case-list-v2.css, aurora-calendar-v2.css, aurora-case-
* three-pane.css, aurora-quick-time-entry.css, aurora-form-
* components.css …) authored before the canonical token system
* landed referenced names like `--ocm-color-surface`, `--aurora-
* surface-alt`, `--ocm-bg-elevated`, `--aurora-text-muted`. None
* of those tokens were defined in :root, so every consumer fell
* through to the hard-coded light hex fallback (`#ffffff`,
* `#f6f7f9`, etc.). The end result was that saved-views
* toolbars, case-list rows, calendar grids, and quick-time-entry
* sheets all rendered with a permanent white background even
* when [data-theme="dark"] was active — illegible.
*
* Aliases here point each legacy name at the canonical token
* that actually theme-swaps. Light/dark/high-contrast all flow
* through automatically because --surface-* / --text-* /
* --border-* are the source of truth.
*/
--ocm-color-surface: var(--surface-1);
--ocm-color-surface-2: var(--surface-2);
--ocm-color-surface-hover: var(--surface-3);
--ocm-color-accent-soft: var(--accent-soft-bg);
--aurora-surface: var(--surface-1);
--aurora-surface-alt: var(--surface-2);
--aurora-surface-hover: var(--surface-3);
--aurora-border: var(--border-subtle);
--aurora-border-soft: var(--border-subtle);
--aurora-text: var(--text-1);
--aurora-text-muted: var(--text-3);
--aurora-accent: var(--accent-7);
--aurora-focus: var(--accent-6);
--aurora-danger: var(--danger-9);
--aurora-muted: var(--text-3);
--aurora-fg: var(--text-1);
--ocm-bg-default: var(--surface-1);
--ocm-bg-emphasis: var(--surface-2);
--ocm-bg-elevated: var(--surface-1);
--ocm-fg-default: var(--text-1);
--ocm-fg-muted: var(--text-2);
--ocm-border-default: var(--border-default);
--ocm-accent-default: var(--accent-7);
--ocm-accent-hover: var(--accent-6);
--ocm-success-default: var(--success-9);
--ocm-danger-default: var(--danger-9);
/* Second alias sweep (SCLO dark-mode report, 2026-08-12). The
* #273/#277 sweep above missed a batch of legacy names — a full
* consumed-vs-defined diff of cms/css found 39 names referenced
* only through their hard-coded light fallbacks, so those spots
* (the v2 calendar shell being the visible one) stayed white
* under [data-theme="dark"]. Every alias resolves to a canonical
* token so all three themes flow through. If you add a component
* stylesheet that consumes a NEW token name, define it here —
* a light-hex fallback is not a definition. */
--aurora-bg: var(--surface-0);
--aurora-fg-muted: var(--text-3);
--aurora-font: var(--font-sans);
--aurora-hover: var(--surface-3);
--aurora-primary: var(--accent-7);
--aurora-accent-fg: var(--text-on-accent);
--aurora-accent-soft: var(--accent-soft-bg);
--aurora-border-light: var(--border-subtle);
--aurora-danger-soft: var(--badge-danger-bg);
--aurora-row-active: var(--accent-soft-bg);
--aurora-success: var(--success-9);
--aurora-surface-fg: var(--text-1);
--aurora-surface-muted: var(--surface-2);
--aurora-surface-soft: var(--surface-2);
--aurora-warn-bg: var(--badge-warning-bg);
--border-1: var(--border-subtle);
--ocm-color-accent: var(--accent-6);
--ocm-color-border: var(--border-default);
--ocm-color-border-strong: var(--border-strong);
--ocm-color-danger: var(--danger-9);
--ocm-color-on-accent: var(--text-on-accent);
--ocm-color-success: var(--success-9);
--ocm-color-surface-3: var(--surface-3);
--ocm-color-surface-alt: var(--surface-2);
--ocm-color-text: var(--text-1);
--ocm-color-text-muted: var(--text-3);
/* Third alias sweep (#374). A consumed-vs-defined diff of custom.css
* turned up five more colour names that were only ever reached through
* their light-hex fallback — all of them on the intake-flow AI triage
* panel (#513), which therefore stayed a white card with grey text
* under [data-theme="dark"]. Same defect and same fix as the two
* sweeps above. Note that --ocm-cbh / --ocm-cbw / --ocm-flh / --ocm-flw
* are deliberately NOT listed: those four fall back to `auto` and are
* set per-element from an inline style, so a :root definition would
* override the default they are supposed to have. */
--ocm-border: var(--border-default);
/* --text-danger, not --danger-9 and not --badge-danger-fg:
* --ocm-danger is only ever unfilled error text on the triage panel.
* The -9 rung does not lighten on dark; --badge-danger-fg is #ffffff in
* high-contrast, invisible on that theme's white surface. */
--ocm-danger: var(--text-danger);
--ocm-primary: var(--accent-7);
--ocm-surface: var(--surface-1);
--ocm-text-muted: var(--text-3);
/* Scrollbar. custom.css has painted the page scrollbar since before
* Aurora and still names its own --thumbBG/--scrollbarBG, which held
* the pre-Aurora #7386D5 purple and a fixed light #CFD8DC track. Both
* now resolve through these two aliases so the scrollbar follows the
* theme like everything else. Track stays on --surface-2 in all three
* themes; the thumb re-points to a lighter accent rung under dark
* below, the same way --link does. */
--scrollbar-track: var(--surface-2);
--scrollbar-thumb: var(--accent-7);
/* Static aliases from the same sweep — sizing/radius/spacing
* names some component sheets consume. Mapped to the canonical
* scale where values match; --ocm-font-size-lg keeps its
* fallback value (1.25rem) rather than --text-lg (1.125rem) so
* nothing visibly changes. */
--ocm-font-size-sm: var(--text-base);
--ocm-font-size-lg: 1.25rem;
--ocm-radius: var(--radius-2);
--ocm-radius-sm: var(--radius-1);
--ocm-radius-md: var(--radius-2);
--ocm-radius-lg: var(--radius-3);
--ocm-space-1: var(--space-1);
--ocm-space-2: var(--space-2);
--ocm-space-3: var(--space-3);
--ocm-space-4: var(--space-4);
--ocm-space-5: var(--space-5);
/* Avatar — initials chip in the topbar. Was --accent-5 (3.35:1
* with white) which fell below AA for the 12-px initials. Bumped
* to --accent-6 (~4.6:1 on white) so all themes start AA-clean
* before their own dark/HC overrides kick in. */
--avatar-bg: var(--accent-6);
--avatar-fg: white;
/* --- Typography --- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
/* Type scale. Six steps: 12 / 14 / 18 / 22 / 28 / 36 px at the default
* 16px root.
*
* #548 removed two steps. The scale used to run 12 / 13 / 14 / 16 / 18 /
* 22 / 28 / 36, and 12-13-14 is not a scale — a 1px difference does not
* read as hierarchy, it only adds another distinct value to every screen
* that mixes secondary text with body text. The census on the four
* screens in that story counted 13px on 42-52 elements and 14px on
* 110-494, side by side, doing the same job.
*
* --text-sm was 0.8125rem (13px). Kept as a NAME, not a value: 46
* rules use it to mean "secondary text", and that intent is
* worth keeping in the source even though the size now
* matches body copy. Weight and colour carry the
* distinction instead.
* --text-md was 1rem (16px) and is GONE. Its three call sites (the
* command-palette input, .ocm-doc-preview-name and the form
* demo card heading) all wanted "a step above body", which
* is --text-lg. Bootstrap's own 1rem defaults — .form-control
* and .h6 — are retargeted in the base block below.
*
* rem throughout, never px: custom.css scales the root for the per-user
* text-size preference (html.ocm-font-small / -large / -xl), and px
* would freeze that accessibility setting. */
--text-xs: 0.75rem;
--text-base: 0.875rem;
--text-sm: var(--text-base);
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-base: 1.5;
/* --- Spacing (4-px base) --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* --- Radius --- */
--radius-1: 4px;
--radius-2: 8px;
--radius-3: 12px;
--radius-full: 9999px;
/* #548 — Bootstrap's radius scale, retargeted onto Aurora's.
*
* Bootstrap ships its own four-step scale (6 / 4 / 8 / 16 / 32 px and a
* 50rem pill) and every component reads it through these variables. It
* shares exactly one value with Aurora's, so any screen that mixes a
* Bootstrap control with an Aurora one showed both scales at once: the
* case screen rendered 6px inputs beside 8px nav items, 6px 6px 0 0 tabs,
* a 5px 5px 0 0 card header inside a 12px card, and an 800px pill badge
* next to a 9999px one. Fourteen distinct radii, from two scales that
* disagree by 1-2px everywhere.
*
* Pointing the Bootstrap variables at the Aurora tokens fixes every
* Bootstrap component at once and needs no per-component overrides.
* Aurora declares :root after the Bootstrap link, so these win at equal
* specificity.
*
* The card pair is set on `.card` further down this file rather than
* here: Bootstrap declares --bs-card-*-border-radius as local custom
* properties inside its own `.card` rule, so a :root value never
* reaches them. */
--bs-border-radius: var(--radius-2);
--bs-border-radius-sm: var(--radius-1);
--bs-border-radius-lg: var(--radius-2);
--bs-border-radius-xl: var(--radius-3);
--bs-border-radius-xxl: var(--radius-3);
--bs-border-radius-2xl: var(--radius-3);
--bs-border-radius-pill: var(--radius-full);
/* --- Elevation: borders first, shadows for floating only --- */
--shadow-1: 0 1px 0 rgb(0 0 0 / 0.04);
--shadow-2: 0 4px 12px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
--shadow-3: 0 16px 48px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.06);
/* #548: the fourth elevation. Not a neutral drop shadow — a tinted
* halo used only on the two brand-presence marks in the chrome, the
* sidebar brand square and the topbar avatar. It existed already, but
* written out twice in aurora-polish.css with slightly different blur
* radii (14px and 6px), so it counted as two distinct shadows on every
* screen. One token, one value, both call sites. */
--shadow-accent:
0 0 0 1px color-mix(in oklch, var(--accent-7) 25%, transparent),
0 2px 10px color-mix(in oklch, var(--accent-7) 30%, transparent);
/* --- Motion --- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 280ms;
/* --- Layout --- */
--sidebar-w: 240px;
--sidebar-w-collapsed: 56px;
--topbar-h: 48px;
--right-rail-w: 320px;
}
[data-theme="dark"] {
color-scheme: dark;
/* #233 dark tuning — surface ramp re-spaced so consecutive
* surfaces are visually distinct without leaving the dark range:
* surface-0 (page) → gray-11 (12% L) — unchanged
* surface-1 (panel) → gray-10 (18% L) — unchanged
* surface-2 (inset) → was gray-9 (26% L) = 8 L step on top of a
* 6 L step. Now at gray-8
* (36%) for an 18 L step,
* so cards on insets read
* as actual cards.
* surface-3 (hover) → gray-7 (46% L) — was gray-8; bumped one step
* to keep the hover lift
* readable against the new
* surface-2.
*/
--surface-0: var(--gray-11);
--surface-1: var(--gray-10);
--surface-2: var(--gray-8);
--surface-3: var(--gray-7);
--text-1: var(--gray-1);
--text-2: var(--gray-3); /* was gray-4 — pushed one step lighter
* (89% vs 82% L) so secondary text
* clears AA against surface-1. */
--text-3: var(--gray-4); /* was gray-6 (58% L → 3.2:1 on surface-1
* = below AA). gray-5 (70%) only got us
* to 3.7:1 against the new surface-2
* (gray-8); gray-4 (82%) lands at ~4.6:1
* which clears AA for the topbar
* search-trigger / nav-label / palette
* footer that all use --text-3 against
* --surface-2. */
--border-subtle: var(--gray-8); /* was gray-9 — bumped so panel
* edges actually appear against
* the new surface-2 (which is
* also gray-8). */
--border-default: var(--gray-7); /* was gray-8 — same reason */
--border-strong: var(--gray-5); /* was gray-6 — focus ring needs
* to read against everything */
--shadow-1: 0 1px 0 rgb(0 0 0 / 0.3);
--shadow-2: 0 4px 12px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.2);
--shadow-3: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.3);
/* #548: stronger mix in dark — a 30% accent glow disappears against a
* dark surface. */
--shadow-accent:
0 0 0 1px color-mix(in oklch, var(--accent-6) 40%, transparent),
0 2px 10px color-mix(in oklch, var(--accent-6) 45%, transparent);
/* Selection tints: --accent-1 (oklch 96% L) is a near-white wash
* that fades into surface-1 in dark mode. Use a transparent
* accent-6 mix instead so the wash is visible but not garish, and
* pair with accent-3 text for AA. Replaces the three
* `[data-theme="dark"] .foo.active` per-component overrides we used
* to ship — the architectural rule is "every variant comes from
* a token swap", and these are the tokens. */
--accent-soft-bg: color-mix(in oklch, var(--accent-6) 22%, transparent);
--accent-soft-fg: var(--accent-3);
/* Backdrop in dark mode: keep the dark scrim, but lean into pure
* black for a stronger blur edge. */
--scrim: color-mix(in oklch, #000 60%, transparent);
/* Toast inverts vs the page — dark theme → light pill. */
--toast-bg: var(--gray-1);
--toast-fg: var(--gray-11);
/* #545: the light-mode --code-fg is a dark magenta, invisible on a dark
* surface. Lift it to the same hue at high lightness — measured 10.3:1
* on surface-1. */
--code-fg: oklch(82% 0.10 350);
/* Darkening the danger label the way light mode does takes it from 4.16:1
* to 3.10:1 on this surface -- the wrong direction. Lift it instead:
* danger-3 measures 11.43:1 on surface-1 and 6.60:1 on the surface-2
* hover fill. */
--danger-outline-fg: var(--danger-3);
/* Semantic text (#374) — the -3 rungs are the light end of each ramp,
* which is what reads against dark's gray-10 --surface-1. */
--text-success: var(--success-3);
--text-danger: var(--danger-3);
--text-info: var(--info-3);
--text-warning: var(--warning-3);
/* Link colour — accent-7 in dark is too dim against surface-0
* (~3.18:1 fail). Lift to accent-3 (a light pastel blue) for
* AAA against the page. Hover then drops to accent-1 for the
* "I'm acting on this" cue. Underline always-on so the lifted
* link colour (which sits close to --text-1 at high L) still
* passes WCAG 1.4.1 link-distinguishable-from-surrounding-text. */
--link: var(--accent-3);
--link-hover: var(--accent-1);
--link-decoration: underline;
/* Badge tints — invert the convention in dark: dark wash + light
* text. The pastel `--success-3 50%` mix above produces a near-
* black murky colour on surface-1 in dark; replace with the same
* recipe but anchored on the dark accent + light text instead. */
--badge-success-bg: color-mix(in oklch, var(--success-6) 30%, var(--surface-1));
--badge-success-fg: var(--success-3);
--badge-warning-bg: color-mix(in oklch, var(--warning-6) 30%, var(--surface-1));
--badge-warning-fg: var(--warning-3);
--badge-danger-bg: color-mix(in oklch, var(--danger-6) 30%, var(--surface-1));
--badge-danger-fg: var(--danger-3);
--badge-info-bg: color-mix(in oklch, var(--info-6) 30%, var(--surface-1));
--badge-info-fg: var(--info-3);
/* Highlighter marks (#374) — dimmed fills, still dark ink. */
--mark-yellow-bg: oklch(80% 0.17 100);
--mark-pink-bg: oklch(72% 0.15 25);
/* Avatar — accent-7 (oklch 48%) brings the white initials to ~6:1. */
--avatar-bg: var(--accent-7);
--avatar-fg: white;
/* Scrollbar thumb. --accent-7 is 48% L and dark's --surface-2 track is
* gray-8 at 36% L, so the light-theme thumb would sit ~12 L off its own
* track and read as a smudge. Re-point to the rung --link uses here.
* The track alias needs no override: it rides --surface-2. */
--scrollbar-thumb: var(--accent-3);
}
/* --- High-contrast theme (#206) ----------------------------------------
* Pure-white surfaces with near-black text + borders so every component
* still passes WCAG AAA on the primary text pair (21:1) and AA on the
* accent / semantic ramps. Same token contract as light + dark — no
* component CSS changes required. The toggle in cms/js/aurora.js cycles
* light → dark → high-contrast, and `@media (prefers-contrast: more)`
* below opts users into this theme automatically when their OS asks.
*
* Pure black/white are kept as hex (#000 / #fff) — they are truly named
* colors that don't benefit from OKLCH's perceptual uniformity. Accent +
* semantic ramps stay in OKLCH so they sit in the same color space as
* the rest of the file.
*/
[data-theme="high-contrast"] {
color-scheme: light;
/* Surfaces: pure white. Subtle inset / hover stay white but rely on
* the heavier borders below for separation. */
--surface-0: #ffffff;
--surface-1: #ffffff;
--surface-2: #ffffff;
--surface-3: #f0f0f0;
/* Text: pure black primary, near-black secondary + tertiary. */
--text-1: #000000;
--text-2: #1a1a1a;
--text-3: #333333;
--text-on-accent: #ffffff;
/* Borders: black / dark-gray ramp so every panel edge is visible. */
--border-subtle: #666666;
--border-default: #333333;
--border-strong: #000000;
/* Accent: deep blue, ~12:1 against white (AA Large + AAA Normal). */
--accent-1: oklch(95% 0.04 255);
--accent-3: oklch(75% 0.12 255);
--accent-5: oklch(45% 0.18 255);
--accent-6: oklch(34% 0.18 255); /* ≈ #003a99 */
--accent-7: oklch(28% 0.18 255);
--accent-9: oklch(20% 0.14 255);
/* Semantic ramps: darken every -6 to AA-passing on white (≥ 4.5:1). */
--success-6: oklch(40% 0.16 150);
--success-9: oklch(28% 0.12 150);
--warning-6: oklch(45% 0.16 80);
--warning-9: oklch(35% 0.13 80);
--danger-6: oklch(40% 0.20 25);
--danger-9: oklch(30% 0.16 25);
--info-6: oklch(40% 0.16 220);
/* Shadows down — high-contrast users rely on borders, not shadows. */
--shadow-1: 0 0 0 1px #000000;
--shadow-2: 0 0 0 1px #000000;
--shadow-3: 0 0 0 2px #000000;
/* #548: no accent glow in high contrast — a tinted halo is exactly the
* cue these users cannot see. A solid 1px ring instead. */
--shadow-accent: 0 0 0 1px #000000;
/* #233 HC tuning — selection tint. The default `--accent-1`
* (`oklch(95% 0.04 255)` ≈ #e6ecff) on white is invisible: a
* sighted HC user sees no "this row is selected" cue. Flip the
* convention: dark accent-7 background with white text is an
* unambiguous selection state at any contrast level. AA-passing
* pair on every selected row / nav-item / palette match. */
--accent-soft-bg: var(--accent-7);
--accent-soft-fg: #ffffff;
/* Scrim must be opaque-enough to read against the pure-white
* surfaces under it. 70% black instead of the light-mode 50%. */
--scrim: color-mix(in oklch, #000 70%, transparent);
/* Semantic text (#374) — the -6 rungs above are already darkened to
* >= 4.5:1 on HC's pure-white surface, so they are the right rung for
* unfilled coloured text here. NOT --badge-*-fg, which is #ffffff in
* this theme and would vanish. */
--text-success: var(--success-6);
--text-danger: var(--danger-6);
--text-info: var(--info-6);
--text-warning: var(--warning-6);
/* Toast: black on white with a heavy border, same convention as
* every other surface in HC. The component CSS already ships the
* `--shadow-3` ring so the toast still floats visually. */
--toast-bg: #ffffff;
--toast-fg: #000000;
/* #545: HC keeps the code hue but pushes it to 13.6:1 on white. */
--code-fg: oklch(30% 0.16 350);
/* 13.22:1 on white. */
--danger-outline-fg: var(--danger-9);
/* Link colour. The light-mode default of accent-7 sits at ~12:1
* against pure white in HC (we already darkened the accent ramp
* for HC above), so just keep it pointing at the same token —
* but make hover go to pure-black for that "I-am-clicking-this"
* cue HC users rely on. Underline always-on per HC convention
* (link colour vs --text-1 = #000 only gets us ~2.5:1 distinct,
* below WCAG 1.4.1's 3:1 colour-only floor). */
--link: var(--accent-7);
--link-hover: #000000;
--link-decoration: underline;
/* Badge tints. The pastel `--*-3 50%` mix collapses to almost-
* white in HC (surface-1 is pure white). Use the AA-darkened
* `--*-6` ramp directly on the white surface with white text —
* solid blocks of colour, not a tint. */
--badge-success-bg: var(--success-6);
--badge-success-fg: #ffffff;
--badge-warning-bg: var(--warning-6);
--badge-warning-fg: #ffffff;
--badge-danger-bg: var(--danger-6);
--badge-danger-fg: #ffffff;
--badge-info-bg: var(--info-6);
--badge-info-fg: #ffffff;
/* Highlighter marks (#374) — maximum separation from body text. */
--mark-yellow-bg: oklch(97% 0.20 110);
--mark-pink-bg: oklch(78% 0.18 25);
/* Avatar — HC accent-7 (oklch 28%) gives white initials AAA. */
--avatar-bg: var(--accent-7);
--avatar-fg: #ffffff;
}
/* OS-level high-contrast preference → opt into the same token swap.
* Scoped to `:root:not([data-theme])` so an explicit user selection in
* the toggle (which writes data-theme=...) always wins over the OS hint. */
@media (prefers-contrast: more) {
:root:not([data-theme]),
[data-theme="auto"] {
color-scheme: light;
--surface-0: #ffffff;
--surface-1: #ffffff;
--surface-2: #ffffff;
--surface-3: #f0f0f0;
--text-1: #000000;
--text-2: #1a1a1a;
--text-3: #333333;
--text-on-accent: #ffffff;
--border-subtle: #666666;
--border-default: #333333;
--border-strong: #000000;
--accent-1: oklch(95% 0.04 255);
--accent-3: oklch(75% 0.12 255);
--accent-5: oklch(45% 0.18 255);
--accent-6: oklch(34% 0.18 255);
--accent-7: oklch(28% 0.18 255);
--accent-9: oklch(20% 0.14 255);
--success-6: oklch(40% 0.16 150);
--success-9: oklch(28% 0.12 150);
--warning-6: oklch(45% 0.16 80);
--warning-9: oklch(35% 0.13 80);
--danger-6: oklch(40% 0.20 25);
--danger-9: oklch(30% 0.16 25);
--info-6: oklch(40% 0.16 220);
--shadow-1: 0 0 0 1px #000000;
--shadow-2: 0 0 0 1px #000000;
--shadow-3: 0 0 0 2px #000000;
--shadow-accent: 0 0 0 1px #000000; /* #548 — see above */
/* #233 — match the explicit `[data-theme="high-contrast"]`
* block above so OS-level prefers-contrast users get the
* same selection / scrim / toast pairing without needing to
* pick a theme manually. */
--accent-soft-bg: var(--accent-7);
--accent-soft-fg: #ffffff;
--scrim: color-mix(in oklch, #000 70%, transparent);
--toast-bg: #ffffff;
--toast-fg: #000000;
--code-fg: oklch(30% 0.16 350);
--danger-outline-fg: var(--danger-9);
--link: var(--accent-7);
--link-hover: #000000;
--link-decoration: underline;
--badge-success-bg: var(--success-6);
--badge-success-fg: #ffffff;
--badge-warning-bg: var(--warning-6);
--badge-warning-fg: #ffffff;
--badge-danger-bg: var(--danger-6);
--badge-danger-fg: #ffffff;
--badge-info-bg: var(--info-6);
--badge-info-fg: #ffffff;
/* Highlighter marks (#374) — match the explicit HC block above. */
--mark-yellow-bg: oklch(97% 0.20 110);
--mark-pink-bg: oklch(78% 0.18 25);
--avatar-bg: var(--accent-7);
--avatar-fg: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--font-sans);
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--text-1);
background: var(--surface-0);
-webkit-font-smoothing: antialiased;
}
@supports (font-variation-settings: normal) {
body { font-family: "Inter var", var(--font-sans); }
}
/* #233: links carry a token-controlled --link-decoration so dark + HC
* can force the underline on (since their lifted link colours can't
* stay 3:1 distinct from the lifted body text, WCAG 1.4.1 requires a
* non-colour cue). Light defaults to underline too — the `--link`
* (accent-7) sits at only ~1.7:1 against `--text-1` so it can't
* stand on colour alone either. The tinted underline-color (60%
* mix toward transparent) keeps the rule visually weighted toward
* the link text rather than the rule itself. */
a {
color: var(--link);
text-decoration: var(--link-decoration);
text-underline-offset: 3px;
text-decoration-color: color-mix(in oklch, var(--link) 60%, transparent);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
/* ─────────────────────────────────────────────────────────────────────
* #548 — every element that carries a size names a step on the scale.
*
* The four screens the story measured rendered 11 to 15 distinct font
* sizes each. Most of those sizes were not authored anywhere: they were
* relative declarations multiplying through nested elements. On
* `admin-settings`, six of fifteen came out of three rules:
*
* 15.4 = 14 x 1.1 custom.css `p { font-size: 1.1em }` (removed)
* 12.25 = 14 x 0.875 Bootstrap `small`, `.small`, `.form-text`
* 13.475 = 15.4 x 0.875 `small` inside a `p`
* 12.6 = 14 x 0.9 `code, kbd, .mono` (this rule, was 0.9em)
* 11.025 = 12.25 x 0.9 `code` inside `small`
* 12.1275 = 13.475 x 0.9 `code` inside `small` inside `p`
* 10.5 = 14 x 0.75 Bootstrap `sub`, `sup` (on cal-adv)
*
* An absolute token cannot compound however deeply it nests, which is
* why these are tokens and not smaller `em` values. The rules live here
* rather than in custom.css because the --text-* tokens are defined in
* this file; custom.css also loads with aurora_chrome off, where they
* would not resolve.
*
* Equal specificity to Bootstrap's own bare-element rules is enough:
* pl_aurora_asset_tags() always emits aurora.css after the Bootstrap
* link, and aurora.css can never load without it.
* ───────────────────────────────────────────────────────────────────── */
small, .small, .form-text { font-size: var(--text-xs); }
sub, sup { font-size: var(--text-xs); }
/* Headings were straight Bootstrap: 40 / 32 / 28 / 24 / 20 / 16 px, a
* scale of its own that shares only one value with Aurora's. h1 at 40px
* also outranked .aurora-page-header__title (28px), the element that is
* actually the page title on every Aurora screen. h4-h6 land on body
* size and separate themselves by weight, which is what the section
* headings in this file already do. */
h1, .h1 { font-size: var(--text-2xl); }
h2, .h2 { font-size: var(--text-xl); }
h3, .h3 { font-size: var(--text-lg); }
h4, .h4,
h5, .h5,
h6, .h6 { font-size: var(--text-base); }
/* Bootstrap sizes .form-control and .form-select at 1rem (16px), which
* beat this file's `input, select, textarea { font: inherit }` on
* specificity — so every dropdown on a form rendered 2px larger than
* its own label. 87 of the 91 elements at 16px on the case screen were
* `option` elements inheriting it. */
.form-control, .form-select { font-size: var(--text-base); }
/* Bootstrap rounds a checkbox with `border-radius: .25em`, which is em-based,
* so it tracked the font size instead of the radius scale — 3.5px at 14px,
* on 120 checkboxes on the System Settings screen. The radio's 50% is a
* circle only because the control is square; --radius-full says that
* outright and matches every other pill in the product. */
.form-check-input[type="checkbox"] { border-radius: var(--radius-1); }
.form-check-input[type="radio"] { border-radius: var(--radius-full); }
code, kbd, .mono { font-family: var(--font-mono); font-size: var(--text-xs); }
/* #545: overrides Bootstrap's --bs-code-color (#d63384), which fails AA
* on both surfaces we render inline code on. kbd keeps its own treatment
* below. */
code { color: var(--code-fg); }
/* Neutralise Bootstrap's inverted .
*
* bootstrap.min.css ships `kbd { color: var(--bs-body-bg);
* background-color: var(--bs-body-color); }` — a white-on-near-black chip.
* Nothing in this app ever sets data-bs-theme, so --bs-body-bg stays #fff
* in light, dark AND high-contrast. Any component rule that restyles a
* kbd's *background* to a light surface but forgets `color` therefore
* inherits white text and renders white-on-white. Measured live:
* .aurora-search-overlay kbd was 1.19:1 (light) / 1.14:1 (high-contrast),
* .ocm-quick-time-entry__hint kbd was 1.09:1 / 1.00:1. AA needs 4.5:1.
*
* That is the same bug for the fourth time — #256 already patched
* .palette-foot kbd and .topbar .search-trigger kbd one at a time — so fix
* the class of bug here rather than chasing each new component. Component
* rules that set their own colour still win on specificity.
*
* Both properties are declared deliberately: dropping only `color` would
* leave Bootstrap's dark background under dark text, which is the same
* failure upside down. Equal specificity to Bootstrap's bare `kbd` is
* enough because pl_aurora_asset_tags() emits aurora.css after the
* Bootstrap CDN link, and aurora.css can never load without it. */
kbd {
color: var(--text-1);
background: var(--surface-2);
}
::selection { background: var(--accent-3); color: var(--gray-11); }
::-moz-selection { background: var(--accent-3); color: var(--gray-11); }
/* Force the high-contrast selection text colour onto links and their
children. Without an explicit a::selection, a selected link keeps its
own colour — e.g. Documents-tab file-name links are --accent-6 (blue),
which lands blue text on the light-blue (--accent-3) selection
background = unreadable when a user highlights a document name. */
a::selection, a *::selection { color: var(--gray-11); }
a::-moz-selection, a *::-moz-selection { color: var(--gray-11); }
:focus-visible {
outline: 2px solid var(--accent-6);
outline-offset: 2px;
border-radius: var(--radius-1);
}
/* --- App shell --- */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar main";
height: 100vh;
}
.topbar {
grid-area: topbar;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-5);
background: var(--surface-1);
border-bottom: 1px solid var(--border-subtle);
}
.topbar .search-trigger {
flex: 1;
max-width: 480px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--radius-2);
background: var(--surface-2);
color: var(--text-3);
font-size: var(--text-sm);
transition: background var(--dur-fast) var(--ease-out);
}
.topbar .search-trigger:hover { background: var(--surface-3); }
.topbar .search-trigger kbd {
margin-left: auto;
padding: 2px 6px;
background: var(--surface-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-1);
font-size: var(--text-xs); /* #548: was 11px, off the scale */
color: var(--text-2);
}
/* a11y (#210) — the topbar's real search form. It ships
* .visually-hidden-focusable, so Bootstrap clips it to 1px until it or a
* child takes focus; everything below only describes how it looks once
* revealed. Nothing here fights the hidden state (Bootstrap sets that
* with !important), so the pill above stays the only visible search
* affordance for mouse users. */
.topbar .aurora-topbar-search {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
max-width: 480px;
}
.topbar .aurora-topbar-search-label {
margin: 0;
font-size: var(--text-sm);
color: var(--text-2);
white-space: nowrap;
}
.topbar .aurora-topbar-search-input {
flex: 1;
min-width: 0;
font-size: var(--text-sm);
}
.topbar .aurora-topbar-search-submit {
display: inline-flex;
align-items: center;
justify-content: center;
}
.topbar .spacer { flex: 1; }
.topbar .icon-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-2);
color: var(--text-2);
transition: background var(--dur-fast) var(--ease-out);
}
.topbar .icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
.topbar .avatar {
width: 28px; height: 28px;
border-radius: var(--radius-full);
/* #233: was raw `--accent-5` + `white`, which gave 3.35:1 in dark
* (well below AA for the small initials). Pull from the per-theme
* `--avatar-bg` / `--avatar-fg` pair so each theme picks an
* AA-passing combo for white initials text. */
background: var(--avatar-bg);
color: var(--avatar-fg);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600;
font-size: var(--text-xs);
}
.sidebar {
grid-area: sidebar;
background: var(--surface-1);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.sidebar .brand {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
height: var(--topbar-h);
border-bottom: 1px solid var(--border-subtle);
font-weight: 600;
letter-spacing: -0.01em;
}
.sidebar .brand-mark {
width: 28px; height: 28px;
border-radius: var(--radius-2);
background: linear-gradient(135deg, var(--accent-6), var(--accent-9));
color: var(--text-on-accent, #fff);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.sidebar .brand-mark svg {
width: 16px;
height: 16px;
}
/* PNG/SVG-image brand mark: drop the gradient backplate (the image
* supplies its own background) and let the image fill the 28×28
* frame rounded by the parent's border-radius. object-fit:cover
* crops a non-square asset to a square; switch to "contain" if the
* org's logo needs whitespace around it. */
/* When an image logo replaces the SVG mark, drop the gradient backplate
* (the logo asset supplies its own background) and let the image sit
* inside the rounded 28×28 chip. object-fit: contain preserves the
* whole mark; if the asset is full-bleed and you'd rather crop, switch
* to cover. */
.sidebar .brand-mark.brand-mark-img {
background: transparent;
overflow: hidden;
}
.sidebar .brand-mark.brand-mark-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Org logo (#365): wordmark-shaped org logos need more than the 28×28
* chip — let the mark grow to the sidebar's usable width at a fixed
* height, and drop the chip rounding (the asset brings its own shape).
* In the collapsed rail the logo shrinks back to the chip footprint. */
.sidebar .brand-mark.brand-mark-org {
width: auto;
max-width: 160px;
height: 34px;
border-radius: 0;
}
.sidebar .brand-mark.brand-mark-org img {
width: auto;
max-width: 100%;
}
.aurora-app.collapsed .aurora-sidebar .brand-mark.brand-mark-org {
max-width: 28px;
height: 28px;
}
/* #261: the entire brand block is now a clickable link to /cms/. The
* anchor needs to inherit the brand row's typography and lose the
* default link underline so it reads as a logo, not a hyperlink.
* Hover lifts the surface for affordance. */
.sidebar .brand-link {
color: inherit;
text-decoration: none;
display: block;
border-radius: var(--radius-2);
transition: background var(--dur-fast) var(--ease-out);
}
.sidebar .brand-link:hover,
.sidebar .brand-link:focus {
text-decoration: none;
background: var(--surface-2);
}
.sidebar .brand-link:focus-visible {
outline: 2px solid var(--accent-6);
outline-offset: 2px;
}
.sidebar .nav-section {
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--border-subtle);
}
.sidebar .nav-section:last-of-type { border-bottom: 0; }
.sidebar .nav-label {
padding: 0 var(--space-2) var(--space-2);
font-size: var(--text-xs); /* #548: was 11px, off the scale */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
}
.sidebar .nav-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-3);
margin: 1px 0;
color: var(--text-2);
font-size: var(--text-sm);
border-radius: var(--radius-2);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.sidebar .nav-item:hover { background: var(--surface-2); color: var(--text-1); }
.sidebar .nav-item.active {
/* #233: was a hard-coded var(--accent-1) + var(--accent-9) pair
* with a separate [data-theme="dark"] override. Now both come
* from --accent-soft-bg / --accent-soft-fg so dark + HC swap
* the wash via tokens instead of per-component CSS. */
background: var(--accent-soft-bg);
color: var(--accent-soft-fg);
}
.sidebar .nav-item .count {
margin-left: auto;
color: var(--text-3);
font-variant-numeric: tabular-nums;
font-size: var(--text-xs);
}
/* #233: when the parent nav-item is .active the soft-bg is a colored
* wash (deep accent in HC; mid-tone elsewhere). Inherit so the count
* pill stays legible against that wash instead of staying gray. */
.sidebar .nav-item.active .count { color: inherit; }
.sidebar .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.main {
grid-area: main;
overflow-y: auto;
}
.page {
max-width: 1280px;
padding: var(--space-5) var(--space-6);
margin: 0 auto;
}
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.page-title {
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: -0.015em;
margin: 0;
}
.page-subtitle {
color: var(--text-2);
font-size: var(--text-sm);
margin: var(--space-1) 0 0;
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-3);
border-radius: var(--radius-2);
border: 1px solid var(--border-default);
background: var(--surface-1);
color: var(--text-1);
font-size: var(--text-sm);
font-weight: 500;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { background: var(--surface-3); }
/* Outline buttons (.btn-outline-*). Bootstrap 5.3 paints their hover /
active state as white text on a filled brand background
(--bs-btn-hover-color: #fff). The two rules above replace that fill
with --surface-2 / --surface-3 but leave Bootstrap's white text in
place, so the label vanishes on mouseover — first reported on the
outcome-goal category picker (system-adv_outcomes.php). Pin the text
to the theme's primary colour; the vars flip with light/dark/high-
contrast themes, and the fallbacks cover a page that lost the token
block. The legacy (non-Aurora) layout never loads this file, so
Bootstrap's filled hover stays intact there. */
.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"]:focus-visible,
.btn[class*="btn-outline-"]:active {
color: var(--text-1, #1f2933);
background: var(--surface-2, #f1f3f5);
}
.btn[class*="btn-outline-"]:active { background: var(--surface-3, #e6e8eb); }
.btn[class*="btn-outline-"]:hover .badge,
.btn[class*="btn-outline-"]:active .badge { color: var(--text-on-accent, #fff); }
/* #545: pin the resting .btn-outline-danger label to --danger-outline-fg,
* which is per-theme (see the palette blocks for the measured ratios). This
* is the one button in the product that discards work ("End Timer" /
* "Delete"), and Bootstrap's own #dc3545 fails AA on both page backgrounds we
* render it on. The hover/active pair above already pins the label to
* --text-1, so only the resting state needed changing. */
.btn.btn-outline-danger {
--bs-btn-color: var(--danger-outline-fg);
--bs-btn-border-color: var(--danger-outline-fg);
color: var(--danger-outline-fg);
border-color: var(--danger-outline-fg);
}
.btn.btn-primary {
background: var(--accent-7);
border-color: var(--accent-7);
color: var(--text-on-accent);
}
.btn.btn-primary:hover { background: var(--accent-6); border-color: var(--accent-6); }
.btn.btn-ghost { background: transparent; border-color: transparent; }
.btn.btn-ghost:hover { background: var(--surface-2); }
.btn.btn-sm { padding: 3px var(--space-2); font-size: var(--text-xs); }
.btn.btn-icon { padding: 5px; }
/* --- Inputs --- */
.input, .select {
padding: 6px var(--space-3);
background: var(--surface-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-2);
color: var(--text-1);
font-size: var(--text-sm);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .select:focus {
outline: none;
border-color: var(--accent-6);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-6) 25%, transparent);
}
/* --- Cards / panels --- */
.card {
/* #548: Bootstrap derives its card corner radii from --bs-border-radius
* as calc(radius - border-width), which knew nothing about the
* border-radius below — so a card header rounded at 5px inside a 12px
* card, and at 7px once the Bootstrap radius bridge moved the base to
* 8px. Both now name the same token as the card itself. Declared on
* `.card` because that is where Bootstrap declares them; a :root
* override is shadowed. */
--bs-card-border-radius: var(--radius-3);
--bs-card-inner-border-radius: var(--radius-3);
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-3);
padding: var(--space-5);
}
.card-title {
font-size: var(--text-base);
font-weight: 600;
margin: 0 0 var(--space-3);
letter-spacing: -0.005em;
}
/* --- Badges + tags --- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.4;
border: 1px solid var(--border-default);
background: var(--surface-2);
color: var(--text-2);
}
/* #233: badge tints come from theme-aware tokens so dark + HC pick a
* legible BG/FG pair instead of the light-mode `--*-3 50%` mix that
* goes murky on dark surfaces and washes out on pure-white in HC. */
.badge.success { background: var(--badge-success-bg); border-color: var(--success-3); color: var(--badge-success-fg); }
.badge.warning { background: var(--badge-warning-bg); border-color: var(--warning-3); color: var(--badge-warning-fg); }
.badge.danger { background: var(--badge-danger-bg); border-color: var(--danger-3); color: var(--badge-danger-fg); }
.badge.info { background: var(--badge-info-bg); border-color: var(--info-3); color: var(--badge-info-fg); }
.badge .dot {
width: 6px; height: 6px;
border-radius: var(--radius-full);
background: currentColor;
flex: 0 0 auto;
}
/* --- Tables --- */
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-3);
overflow: hidden;
font-variant-numeric: tabular-nums;
}
.table thead th {
text-align: left;
padding: 8px var(--space-3);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--surface-2);
border-bottom: 1px solid var(--border-subtle);
}
.table tbody td {
padding: 10px var(--space-3);
border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-sm);
vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr {
transition: background var(--dur-fast) var(--ease-out);
cursor: pointer;
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.selected {
/* #233: token-driven so dark + HC pick a visible wash. */
background: var(--accent-soft-bg);
color: var(--accent-soft-fg);
}
.table .case-num {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-2);
}
/* #233: same story as .nav-item.active .count — when the row is
* .selected the wash is opaque enough to swallow the gray. Inherit. */
.table tbody tr.selected .case-num { color: inherit; }
.table .truncate {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Filter bar --- */
.filter-bar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) 0;
flex-wrap: wrap;
}
.filter-bar .filter-group {
display: flex;
align-items: center;
gap: 1px;
padding: 2px;
background: var(--surface-2);
border-radius: var(--radius-2);
}
.filter-bar .filter-group .btn {
border: 0;
background: transparent;
border-radius: var(--radius-1);
}
.filter-bar .filter-group .btn.active {
background: var(--surface-1);
box-shadow: var(--shadow-1);
}
/* --- Stat tiles --- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.stat {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-3);
padding: var(--space-4);
}
.stat .label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2);
font-weight: 600;
}
.stat .value {
font-size: var(--text-3xl);
font-weight: 600;
letter-spacing: -0.025em;
line-height: var(--leading-tight);
margin: var(--space-2) 0 var(--space-1);
font-variant-numeric: tabular-nums;
}
.stat .delta { font-size: var(--text-xs); color: var(--text-2); }
.stat .delta.up { color: var(--success-9); }
.stat .delta.down { color: var(--danger-9); }
/* --- Two-pane case detail --- */
.detail {
display: grid;
grid-template-columns: 220px 1fr var(--right-rail-w);
gap: 0;
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-3);
overflow: hidden;
min-height: 720px;
}
.detail .section-nav {
border-right: 1px solid var(--border-subtle);
padding: var(--space-4);
background: var(--surface-2);
}
.detail .section-nav h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
margin: var(--space-4) 0 var(--space-2);
font-weight: 600;
}
.detail .section-nav h4:first-child { margin-top: 0; }
.detail .section-nav .nav-item {
display: flex;
align-items: center;
padding: 5px var(--space-2);
border-radius: var(--radius-2);
color: var(--text-2);
font-size: var(--text-sm);
margin: 1px 0;
cursor: pointer;
}
.detail .section-nav .nav-item:hover { background: var(--surface-3); color: var(--text-1); }
.detail .section-nav .nav-item.active {
background: var(--surface-1);
color: var(--text-1);
font-weight: 500;
box-shadow: var(--shadow-1);
}
.detail .content {
padding: var(--space-5) var(--space-6);
overflow-y: auto;
}
.detail .content h2 {
font-size: var(--text-xl);
font-weight: 600;
margin: 0 0 var(--space-4);
letter-spacing: -0.01em;
}
.detail .right-rail {
border-left: 1px solid var(--border-subtle);
padding: var(--space-4);
background: var(--surface-2);
overflow-y: auto;
}
.detail .right-rail h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
margin: 0 0 var(--space-3);
font-weight: 600;
}
/* --- Field grid --- */
.field-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4) var(--space-5);
margin-bottom: var(--space-5);
}
.field { display: flex; flex-direction: column; gap: 2px; }
.field .field-label {
font-size: var(--text-xs);
color: var(--text-2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.field .field-value {
font-size: var(--text-sm);
padding: 4px 0;
cursor: text;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-fast) var(--ease-out);
}
.field .field-value:hover { border-bottom-color: var(--border-default); }
.field .field-value.editable::after {
content: " ";
color: var(--text-3);
}
/* --- Activity timeline --- */
.timeline { display: flex; flex-direction: column; gap: var(--space-3); }
.timeline-item {
position: relative;
padding-left: var(--space-5);
font-size: var(--text-sm);
}
.timeline-item::before {
content: "";
position: absolute;
left: 6px; top: 8px;
width: 8px; height: 8px;
background: var(--accent-6);
border-radius: var(--radius-full);
box-shadow: 0 0 0 3px var(--surface-2);
}
.timeline-item:not(:last-child)::after {
content: "";
position: absolute;
left: 9px; top: 16px;
width: 2px; height: calc(100% - 4px);
background: var(--border-default);
}
.timeline-item .who { font-weight: 500; }
.timeline-item .when { font-size: var(--text-xs); color: var(--text-3); }
.timeline-item .what { color: var(--text-2); margin-top: 2px; }
/* --- Command palette overlay --- */
.palette-overlay {
position: fixed;
inset: 0;
/* #233: was hard-coded gray-11/50%. The scrim now comes from a
* theme-aware token so dark mode can lean on pure-black for a
* stronger blur edge and HC can use a 70% scrim that's still
* readable against pure-white surfaces underneath. */
background: var(--scrim);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
padding-top: 12vh;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
.palette-overlay.open { opacity: 1; pointer-events: auto; }
.palette {
width: min(560px, 92vw);
max-height: 60vh;
background: var(--surface-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
box-shadow: var(--shadow-3);
display: flex;
flex-direction: column;
transform: translateY(-8px);
transition: transform var(--dur-base) var(--ease-out);
}
.palette-overlay.open .palette { transform: translateY(0); }
.palette input {
border: 0;
border-bottom: 1px solid var(--border-subtle);
background: transparent;
padding: var(--space-4) var(--space-5);
font-size: var(--text-lg); /* #548: was --text-md, which is gone */
outline: none;
color: var(--text-1);
}
.palette ul { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.palette li {
padding: 8px var(--space-3);
border-radius: var(--radius-2);
font-size: var(--text-sm);
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
color: var(--text-1);
}
.palette li.active {
/* #233: token-driven so dark + HC pick a visible wash. */
background: var(--accent-soft-bg);
color: var(--accent-soft-fg);
}
.palette li .kind { color: var(--text-3); font-size: var(--text-xs); margin-left: auto; }
/* #233: same inherit-when-active pattern as .nav-item / .table .selected. */
.palette li.active .kind { color: inherit; }
.palette li .icon { color: var(--text-2); }
/* #298 palette polish: each row now has a small breadcrumb crumb
* above the action label so the user sees the destination structure
* ("Cases ▸ My Open Cases") at a glance. */
.palette li .palette-label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.palette li .palette-crumb {
color: var(--text-3);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
}
.palette li .palette-name {
color: inherit;
font-size: var(--text-sm);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.palette li.active .palette-crumb { color: inherit; opacity: 0.7; }
/* --- Hint footer for the palette ---
a11y (#256): bumped from --text-3 (gray-6, 4.29:1) to --text-2 (gray-8,
AA-passing 8.5:1) so axe's color-contrast rule passes against the
#ffffff palette background. Same fix on the inline kbd: explicit
var(--text-1) so the user-agent default white-on-light kbd colour
(1.09:1) doesn't leak through. */
.palette-foot {
border-top: 1px solid var(--border-subtle);
padding: 6px var(--space-4);
display: flex;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--text-2);
}
.palette-foot kbd {
padding: 1px 5px;
border: 1px solid var(--border-default);
/* #548: were 3px / 10px, both off the scale. */
border-radius: var(--radius-1);
font-size: var(--text-xs);
background: var(--surface-2);
color: var(--text-1);
}
/* --- Toast --- */
.toast {
position: fixed;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
/* #233: was hard-coded gray-11 / gray-1 which inverted wrongly in
* dark + had no contrast in HC. Theme-aware tokens swap the pair
* so the toast always looks "different from the page". */
background: var(--toast-bg);
color: var(--toast-fg);
padding: 10px var(--space-4);
border-radius: var(--radius-2);
font-size: var(--text-sm);
box-shadow: var(--shadow-3);
}
/* --- Utility --- */
/* #271: removed `.row { display: flex; align-items: center; gap: ... }`
* because it overrode Bootstrap's `.row` class and broke the multi-
* column layout used by megareport.php and other Bootstrap forms.
* Bootstrap's column padding plus this rule's gap added up to >100%
* width, forcing two col-6 cells onto separate rows. Aurora-specific
* row utilities now use `.aurora-row`. */
.aurora-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
/* #233: when these helpers sit inside a row/item that has an opaque
* accent wash applied (.active / .selected → --accent-soft-bg), the
* grayed text fights the wash and drops below AA. Inherit so the
* wash's --accent-soft-fg flows through to the helper text too. */
.active .muted, .active .subtle,
.selected .muted, .selected .subtle { color: inherit; }
.tabular { font-variant-numeric: tabular-nums; }
.divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-4) 0;
}
.spacer { flex: 1; }
/* #202 — supervisor dashboard tiles
* The same markup is also styled by the Bootstrap fallback in custom.css
* for the legacy chrome (which doesn't load aurora.css). Keep selector
* names in sync between the two so a future Aurora-only refactor can
* delete the fallback cleanly.
*/
.ocm-supervisor-dashboard {
padding: var(--space-4);
}
.ocm-sup-heading {
font-size: var(--text-xl, 1.25rem);
color: var(--text-1, #111);
margin-bottom: var(--space-3);
}
.ocm-sup-intro {
color: var(--text-2);
margin-bottom: var(--space-4);
}
.ocm-sup-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.ocm-sup-tile {
background: var(--surface-2, #f5f7fa);
border: 1px solid var(--border-default, #d0d7de);
border-radius: var(--radius-2, 6px);
padding: var(--space-3, 12px);
box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.05));
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ocm-sup-tile:hover {
box-shadow: var(--shadow-2, 0 4px 8px rgba(0,0,0,0.1));
transform: translateY(-1px);
}
.ocm-sup-tile-link {
display: block;
text-decoration: none;
color: inherit;
}
.ocm-sup-tile-link:hover,
.ocm-sup-tile-link:focus {
text-decoration: none;
color: inherit;
}
.ocm-sup-tile-count {
font-size: 2rem;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.ocm-sup-tile-label {
margin-top: 4px;
font-size: var(--text-sm, 0.875rem);
color: var(--text-2);
}
.ocm-sup-tone-info { border-left: 4px solid #3182ce; }
.ocm-sup-tone-warning { border-left: 4px solid #d69e2e; }
.ocm-sup-tone-danger { border-left: 4px solid #c53030; }
.ocm-sup-staff-table {
margin-top: var(--space-3);
}
.ocm-sup-footnote {
margin-top: var(--space-4);
}
/* --- Aurora chrome (#211 + #212) ----------------------------------------
* Production rules layered on top of the mockup base. The mockup CSS
* already ships .app / .sidebar / .topbar / .nav-item — these rules
* cover the production-only concerns: the sidebar-collapse state, the
* topbar avatar/notifications dropdowns, the empty-state placeholder
* inside Saved views, and the pieces of legacy Bootstrap we need to
* neutralise (`.wrapper` takes flex by default in custom.css; the
* Aurora variant overrides to grid via the `.aurora-app` class). */
/* The body modifier keeps the legacy Bootstrap reset from interfering
* with the grid app shell. */
.aurora-body { background: var(--surface-0); }
.aurora-app {
/* mirror .app — the Aurora chrome wrapper carries both classes */
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar main";
height: 100vh;
/* #298: cubic-bezier on the column transition gives the collapse
* a subtle physics curve. Default linear ease feels mechanical
* for a 240→56px slide; this pairs an ease-out start with a
* slight overshoot tail. */
transition: grid-template-columns 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aurora-app.collapsed {
grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
/* #298: when collapsed, give the active nav item a 3px left stripe
* so users can still see "where am I" without the label. The stripe
* uses the accent ramp so it inherits theme color. */
.aurora-app.collapsed .aurora-sidebar .nav-item.active {
position: relative;
}
.aurora-app.collapsed .aurora-sidebar .nav-item.active::before {
content: "";
position: absolute;
left: -2px;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 2px;
background: var(--accent-7);
}
.aurora-app.collapsed .aurora-sidebar .nav-label,
.aurora-app.collapsed .aurora-sidebar .nav-label-text,
.aurora-app.collapsed .aurora-sidebar .brand-label,
.aurora-app.collapsed .aurora-sidebar .count,
.aurora-app.collapsed .aurora-sidebar .aurora-empty-saved {
display: none;
}
.aurora-app.collapsed .aurora-sidebar .nav-item {
justify-content: center;
}
/* Sidebar nav links (anchors wrap each .nav-item) */
.aurora-sidebar .aurora-nav-link {
color: inherit;
text-decoration: none;
display: block;
}
.aurora-sidebar .aurora-nav-link:hover { text-decoration: none; }
.aurora-sidebar .aurora-nav-button {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-3);
margin: 1px 0;
width: 100%;
color: var(--text-2);
background: none;
border: 0;
border-radius: var(--radius-2);
font: inherit;
font-size: var(--text-sm);
text-align: left;
cursor: pointer;
}
.aurora-sidebar .aurora-nav-button:hover {
background: var(--surface-2);
color: var(--text-1);
}
.aurora-sidebar .aurora-empty-saved {
padding: 4px var(--space-3);
color: var(--text-3);
font-size: var(--text-xs);
font-style: italic;
}
.aurora-sidebar .aurora-bottom-nav {
margin-top: auto;
}
/* Topbar additions */
.aurora-topbar .aurora-sidebar-toggle {
margin-right: var(--space-2);
width: 32px;
height: 32px;
}
.aurora-topbar .search-trigger-label {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Topbar dropdowns (notifications + account menu).
*
* #267: the wrapper stretches to the topbar's full height so the
* dropdown panel anchors below the topbar's bottom border instead of
* overlapping it. Previously align-items: center on .topbar collapsed
* the wrapper to the button's height (32px), and "top: calc(100% + 6px)"
* positioned the panel relative to the wrapper rather than the topbar
* — meaning the panel started above the topbar's bottom edge. */
.aurora-dropdown {
position: relative;
display: inline-flex;
align-items: center;
align-self: stretch;
}
.aurora-dropdown .aurora-avatar-button {
border: 0;
cursor: pointer;
}
.aurora-dropdown-panel {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 240px;
background: var(--surface-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-2);
box-shadow: var(--shadow-2);
z-index: 80;
padding: var(--space-2) 0;
}
.aurora-dropdown-panel[hidden] { display: none; }
.aurora-dropdown-head {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
color: var(--text-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.aurora-dropdown-name {
text-transform: none;
font-size: var(--text-sm);
color: var(--text-1);
font-weight: 600;
letter-spacing: 0;
}
.aurora-dropdown-sub {
text-transform: none;
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 400;
letter-spacing: 0;
}
.aurora-dropdown-body {
padding: var(--space-3);
font-size: var(--text-sm);
color: var(--text-2);
}
/* #267: bumped vertical padding so menu items have visible breathing
* room between rows. At 6px y-padding the items ran together as one
* block of text. */
.aurora-dropdown-item {
display: block;
padding: var(--space-2) var(--space-4);
color: var(--text-1);
font-size: var(--text-sm);
text-decoration: none;
line-height: 1.4;
}
.aurora-dropdown-item + .aurora-dropdown-item {
margin-top: 1px;
}
.aurora-dropdown-item:hover {
background: var(--surface-2);
text-decoration: none;
}
.aurora-dropdown-item--danger { color: var(--danger-9); }
.aurora-dropdown-item--danger:hover { background: color-mix(in oklch, var(--danger-3) 30%, var(--surface-1)); }
.aurora-dropdown-sep {
height: 1px;
background: var(--border-subtle);
margin: var(--space-2) 0;
}
/* #293 — Aurora inline SVG icon set (replaces literal emoji glyphs).
*
* Default sizing tuned for sidebar nav rows + topbar icon-buttons.
* Authors can compose `aurora-icon--lg` / `aurora-icon--sm` /
* `aurora-icon--inline` for context-specific sizing.
*
* Stroke width is set on the