/* tokens.css: Livin' Stitchin' design tokens. The only CSS file allowed to contain color literals. */
/* ---------- A. Constants (never remapped by density or theme) ---------- */
:root {
/* Brand palette */
--navy: #0e2748; --navy-2: #163a6b; --navy-3: #21508f; --navy-deep: #0a1d36;
--cream: #f6f1e7; --cream-2: #efe7d8; --paper: #fffdf9; --white: #ffffff;
--ink: #1d2433; --ink-2: #4a5568; --ink-3: #5f6878;
--line: #e2d9c8; --line-strong: #8c8270;
--teal: #2a9d8f; --teal-2: #1a6b62; --teal-3: #155a52;
--mustard: #e9b949; --mustard-2: #c99a2e; --mustard-3: #7a5c0c; --mustard-light: #f1c965;
--coral: #e76f51; --coral-2: #a63f26;
--green: #2f9e44; --green-2: #1f6b30;
--red: #c92a2a; --red-2: #a51f1f;
/* Admin neutrals (warm stone) */
--stone-0: #ffffff; --stone-25: #fcfbf9; --stone-50: #f7f5f1; --stone-100: #f1eee8; --stone-150: #e9e5dd;
--stone-200: #ddd7cc; --stone-300: #c8c0b2; --stone-400: #857d6f; --stone-500: #625b4f; --stone-600: #464036;
--stone-700: #2e2a24;
/* On navy */
--on-navy: #ffffff; --on-navy-2: #c9d3e3; --on-navy-3: #8fa3c2; --on-navy-surface: #213857;
--on-navy-hover: rgb(255 255 255 / .08); --on-navy-press: rgb(255 255 255 / .14); --on-navy-line: rgb(255 255 255 / .14);
--on-navy-outline: rgb(255 255 255 / .7);
/* Families and weights */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
--fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
--lh-tight: 1.1; --lh-heading: 1.2; --lh-snug: 1.35;
--ls-display: -.02em; --ls-heading: -.01em; --ls-caps: .06em;
/* Spacing */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--gutter: 16px; --section-y: clamp(48px, 8vw, 96px); --page-pad: 16px;
/* Radii that never change */
--radius-xs: 4px; --radius-pill: 999px;
/* Motion */
--dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --dur-slower: 400ms;
--dur-spin: 750ms; --dur-spin-calm: 1500ms; --dur-shimmer: 1400ms; --dur-indeterminate: 1200ms; --dur-glow: 2200ms;
--delay-reveal: 300ms;
--ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-in-out: cubic-bezier(.45, 0, .55, 1); /* a symmetric swell for the .btn-glow pulse */
/* Layers */
--z-base: 0; --z-raised: 1; --z-overlay-local: 2; --z-dropdown: 100; --z-sticky: 200;
--z-fab: 300; --z-drawer: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-skip: 800;
/* Layout (surface CSS sets --header-h and --sticky-top, 3.15) */
--container-xs: 440px; --container-sm: 560px; --container-md: 760px; --maxw: 1140px; --container-wide: 1400px;
--measure: 68ch; --header-h: 64px; --sticky-top: 0px; --bottom-ui-h: 0px; --topbar-h: 56px; --sidebar-w: 248px;
/* Legacy, kept so existing CSS keeps working */
--stitch: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 11px);
}
@media (min-width: 768px) { :root { --gutter: 24px; --page-pad: 24px; } }
@media (min-width: 1280px) { :root:not([data-density="admin"]) { --gutter: 32px; } }
/* ---------- B. Customer density + light colors ----------
Declared on :root AND on [data-density="customer"], so a customer preview embedded in a dark
admin page stays light and roomy. Admin light colors that differ are in D. */
:root, [data-density="customer"] {
color-scheme: light;
/* Tints and tone inks (remapped in E and F) */
--navy-soft: #e3e9f3; --teal-soft: #d7efec; --mustard-soft: #fbf0cf;
--coral-soft: #fbe1d8; --green-soft: #d3f2d9; --red-soft: #f8d7d7;
--navy-ink: var(--navy); --teal-ink: var(--teal-2); --mustard-ink: var(--mustard-3);
--coral-ink: var(--coral-2); --green-ink: var(--green-2); --red-ink: var(--red-2);
/* Semantic roles */
--bg: var(--cream); --surface: var(--paper); --surface-2: var(--cream-2); --surface-3: #e6dcc9;
--control-bg: var(--white);
--text: var(--ink); --muted: var(--ink-2); --faint: var(--ink-3);
--border: var(--line); --border-strong: var(--line-strong); --border-hover: var(--ink-2);
--track: #c2b6a1;
--primary: var(--navy); --primary-hover: var(--navy-2); --primary-active: var(--navy-deep); --primary-contrast: var(--white);
--accent: var(--teal); --accent-strong: var(--teal-2); --accent-contrast: var(--white);
--highlight: var(--mustard); --highlight-hover: var(--mustard-light); --highlight-active: var(--mustard-2); --highlight-contrast: var(--navy);
--link: var(--teal-2); --link-hover: var(--navy);
--selected: var(--teal-2); --selected-bg: var(--teal-soft);
--pressed-bg: var(--navy); --pressed-fg: var(--white);
--control-checked: var(--teal-2); --switch-thumb: var(--white);
--focus-ring: var(--teal-2); --focus-halo: rgb(26 107 98 / .22);
--row-hover: var(--bg); --row-zebra: #fcf9f3;
--scrim: rgb(11 22 38 / .55); --stage-bg: #0b1626;
--tooltip-bg: var(--ink); --tooltip-fg: var(--white);
--toast-bg: var(--navy); --toast-fg: var(--white);
--toast-ok: #6fd3c4; --toast-info: #c9d7ee; --toast-err-bg: var(--red-2);
--skeleton-shine: rgb(255 255 255 / .6);
--scroll-thumb: rgb(14 39 72 / .28); --scroll-thumb-hover: rgb(14 39 72 / .45);
--selection-bg: var(--mustard-soft); --selection-fg: var(--ink);
--danger-hover: var(--red-2); --danger-halo: rgb(201 42 42 / .2);
--tab-indicator: var(--navy); --chrome-bg: var(--navy);
--suggest-bg: var(--mustard-soft); --suggest-fg: var(--navy); --suggest-border: var(--mustard-2);
--suggest-bg-hover: var(--mustard-light); --suggest-fg-hover: var(--navy);
--glow-ring: var(--mustard-light); --glow: rgb(233 185 73 / .7); --glow-peak: rgb(233 185 73 / .95);
--swatch-edge: rgb(0 0 0 / .18);
--viewer-bar-bg: rgb(14 39 72 / .88); --stage-chip-bg: rgb(255 255 255 / .94);
/* Charts (constants; grid and label colors are aliases in block C) */
--chart-1: var(--navy); --chart-2: var(--teal); --chart-3: var(--mustard);
--chart-4: var(--coral); --chart-5: var(--navy-3); --chart-6: var(--green);
/* Elevation */
--shadow-xs: 0 1px 2px rgb(14 39 72 / .06);
--shadow-sm: 0 1px 2px rgb(14 39 72 / .05), 0 2px 8px rgb(14 39 72 / .07);
--shadow: 0 2px 6px rgb(14 39 72 / .06), 0 10px 28px rgb(14 39 72 / .10);
--shadow-lg: 0 8px 20px rgb(14 39 72 / .12), 0 28px 60px rgb(14 39 72 / .18);
--card-shadow: var(--shadow-sm);
/* Type scale */
--fs-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
--fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
--fs-h2: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
--fs-h3: 1.375rem; --fs-h4: 1.125rem;
--fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.1875rem);
--fs-body: 1rem; --fs-small: .875rem; --fs-caption: .8125rem; --fs-label: .9375rem; --fs-overline: .75rem;
--fs-control: 1rem; --fs-btn: 1rem; --fs-btn-sm: .875rem; --fs-btn-lg: 1.0625rem;
--fs-table: .9375rem; --fs-th: .75rem; --fs-tab: 1rem;
--fs-page-title: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
--lh-body: 1.6; --ls-overline: .12em;
--h2-family: var(--font-display); --h2-weight: 700; --h2-tracking: -.01em;
--h3-family: var(--font-display); --h3-weight: 700;
/* Density-dependent spacing and radii */
--field-gap: 20px; --card-pad: 24px; --stack: 16px;
--radius-sm: 8px; --radius-control: 10px; --radius: 14px; --radius-lg: 20px; --btn-radius: 999px;
/* Component sizing */
--control-h: 48px; --control-h-sm: 40px; --control-h-lg: 56px; --control-px: 14px; --control-border-w: 1.5px;
--btn-h: 48px; --btn-h-sm: 40px; --btn-h-lg: 56px; --btn-px: 22px; --btn-px-sm: 16px; --btn-px-lg: 28px;
--btn-border-w: 1.5px; --btn-lift: -1px; --btn-hover-shadow: var(--shadow-sm);
--icon-size: 20px; --check-size: 20px; --check-radius: 5px;
--switch-w: 44px; --switch-h: 26px; --switch-thumb-size: 20px;
--range-track-h: 6px; --range-thumb: 24px;
--chip-h: 32px; --tag-h: 40px; --badge-h: 24px; --badge-px: 10px;
--tab-h: 48px; --seg-h: 40px; --th-h: 44px; --cell-py: 14px; --cell-px: 16px;
--modal-pad: 24px; --tap-min: 44px; --studio-panel-w: 380px;
/* Glyphs for native controls (3.17) */
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6878' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
--icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%235f6878'/%3E%3Cpath d='m15 9-6 6M9 9l6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
@media (max-width: 479.98px) { :root:not([data-density="admin"]), [data-density="customer"] { --card-pad: 20px; } }
/* ---------- C. Aliases ----------
A custom property that references another is resolved on the element where it is declared, and
descendants inherit the resolved value. Tokens that alias scope-dependent tokens are therefore
re-declared on every scope element and every light island, so each gets values that follow its own
base tokens. This block must come before D, E and F so their explicit overrides win. */
:root, [data-density],
.on-dark, .site-footer, .hero, .band, .p-header, .side, .est, .wb-bar, .carousel, .lightbox, .modal-media, .media-bar, .viewer-bar, .lsqp-viewer, .chat-head,
:is(.on-dark, .site-footer, .hero, .band, .p-header, .side, .est, .wb-bar, .carousel, .lightbox, .modal-media, .media-bar, .viewer-bar, .lsqp-viewer, .chat-head)
:is(.menu, .popover, .listbox, dialog:not(.modal-media), .toast-region) {
--success: var(--green); --success-soft: var(--green-soft); --success-ink: var(--green-ink);
--warning: var(--mustard); --warning-soft: var(--mustard-soft); --warning-ink: var(--mustard-ink);
--danger: var(--red); --danger-soft: var(--red-soft); --danger-ink: var(--red-ink);
--info: var(--teal); --info-soft: var(--teal-soft); --info-ink: var(--teal-ink);
--attention: var(--coral); --attention-soft: var(--coral-soft); --attention-ink: var(--coral-ink);
--outline-bg: var(--surface); --outline-fg: var(--text); --outline-border: var(--border-strong); --outline-border-hover: var(--border-hover);
--skeleton: var(--surface-2);
--chart-grid: var(--border); --chart-label: var(--faint);
}
/* ---------- D. Admin density (light) ---------- */
[data-density="admin"] {
--bg: var(--stone-50); --surface: var(--stone-0); --surface-2: var(--stone-100); --surface-3: var(--stone-150);
--control-bg: var(--stone-0);
--faint: var(--stone-500);
--border: var(--stone-200); --border-strong: var(--stone-400); --border-hover: var(--stone-600);
--track: #b9b1a3;
--row-hover: var(--stone-50); --row-zebra: var(--stone-25);
--scroll-thumb: rgb(46 42 36 / .25); --scroll-thumb-hover: rgb(46 42 36 / .4);
--fs-display: 2rem; --fs-h1: 1.5rem; --fs-h2: 1.125rem; --fs-h3: 1rem; --fs-h4: .875rem;
--fs-lead: 1rem; --fs-body: .875rem; --fs-small: .8125rem; --fs-caption: .75rem; --fs-label: .8125rem; --fs-overline: .75rem;
--fs-control: .875rem; --fs-btn: .875rem; --fs-btn-sm: .8125rem; --fs-btn-lg: .9375rem;
--fs-table: .875rem; --fs-th: .75rem; --fs-tab: .875rem; --fs-page-title: 1.5rem;
--lh-body: 1.5; --ls-overline: .1em;
--h2-family: var(--font-body); --h2-weight: 800; --h2-tracking: 0;
--h3-family: var(--font-body); --h3-weight: 800;
--field-gap: 16px; --card-pad: 16px; --stack: 12px;
--radius-sm: 6px; --radius-control: 6px; --radius: 10px; --radius-lg: 12px; --btn-radius: 6px;
--card-shadow: var(--shadow-xs);
--control-h: 32px; --control-h-sm: 28px; --control-h-lg: 40px; --control-px: 10px; --control-border-w: 1px;
--btn-h: 32px; --btn-h-sm: 28px; --btn-h-lg: 40px; --btn-px: 14px; --btn-px-sm: 10px; --btn-px-lg: 18px;
--btn-border-w: 1px; --btn-lift: 0px; --btn-hover-shadow: none;
--icon-size: 18px; --check-size: 16px; --check-radius: 4px;
--switch-w: 34px; --switch-h: 20px; --switch-thumb-size: 14px;
--range-track-h: 4px; --range-thumb: 16px;
--chip-h: 24px; --tag-h: 28px; --badge-h: 20px; --badge-px: 8px;
--tab-h: 40px; --seg-h: 24px; --th-h: 36px; --cell-py: 10px; --cell-px: 12px;
--modal-pad: 20px; --tap-min: 32px; --studio-panel-w: 320px;
}
@media (pointer: coarse) {
[data-density="admin"] {
--fs-control: 1rem;
--control-h: 40px; --control-h-sm: 36px; --control-h-lg: 44px; --control-px: 12px;
--btn-h: 40px; --btn-h-sm: 36px; --btn-h-lg: 44px; --btn-px: 16px; --btn-px-sm: 12px; --btn-px-lg: 20px;
--icon-size: 20px; --check-size: 20px; --check-radius: 5px;
--switch-w: 44px; --switch-h: 26px; --switch-thumb-size: 20px;
--range-track-h: 6px; --range-thumb: 24px;
--chip-h: 32px; --tag-h: 36px; --tab-h: 44px; --seg-h: 32px; --tap-min: 40px;
}
}
/* ---------- E. Dark theme: admin density only ----------
Matches the Suite's and admin specimens inside a dark
style-guide page. Customer scopes never go dark. */
:root[data-theme="dark"][data-density="admin"], [data-theme="dark"] [data-density="admin"] {
color-scheme: dark;
--bg: #0b1626; --surface: #12203a; --surface-2: #182a49; --surface-3: #1e3356; --control-bg: #0f1c33;
--text: #eef2f8; --muted: #b7c2d6; --faint: #8e9bb4;
--border: #253a5f; --border-strong: #6384b0; --border-hover: #8e9bb4;
--track: #3a547c;
--primary: var(--mustard); --primary-hover: var(--mustard-light); --primary-active: var(--mustard-2); --primary-contrast: #0b1626;
--accent: #3fc1b0; --accent-strong: #3fc1b0; --accent-contrast: #0b1626;
--link: #6fd3c4; --link-hover: #eef2f8;
--selected: #3fc1b0; --selected-bg: #163f3a;
--pressed-bg: var(--mustard); --pressed-fg: #0b1626;
--control-checked: #3fc1b0; --switch-thumb: #0b1626;
--focus-ring: var(--mustard); --focus-halo: rgb(233 185 73 / .30);
--navy-soft: #243a5e; --navy-ink: #c9d7ee;
--teal-soft: #163f3a; --teal-ink: #6fd3c4;
--mustard-soft: #3d3216; --mustard-ink: #f0c96a;
--coral-soft: #4a2418; --coral-ink: #ffb39c;
--green-soft: #173b21; --green-ink: #8ee0a0;
--red-soft: #4a1d1d; --red-ink: #ff9c9c;
--row-hover: #182a49; --row-zebra: #142440;
--scrim: rgb(0 0 0 / .6);
--tooltip-bg: #eef2f8; --tooltip-fg: #0b1626;
--toast-bg: #1e3356; --toast-fg: #eef2f8;
--skeleton-shine: rgb(255 255 255 / .06);
--scroll-thumb: rgb(255 255 255 / .22); --scroll-thumb-hover: rgb(255 255 255 / .36);
--selection-bg: #3d3216; --selection-fg: #eef2f8;
--suggest-bg: #3d3216; --suggest-fg: #f0c96a; --suggest-border: var(--mustard-3);
--suggest-bg-hover: var(--mustard); --suggest-fg-hover: #0b1626;
--chart-1: #8fa3c2; --chart-5: #6384b0;
--shadow-xs: 0 1px 2px rgb(0 0 0 / .4); --shadow-sm: 0 2px 8px rgb(0 0 0 / .35);
--shadow: 0 10px 28px rgb(0 0 0 / .45); --shadow-lg: 0 28px 60px rgb(0 0 0 / .55);
--card-shadow: var(--shadow-xs);
--tab-indicator: var(--mustard); --chrome-bg: #081120; --danger-halo: rgb(255 156 156 / .25);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c2d6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1626' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1626' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c2d6' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
--icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%238e9bb4'/%3E%3Cpath d='m15 9-6 6M9 9l6 6' stroke='%230b1626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c2d6' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c2d6' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* ---------- F. On-dark scope (navy areas) ---------- */
.on-dark, .site-footer, .hero, .band, .p-header, .side, .est, .wb-bar, .carousel, .lightbox, .modal-media, .media-bar, .viewer-bar, .lsqp-viewer, .chat-head {
--surface: var(--on-navy-surface); --surface-2: var(--on-navy-hover); --surface-3: var(--on-navy-press);
--control-bg: var(--navy-deep);
--text: var(--on-navy); --muted: var(--on-navy-2); --faint: var(--on-navy-3);
--border: var(--on-navy-line); --border-strong: rgb(255 255 255 / .45); --border-hover: var(--on-navy-outline);
--track: rgb(255 255 255 / .28);
--link: var(--mustard); --link-hover: var(--white);
--focus-ring: var(--mustard); --focus-halo: rgb(233 185 73 / .35);
--primary: var(--mustard); --primary-hover: var(--mustard-light); --primary-active: var(--mustard-2); --primary-contrast: var(--navy);
--accent: var(--teal); --accent-strong: #6fd3c4;
--pressed-bg: var(--mustard); --pressed-fg: var(--navy);
--selected: var(--mustard); --selected-bg: rgb(255 255 255 / .12);
--control-checked: var(--mustard); --switch-thumb: var(--navy);
--tooltip-bg: var(--white); --tooltip-fg: var(--navy);
--row-hover: var(--on-navy-hover); --row-zebra: rgb(255 255 255 / .04);
--skeleton-shine: rgb(255 255 255 / .08);
--scroll-thumb: rgb(255 255 255 / .25); --scroll-thumb-hover: rgb(255 255 255 / .4);
--tab-indicator: var(--mustard);
--suggest-bg: rgb(255 255 255 / .08); --suggest-fg: var(--white); --suggest-border: var(--mustard);
--suggest-bg-hover: var(--mustard); --suggest-fg-hover: var(--navy);
--outline-bg: transparent; --outline-fg: var(--white); --outline-border: var(--on-navy-outline); --outline-border-hover: var(--white);
/* Tone tints and inks: the dark-theme values, so alerts and badges on navy stay readable */
--navy-soft: #243a5e; --navy-ink: #c9d7ee;
--teal-soft: #163f3a; --teal-ink: #6fd3c4;
--mustard-soft: #3d3216; --mustard-ink: #f0c96a;
--coral-soft: #4a2418; --coral-ink: #ffb39c;
--green-soft: #173b21; --green-ink: #8ee0a0;
--red-soft: #4a1d1d; --red-ink: #ff9c9c;
/* Glyphs: light strokes; the tick is navy on the mustard fill */
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2748' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2748' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e3' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
--icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%238fa3c2'/%3E%3Cpath d='m15 9-6 6M9 9l6 6' stroke='%230e2748' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e3' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e3' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
color: var(--text);
}
/* ---------- G. On-dark extras ---------- */
:is(.on-dark, .site-footer, .hero, .band, .p-header, .side, .est, .wb-bar, .carousel, .lightbox, .modal-media, .media-bar, .viewer-bar, .lsqp-viewer, .chat-head) .eyebrow { color: var(--mustard); }
/* ---------- H. Base snapshot ----------
Each density scope records its own values, before any on-dark scope changes them. Light islands (I)
restore them. Declared only on :root and [data-density], so the values resolve against the page's
density and theme, never against a navy container. */
:root, [data-density] {
--base-bg: var(--bg); --base-surface: var(--surface); --base-surface-2: var(--surface-2); --base-surface-3: var(--surface-3);
--base-control-bg: var(--control-bg);
--base-text: var(--text); --base-muted: var(--muted); --base-faint: var(--faint);
--base-border: var(--border); --base-border-strong: var(--border-strong); --base-border-hover: var(--border-hover);
--base-track: var(--track);
--base-primary: var(--primary); --base-primary-hover: var(--primary-hover); --base-primary-active: var(--primary-active);
--base-primary-contrast: var(--primary-contrast);
--base-accent: var(--accent); --base-accent-strong: var(--accent-strong);
--base-link: var(--link); --base-link-hover: var(--link-hover);
--base-selected: var(--selected); --base-selected-bg: var(--selected-bg);
--base-pressed-bg: var(--pressed-bg); --base-pressed-fg: var(--pressed-fg);
--base-control-checked: var(--control-checked); --base-switch-thumb: var(--switch-thumb);
--base-focus-ring: var(--focus-ring); --base-focus-halo: var(--focus-halo);
--base-tooltip-bg: var(--tooltip-bg); --base-tooltip-fg: var(--tooltip-fg);
--base-row-hover: var(--row-hover); --base-row-zebra: var(--row-zebra);
--base-skeleton-shine: var(--skeleton-shine);
--base-scroll-thumb: var(--scroll-thumb); --base-scroll-thumb-hover: var(--scroll-thumb-hover);
--base-tab-indicator: var(--tab-indicator);
--base-suggest-bg: var(--suggest-bg); --base-suggest-fg: var(--suggest-fg); --base-suggest-border: var(--suggest-border);
--base-suggest-bg-hover: var(--suggest-bg-hover); --base-suggest-fg-hover: var(--suggest-fg-hover);
--base-navy-soft: var(--navy-soft); --base-teal-soft: var(--teal-soft); --base-mustard-soft: var(--mustard-soft);
--base-coral-soft: var(--coral-soft); --base-green-soft: var(--green-soft); --base-red-soft: var(--red-soft);
--base-navy-ink: var(--navy-ink); --base-teal-ink: var(--teal-ink); --base-mustard-ink: var(--mustard-ink);
--base-coral-ink: var(--coral-ink); --base-green-ink: var(--green-ink); --base-red-ink: var(--red-ink);
--base-icon-chevron: var(--icon-chevron); --base-icon-check: var(--icon-check); --base-icon-dash: var(--icon-dash);
--base-icon-search: var(--icon-search); --base-icon-clear: var(--icon-clear);
--base-icon-calendar: var(--icon-calendar); --base-icon-clock: var(--icon-clock);
}
/* ---------- I. Light islands ----------
Floating light surfaces rendered inside a navy area get the page's own values back (2.4). */
:is(.on-dark, .site-footer, .hero, .band, .p-header, .side, .est, .wb-bar, .carousel, .lightbox, .modal-media, .media-bar, .viewer-bar, .lsqp-viewer, .chat-head)
:is(.menu, .popover, .listbox, dialog:not(.modal-media), .toast-region) {
--bg: var(--base-bg); --surface: var(--base-surface); --surface-2: var(--base-surface-2); --surface-3: var(--base-surface-3);
--control-bg: var(--base-control-bg);
--text: var(--base-text); --muted: var(--base-muted); --faint: var(--base-faint);
--border: var(--base-border); --border-strong: var(--base-border-strong); --border-hover: var(--base-border-hover);
--track: var(--base-track);
--primary: var(--base-primary); --primary-hover: var(--base-primary-hover); --primary-active: var(--base-primary-active);
--primary-contrast: var(--base-primary-contrast);
--accent: var(--base-accent); --accent-strong: var(--base-accent-strong);
--link: var(--base-link); --link-hover: var(--base-link-hover);
--selected: var(--base-selected); --selected-bg: var(--base-selected-bg);
--pressed-bg: var(--base-pressed-bg); --pressed-fg: var(--base-pressed-fg);
--control-checked: var(--base-control-checked); --switch-thumb: var(--base-switch-thumb);
--focus-ring: var(--base-focus-ring); --focus-halo: var(--base-focus-halo);
--tooltip-bg: var(--base-tooltip-bg); --tooltip-fg: var(--base-tooltip-fg);
--row-hover: var(--base-row-hover); --row-zebra: var(--base-row-zebra);
--skeleton-shine: var(--base-skeleton-shine);
--scroll-thumb: var(--base-scroll-thumb); --scroll-thumb-hover: var(--base-scroll-thumb-hover);
--tab-indicator: var(--base-tab-indicator);
--suggest-bg: var(--base-suggest-bg); --suggest-fg: var(--base-suggest-fg); --suggest-border: var(--base-suggest-border);
--suggest-bg-hover: var(--base-suggest-bg-hover); --suggest-fg-hover: var(--base-suggest-fg-hover);
--navy-soft: var(--base-navy-soft); --teal-soft: var(--base-teal-soft); --mustard-soft: var(--base-mustard-soft);
--coral-soft: var(--base-coral-soft); --green-soft: var(--base-green-soft); --red-soft: var(--base-red-soft);
--navy-ink: var(--base-navy-ink); --teal-ink: var(--base-teal-ink); --mustard-ink: var(--base-mustard-ink);
--coral-ink: var(--base-coral-ink); --green-ink: var(--base-green-ink); --red-ink: var(--base-red-ink);
--icon-chevron: var(--base-icon-chevron); --icon-check: var(--base-icon-check); --icon-dash: var(--base-icon-dash);
--icon-search: var(--base-icon-search); --icon-clear: var(--base-icon-clear);
--icon-calendar: var(--base-icon-calendar); --icon-clock: var(--base-icon-clock);
color: var(--text);
}
/* ---------- J. Density scope wrapper (style guide, embedded previews) ---------- */
.density-scope { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
/* ---------- K. Print ---------- */
@media print {
:root, [data-density] { --text: #000000; --muted: #333333; --faint: #555555; --border: #bbbbbb; --border-strong: #888888;
--bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --card-shadow: none; }
}
/* ---------- L. Fonts (once the files are committed to public/assets/fonts/) ----------
Until then every page head loads Google Fonts with and one :
Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,700,0,0;1,9..144,700,0,1 and Nunito:wght@400;600;700;800 (3.8). */
/* @font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin-wght.woff2') format('woff2');
font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-opsz-wght.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-opsz-wght-italic.woff2') format('woff2');
font-weight: 700; font-style: italic; font-display: swap; }
The Fraunces files are variable in opsz (9..144) and wght; subset the wght axis to 700 if the tool allows it, and keep opsz. */