/* ============================================================================ AROS Design-Token Layer — Book 011 §2 / §3 / §5.6 / §9 / §10 ---------------------------------------------------------------------------- Jelly Belly Analytics · vanilla CSS, no build step, no imports, no CDN. LOAD ORDER: this file MUST be loaded AFTER public/css/styles.css. The legacy alias block at the bottom re-declares the old :root names as var() pointers at equal specificity, so "last one wins" re-skins the whole 3300-line legacy stylesheet with zero markup or legacy-CSS edits. THREE TIERS (AROS-011-009): primitive -> theme -> semantic. --p-* primitives (raw values; never referenced by components) theme block binds primitives into semantic roles per [data-theme] --color-x --space-x --radius-x --elevation-x --motion-x semantic (bind these) THEMES (AROS-011-010, AROS-011-023): :root -> Graphite light (DEFAULT) :root[data-mode="dark"] -> Graphite dark (authored, §2 AROS-011-021) :root[data-theme="apple-light"] -> Apple-Light light :root[data-theme="apple-light"][data-mode="dark"] -> Apple-Light dark document.documentElement.dataset.theme = 'apple-light'; // switch tenant chrome delete document.documentElement.dataset.theme; // back to Graphite document.documentElement.dataset.mode = 'dark'; // switch mode axis FIXED, NOT THEMEABLE: --color-status-* (AROS-011-011) four status hues, identical in every theme --viz-series-*, --viz-seq-*, --viz-div-* (AROS-011-027/056) validated palette CONTRAST: every fg/bg pairing declared here was computed against WCAG 2.2 (4.5:1 body text, 3:1 large text + UI). Ratios are in the comments and in docs/aros-theme.md. Five pairings sit below floor BY SPEC (three sub-3:1 series slots recorded as the AROS-011-057 WARN, and the warning/serious status marks which AROS-011-011 requires to ship with icon+label); they are NOT adjusted, because AROS-011-027 forbids repainting the validated palette. AA-safe *text* companions are provided for both cases. ============================================================================ */ /* --------------------------------------------------------------------------- TIER 1 — PRIMITIVES (theme-independent raw values) Components MUST NOT reference these directly (AROS-011-009). --------------------------------------------------------------------------- */ :root { /* Graphite ink ramp (warm-neutral) */ --p-graphite-950: #1A1A18; --p-graphite-900: #1F1F1D; --p-graphite-850: #2A2A27; --p-graphite-800: #383835; --p-graphite-600: #63635C; --p-graphite-550: #6E6D65; --p-graphite-450: #93928A; --p-graphite-400: #A8A79E; --p-graphite-200: #E4E3DD; --p-graphite-150: #EBEAE4; --p-graphite-100: #F2F1ED; --p-graphite-050: #FAFAF8; /* porcelain */ --p-graphite-000: #FFFFFF; --p-graphite-025: #F5F4F0; /* dark-mode ink */ --p-graphite-990: #141413; /* Saffron accent — non-text emphasis only (Book 011 §1.3) */ --p-saffron-500: #C8891A; --p-saffron-600: #BE8014; --p-saffron-800: #8A5F09; /* Apple system ramp */ --p-apple-blue-600: #0069D9; --p-apple-blue-500: #007AFF; --p-apple-gray-950: #1C1C1E; --p-apple-gray-700: #5B5B60; --p-apple-gray-600: #636366; --p-apple-gray-200: #E5E5EA; --p-apple-gray-100: #F2F2F7; /* Fixed status hues (AROS-011-011 — identical in every theme, every mode) */ --p-status-good: #0CA30C; --p-status-warning: #FAB219; --p-status-serious: #EC835A; --p-status-critical: #D03B3B; } /* =========================================================================== TIER 2+3 — GRAPHITE (light) · THE DEFAULT THEME =========================================================================== */ :root { --theme-name: "graphite"; --theme-mode: "light"; /* --- Colour: chrome surfaces & ink (AROS-011-011 table, §2.1) ----------- */ /* Pure white page, by request — the porcelain #FAFAF8 read as cream next to the sand bars. Cards are the same white, so their hairline border and sand bar are now the only things separating card from page; that is intentional, and it is why neither may be dropped. */ --color-bg: #FFFFFF; /* page plane */ --color-surface: var(--p-graphite-000); /* #FFFFFF card / panel */ --color-surface-alt: var(--p-graphite-100); /* #F2F1ED nested / header */ --color-surface-sunken: var(--p-graphite-150); /* #EBEAE4 wells, track fills */ --color-text: var(--p-graphite-950); /* #1A1A18 17.43:1 on surface · 16.68 on bg · 15.42 on alt */ --color-text-muted: var(--p-graphite-600); /* #63635C 6.05:1 on surface · 5.79 on bg · 5.35 on alt */ --color-text-subtle: var(--p-graphite-550); /* #6E6D65 5.20:1 on surface · 4.98 on bg · 4.60 on alt */ --color-text-on-accent: var(--p-graphite-050); --color-border: var(--p-graphite-200); /* #E4E3DD hairline, decorative (1.4.11 n/a) */ --color-border-strong: var(--p-graphite-400);/* #A8A79E 2.42:1 vs surface — input outlines */ --color-separator: var(--p-graphite-150); /* #EBEAE4 in-card rule */ /* --- Colour: action / state -------------------------------------------- */ --color-action-primary-bg: var(--p-graphite-950); /* ink */ --color-action-primary-fg: var(--p-graphite-050); /* 16.68:1 on primary-bg */ --color-action-primary-hover: #333330; --color-action-primary-active: #0D0D0C; --color-action-secondary-bg: var(--p-graphite-000); --color-action-secondary-fg: var(--p-graphite-950); /* 17.43:1 */ --color-action-secondary-border: var(--p-graphite-200); --color-action-ghost-fg: var(--p-graphite-600); /* 6.05:1 */ --color-action-danger-bg: #B02226; --color-action-danger-fg: #FFFFFF; /* 6.77:1 */ --color-state-hover: rgba(26, 26, 24, 0.04); --color-state-active: rgba(26, 26, 24, 0.08); --color-state-selected: var(--p-graphite-100); --color-state-disabled-bg: var(--p-graphite-100); --color-state-disabled-fg: var(--p-graphite-450); /* Accent — saffron, NON-TEXT emphasis only (active markers, confidence meter) */ --color-accent: var(--p-saffron-500); /* #C8891A 2.85:1 vs bg — decorative fills only */ --color-accent-strong: var(--p-saffron-600); /* #BE8014 3.20:1 vs bg — meaningful non-text UI */ --color-accent-text: var(--p-saffron-800); /* #8A5F09 5.64:1 on surface · 4.99 on alt */ /* --- Colour: status — FIXED across all themes (AROS-011-011) ------------ */ --color-status-good: var(--p-status-good); /* #0CA30C 3.21:1 vs bg — mark, PASS 3:1 */ --color-status-warning: var(--p-status-warning); /* #FAB219 1.76:1 vs bg — mark, see note */ --color-status-serious: var(--p-status-serious); /* #EC835A 2.52:1 vs bg — mark, see note */ --color-status-critical: var(--p-status-critical); /* #D03B3B 4.60:1 vs bg — mark, PASS 3:1 */ /* AA-safe TEXT companions. The four hues above are the fixed *mark* colours and always ship with icon + label (AROS-011-011/100); when the same state must be rendered as running text, use these instead. */ --color-status-good-text: #0A7D0A; /* 5.32:1 on surface · 5.09 on bg · 4.70 on alt */ --color-status-warning-text: #8A6100; /* 5.54:1 on surface · 5.30 on bg · 4.90 on alt */ --color-status-serious-text: #A8431B; /* 6.03:1 on surface · 5.77 on bg · 5.33 on alt */ --color-status-critical-text: #C0272B; /* 5.89:1 on surface · 5.63 on bg · 5.21 on alt */ /* Tinted status surfaces (pill backgrounds); text companion above stays AA. */ --color-status-good-surface: rgba(12, 163, 12, 0.10); --color-status-warning-surface: rgba(250, 178, 25, 0.16); --color-status-serious-surface: rgba(236, 131, 90, 0.14); --color-status-critical-surface: rgba(208, 59, 59, 0.10); /* --- Focus ring (AROS-011-101) ----------------------------------------- */ --color-focus-ring: var(--p-graphite-950); /* 16.68:1 vs bg */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: var(--focus-ring-width) solid var(--color-focus-ring); --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-focus-ring); /* --- Elevation (AROS-011-016) — Graphite = tight two-stop drop shadow --- */ --elevation-flat: none; --elevation-raised: 0 1px 2px rgba(20, 20, 19, 0.05), 0 2px 8px rgba(20, 20, 19, 0.05); --elevation-overlay: 0 2px 4px rgba(20, 20, 19, 0.06), 0 12px 32px rgba(20, 20, 19, 0.10); --elevation-inset: inset 0 1px 2px rgba(20, 20, 19, 0.06); --surface-blur: none; /* Apple-Light overrides with a backdrop-filter */ /* --- Radius (AROS-011-014) — Graphite is restrained --------------------- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; /* card */ --radius-xl: 20px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* --- Viz chrome (AROS-011-068) — resolves per theme --------------------- */ --viz-surface: var(--color-surface); --viz-plot: var(--p-graphite-050); --viz-grid: var(--p-graphite-150); --viz-axis: var(--p-graphite-200); --viz-ink: var(--color-text); --viz-ink-muted: var(--color-text-muted); } /* =========================================================================== GRAPHITE — DARK (authored, not derived: AROS-011-021) Opt-in only: :root[data-mode="dark"]. Deliberately NOT wired to prefers-color-scheme, because the legacy stylesheet still hard-codes #fff in places; enabling it is a separate, explicit migration step. =========================================================================== */ :root[data-mode="dark"] { --theme-mode: "dark"; --color-bg: var(--p-graphite-990); /* #141413 */ --color-surface: var(--p-graphite-900); /* #1F1F1D */ --color-surface-alt: var(--p-graphite-850); /* #2A2A27 */ --color-surface-sunken: #171716; --color-text: var(--p-graphite-025); /* #F5F4F0 15.00:1 on surface · 16.75 on bg · 13.08 on alt */ --color-text-muted: var(--p-graphite-400); /* #A8A79E 6.83:1 on surface · 7.62 on bg · 5.95 on alt */ --color-text-subtle: var(--p-graphite-450); /* #93928A 5.28:1 on surface · 5.90 on bg · 4.61 on alt */ --color-text-on-accent: var(--p-graphite-950); --color-border: #34342F; --color-border-strong: #4E4E47; --color-separator: #2E2E2A; --color-action-primary-bg: var(--p-graphite-025); --color-action-primary-fg: var(--p-graphite-950); /* 15.84:1 */ --color-action-primary-hover: #FFFFFF; --color-action-primary-active: #DEDDD7; --color-action-secondary-bg: var(--p-graphite-850); --color-action-secondary-fg: var(--p-graphite-025); --color-action-secondary-border: #4E4E47; --color-action-ghost-fg: var(--p-graphite-400); --color-action-danger-bg: #F27272; --color-action-danger-fg: #1A1A18; --color-state-hover: rgba(245, 244, 240, 0.06); --color-state-active: rgba(245, 244, 240, 0.12); --color-state-selected: var(--p-graphite-850); --color-state-disabled-bg: var(--p-graphite-850); --color-state-disabled-fg: #6B6B63; --color-accent: var(--p-saffron-500); --color-accent-strong: #E0A233; --color-accent-text: #F0BF63; /* 9.70:1 on surface */ /* Status marks stay fixed (AROS-011-011); only the TEXT companions re-tone. */ --color-status-good-text: #4ED44E; /* 8.53:1 on surface */ --color-status-warning-text: #F5B833; /* 9.27:1 on surface */ --color-status-serious-text: #F0996F; /* 7.46:1 on surface */ --color-status-critical-text: #F27272; /* 5.84:1 on surface */ --color-status-good-surface: rgba(78, 212, 78, 0.14); --color-status-warning-surface: rgba(245, 184, 51, 0.16); --color-status-serious-surface: rgba(240, 153, 111, 0.16); --color-status-critical-surface: rgba(242, 114, 114, 0.16); --color-focus-ring: var(--p-graphite-025); --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-focus-ring); --elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.32); --elevation-overlay: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.50); --elevation-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45); --viz-plot: #1A1A19; /* the surface the palette was validated against */ --viz-grid: #2E2E2A; --viz-axis: #3D3D38; } /* =========================================================================== APPLE-LIGHT (alternate tenant theme) — the app's current look, re-expressed as AROS semantic roles. Proof of AROS-011-005/023: same tokens, new values, zero component change. :root[data-theme="apple-light"] =========================================================================== */ :root[data-theme="apple-light"] { --theme-name: "apple-light"; --theme-mode: "light"; --color-bg: var(--p-apple-gray-100); /* #F2F2F7 */ --color-surface: rgba(255, 255, 255, 0.74); /* glass over bg */ --color-surface-alt: rgba(120, 120, 128, 0.12); --color-surface-sunken: rgba(120, 120, 128, 0.16); /* Ratios computed against the composited planes: white #FFFFFF (card), #F2F2F7 (page), #E5E5EA (surface-alt over page). */ --color-text: var(--p-apple-gray-950); /* #1C1C1E 17.01:1 · 15.25 · 13.55 */ --color-text-muted: var(--p-apple-gray-700); /* #5B5B60 6.75:1 · 6.05 · 5.38 */ --color-text-subtle: var(--p-apple-gray-600); /* #636366 5.99:1 · 5.37 · 4.77 */ --color-text-on-accent: #FFFFFF; --color-border: rgba(0, 0, 0, 0.11); --color-border-strong: rgba(0, 0, 0, 0.26); --color-separator: rgba(60, 60, 67, 0.08); /* NOTE: primary is #0069D9, not the legacy #007AFF. #007AFF measures 4.02:1 on white and fails AA as text; #0069D9 measures 5.22:1. AROS-011-012 is a hard gate above visual preference, so the alternate theme ships the darker system blue. */ --color-action-primary-bg: var(--p-apple-blue-600); --color-action-primary-fg: #FFFFFF; /* 5.22:1 */ --color-action-primary-hover: #0057B4; --color-action-primary-active: #00458F; --color-action-secondary-bg: rgba(255, 255, 255, 0.74); --color-action-secondary-fg: var(--p-apple-blue-600); --color-action-secondary-border: rgba(0, 0, 0, 0.11); --color-action-ghost-fg: var(--p-apple-gray-700); --color-action-danger-bg: #C9282D; --color-action-danger-fg: #FFFFFF; /* 5.49:1 */ --color-state-hover: rgba(0, 0, 0, 0.04); --color-state-active: rgba(0, 0, 0, 0.08); --color-state-selected: rgba(0, 105, 217, 0.10); --color-state-disabled-bg: rgba(120, 120, 128, 0.12); --color-state-disabled-fg: #8E8E93; --color-accent: var(--p-apple-blue-500); --color-accent-strong: var(--p-apple-blue-600); --color-accent-text: var(--p-apple-blue-600); /* 5.22:1 on white */ --color-focus-ring: var(--p-apple-blue-600); --elevation-flat: none; --elevation-raised: 0 2px 16px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.10); --elevation-overlay: 0 4px 24px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.12); --elevation-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05); --surface-blur: blur(20px) saturate(180%); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* card */ --radius-xl: 22px; --radius-pill: 999px; --viz-plot: #FFFFFF; --viz-grid: rgba(60, 60, 67, 0.10); --viz-axis: rgba(60, 60, 67, 0.22); } :root[data-theme="apple-light"][data-mode="dark"] { --theme-mode: "dark"; --color-bg: #000000; --color-surface: rgba(28, 28, 30, 0.78); --color-surface-alt: rgba(120, 120, 128, 0.24); --color-surface-sunken: rgba(120, 120, 128, 0.32); --color-text: #F5F5F7; /* 15.63:1 on #1C1C1E */ --color-text-muted: #AEAEB2; /* 7.69:1 on #1C1C1E */ --color-text-subtle: #98989D; /* 5.93:1 on #1C1C1E */ --color-text-on-accent: #FFFFFF; --color-border: rgba(255, 255, 255, 0.14); --color-border-strong: rgba(255, 255, 255, 0.30); --color-separator: rgba(255, 255, 255, 0.10); --color-action-primary-bg: #3B92FF; --color-action-primary-fg: #04203D; /* 5.27:1 on #3B92FF */ --color-action-primary-hover: #5AA5FF; --color-action-primary-active: #2C7FE6; --color-action-secondary-bg: rgba(120, 120, 128, 0.24); --color-action-secondary-fg: #7CB6FF; /* 8.10:1 on #1C1C1E */ --color-action-secondary-border: rgba(255, 255, 255, 0.14); --color-action-ghost-fg: #AEAEB2; --color-action-danger-bg: #FF6B6B; --color-action-danger-fg: #1C1C1E; --color-state-hover: rgba(255, 255, 255, 0.06); --color-state-active: rgba(255, 255, 255, 0.12); --color-state-selected: rgba(59, 146, 255, 0.20); --color-state-disabled-bg: rgba(120, 120, 128, 0.24); --color-state-disabled-fg: #6E6E73; --color-accent: #3B92FF; --color-accent-strong: #5AA5FF; --color-accent-text: #7CB6FF; --color-status-good-text: #4ED44E; --color-status-warning-text: #F5B833; --color-status-serious-text: #F0996F; --color-status-critical-text: #F27272; --color-focus-ring: #7CB6FF; --elevation-raised: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.12); --elevation-overlay: 0 4px 28px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.14); --elevation-inset: inset 0 1px 2px rgba(0, 0, 0, 0.55); --viz-plot: #1A1A19; --viz-grid: rgba(255, 255, 255, 0.10); --viz-axis: rgba(255, 255, 255, 0.22); } /* =========================================================================== THEME-INDEPENDENT SCALES Spacing, type, motion, z-index, breakpoints, controls, and the fixed data-encoding palette. These are the same for every tenant. =========================================================================== */ :root { /* --- Spacing — one 4px-based scale (AROS-011-013) ----------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; /* Panel body padding (§4.2) */ --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px; /* --- Typography (AROS-011-015) ------------------------------------------ */ --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --font-size-xs: 0.6875rem; /* 11px — micro-labels, axis ticks */ --font-size-sm: 0.75rem; /* 12px — captions, table meta */ --font-size-md: 0.8125rem; /* 13px — UI base */ --font-size-lg: 0.9375rem; /* 15px — body */ --font-size-xl: 1.125rem; /* 18px — section heading */ --font-size-2xl: 1.5rem; /* 24px — panel title */ --font-size-3xl: 1.875rem; /* 30px — KPI value */ --font-size-display: 3rem; /* 48px — hero figure (§4.1) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; /* hero + KPI figures */ --line-height-normal: 1.45; --line-height-relaxed: 1.65; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* uppercase eyebrow labels */ /* Numeric rendering: tabular for columns/axes, proportional for hero values */ --font-numeric-tabular: tabular-nums; --font-numeric-hero: proportional-nums; /* --- Controls & touch targets (AROS-011-014 / 103) ---------------------- */ --control-height-sm: 32px; /* pointer-fine desktop opt-in only */ --control-height-md: 40px; --control-height-lg: 44px; --touch-target-min: 44px; /* hard floor on any touch surface */ --border-width-hairline: 1px; --border-width-strong: 2px; /* --- Motion (AROS-011-017) ---------------------------------------------- */ --motion-fast: 120ms; --motion-standard: 220ms; --motion-slow: 400ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* --- Z-index ladder ----------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* --- Breakpoints (AROS-011-107) ----------------------------------------- */ /* Reference values only. CSS custom properties are NOT valid inside a media query condition, so @media rules must repeat the literal px. Keeping the numbers here makes them the single documented source. */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* --- Layout ------------------------------------------------------------- */ --layout-max-width: 1680px; --layout-gutter: var(--space-5); --layout-gutter-wide: var(--space-8); --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* ======================================================================= DATA-ENCODING PALETTE — SYSTEM CONSTANT, NOT TENANT CHROME AROS-011-027 / 056 / 059. Values are reproduced EXACTLY as validated in Book 011 §5.3. Do not re-tone, do not extend, do not cycle. A ninth series folds to "Other", small multiples, or hue x shape. ======================================================================= */ /* Categorical (identity — fixed order, assigned by entity, never by rank) */ --viz-series-1: #2A78D6; /* blue · 4.23:1 on porcelain */ --viz-series-2: #008300; /* green · 4.73:1 */ --viz-series-3: #E87BA4; /* magenta · 2.58:1 <- AROS-011-057 WARN */ --viz-series-4: #EDA100; /* yellow · 2.07:1 <- AROS-011-057 WARN */ --viz-series-5: #1BAF7A; /* aqua · 2.69:1 <- AROS-011-057 WARN */ --viz-series-6: #EB6834; /* orange · 3.06:1 */ --viz-series-7: #4A3AA7; /* violet · 8.19:1 */ --viz-series-8: #E34948; /* red · 3.78:1 */ /* Sequential — single hue light -> dark (AROS-011-059). Endpoints #CDE2FB / #0D366B are normative; the three middle stops are interpolated in the same hue and are additive, not a re-tone. */ --viz-seq-1: #CDE2FB; --viz-seq-2: #97C0F0; --viz-seq-3: #5E96DE; --viz-seq-4: #2C63A9; --viz-seq-5: #0D366B; /* Diverging — two poles + NEUTRAL GREY midpoint (never a hue at the middle) */ --viz-div-neg-strong: #B02226; --viz-div-neg: #E34948; --viz-div-mid: #F0EFEC; --viz-div-pos: #2A78D6; --viz-div-pos-strong: #0D366B; /* Estimate / forecast treatment (AROS-011-001 / 061) — non-colour, always on */ --viz-estimate-dash: 6 4; /* stroke-dasharray for forecast segments */ --viz-estimate-band-opacity: 0.16; /* confidence band fill */ --viz-estimate-hatch-angle: 45deg; --viz-estimate-mark-opacity: 0.72; --viz-now-rule: var(--color-border-strong); /* Chart geometry (AROS-011-063) */ --viz-stroke-width: 2px; --viz-marker-size: 8px; --viz-gap: 2px; /* min surface gap between adjacent/stacked fills */ } /* Dark mode swaps the validated dark palette row (§5.3), both themes. */ :root[data-mode="dark"] { --viz-series-1: #3987E5; /* 4.79:1 on #1A1A19 */ --viz-series-2: #008300; /* 3.52:1 */ --viz-series-3: #D55181; /* 4.41:1 */ --viz-series-4: #C98500; /* 5.67:1 */ --viz-series-5: #199E70; /* 5.11:1 */ --viz-series-6: #D95926; /* 4.48:1 */ --viz-series-7: #9085E9; /* 5.57:1 */ --viz-series-8: #E66767; /* 5.39:1 */ --viz-div-mid: #383835; } /* =========================================================================== REDUCED MOTION (AROS-011-017 / 104) Collapses the motion tokens AND neutralises the animations already hard-coded in the legacy stylesheet. Information is never carried by motion alone. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 1ms; --motion-standard: 1ms; --motion-slow: 1ms; --transition: none; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* =========================================================================== LEGACY ALIAS LAYER --------------------------------------------------------------------------- Every custom property that public/css/styles.css, public/js/**, or public/index.html consumes, re-pointed at an AROS semantic token. Because this block sits at :root with the same specificity as the legacy :root in styles.css and is loaded afterwards, it wins the cascade — the entire app re-skins with zero edits to the legacy CSS or markup. Aliases resolve through whichever theme block won, so switching data-theme / data-mode carries the legacy names along automatically. =========================================================================== */ :root { /* --- Surfaces & ink ----------------------------------------------------- */ --bg: var(--color-bg); --card-bg: var(--color-surface); --glass-bg: var(--color-surface); --card-border: var(--color-border); --border: var(--color-border); --border-color: var(--color-border); --separator: var(--color-separator); --fill: var(--color-surface-alt); --card-shadow: var(--elevation-raised); --card-hover-shadow: var(--elevation-overlay); --text-primary: var(--color-text); --text-secondary: var(--color-text-muted); --text-tertiary: var(--color-text-subtle); --text-dim: var(--color-text-subtle); --secondary: var(--color-text-muted); /* --- Chrome accent ------------------------------------------------------- Graphite's primary action is ink, not a hue (Book 011 §1.3: chrome carries no hue of its own so it cannot compete with data for meaning). All 33 legacy --blue usages — buttons, active nav, focus borders, accent-color — therefore become ink under Graphite and system blue under Apple-Light. */ --blue: var(--color-action-primary-bg); --accent-blue: var(--color-action-primary-bg); --accent-primary: var(--color-action-primary-bg); /* --- Legacy semantic hues -> fixed status TEXT companions ---------------- styles.css uses these as running text (.positive / .negative / sync status), so they must bind the AA-safe text companions, not the fixed mark colours (which are 1.76:1 and 2.52:1 and would fail AROS-011-012). */ --green: var(--color-status-good-text); --red: var(--color-status-critical-text); --orange: var(--color-status-serious-text); --yellow: var(--color-status-warning-text); /* --- Legacy decorative hues -> validated series slots -------------------- */ --indigo: var(--viz-series-7); /* violet */ --purple: var(--viz-series-7); /* violet */ --pink: var(--viz-series-3); /* magenta */ --teal: var(--viz-series-5); /* aqua */ --mint: var(--viz-series-5); /* aqua */ /* --- Chart colours referenced from public/js/** -------------------------- Bind identity slots, not status hues (AROS-011-060). --chart-red is the red *series* slot; a state-red belongs to --color-status-critical. */ --chart-blue: var(--viz-series-1); --chart-green: var(--viz-series-2); --chart-red: var(--viz-series-8); /* --- Geometry & motion --------------------------------------------------- */ --radius: var(--radius-lg); /* legacy 16px -> theme card radius */ --radius-sm: var(--radius-md); /* legacy 12px */ --radius-xs: var(--radius-sm); /* legacy 8px */ --transition: all var(--motion-standard) var(--ease-standard); /* --- Type ---------------------------------------------------------------- */ --font-mono: var(--font-family-mono); /* --- Per-element properties, defaulted so a missing inline value degrades -- --accent is set inline on .card-icon-wrap by public/js/** ; --imp-color by the pitch deck. Inline styles outrank :root, so these are fallbacks only. --bar-w is intentionally NOT defaulted: it is a width the pitch animation writes per element, and a root default would pin un-animated bars to it. */ --accent: var(--color-action-primary-bg); --imp-color: var(--color-text); }