/* Design Tokens - Brand Variables + Responsive typography */ /* Responsive root: scale down on small viewports so text doesn’t dominate */ html { font-size: clamp(12px, 1.8vw + 10px, 16px); } :root { /* Brand Colors */ --color-primary: #E07B39; --color-primary-dark: #C3682C; --color-primary-light: #ECA679; /* Secondary Colors */ --color-secondary: #6C757D; --color-secondary-dark: #5A6268; --color-secondary-light: #868E96; /* Text Colors */ --color-text-primary: #212529; --color-text-secondary: #6C757D; --color-text-light: #FFFFFF; --color-text-muted: #868E96; /* Text on primary-colored UI (nav pills, admin chrome): dark for contrast on bright primary */ --color-on-primary: #212529; /* Text on a primary-filled BUTTON specifically. Defaults to --color-on-primary (same AA-computed value) so the 8 org presets are unaffected; atlas-default overrides this in themes.css to white — on this orange, dark text clears WCAG AA (~5.2:1) but reads as lower-contrast/harder to see than the math suggests, so this is a deliberate product override of the AA-only pick. */ --color-button-fg: var(--color-on-primary); /* Background Colors */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F8F9FA; /* DEPRECATED: semantically overloaded ("darkest surface" in dark themes, "subtle raised grey" in light themes). Do not add new uses. Table/footer uses migrate to --color-table-header-bg / --color-surface-sunken. See docs/ARCHITECTURE.md §3.2. */ --color-bg-dark: #212529; /* ── Borders + neutral surfaces (mode-owned, Bucket S) ─────────────────── Re-declared by the two ramps in ui-mode.css. See ARCHITECTURE.md §3.1. */ --color-border: #DEE2E6; /* default divider / table cell border */ --color-border-strong: #CED4DA; /* input + control borders */ --color-border-subtle: #E9ECEF; /* hairlines, inner separators */ --color-surface-raised: #FFFFFF; /* cards/popovers above the page bg */ --color-surface-sunken: #F1F3F5; /* wells, toolbars, zebra rows */ --color-surface-hover: #E9ECEF; /* row / menu hover */ --color-overlay-scrim: rgba(0, 0, 0, 0.45); /* modal backdrops */ --shadow-color: rgba(0, 0, 0, 0.12); /* single source for shadows */ /* ── Tables (retires the --color-bg-dark overload) ─── ARCHITECTURE.md §3.2 --color-table-header-bg / -fg are a PAIRED token: never declare one without the other, in any theme or ramp. */ --color-table-header-bg: #212529; --color-table-header-fg: var(--color-text-light); --color-table-row-bg: var(--color-bg-primary); --color-table-row-fg: var(--color-text-primary); --color-table-row-alt-bg: var(--color-surface-sunken); --color-table-row-hover-bg: var(--color-surface-hover); --color-table-border: var(--color-border); /* ── Navbar chrome (org-owned, Bucket A) ───────────── ARCHITECTURE.md §3.3 The light/dark ramps must NEVER declare these: navbar chrome is brand identity, not page surface, and it does not flip with the mode toggle. */ --color-navbar-bg: var(--color-primary); /* AA fix: white on #E07B39 is ~3.0:1; --color-on-primary (#212529) is ~5.2:1. The 8 themes with a dark nav bar set their own white --color-navbar-fg. */ --color-navbar-fg: var(--color-on-primary); --color-navbar-fg-muted: rgba(0, 0, 0, 0.55); --color-navbar-link: var(--color-on-primary); --color-navbar-fg-active: var(--color-on-primary); --color-navbar-border: transparent; --color-navbar-menu-bg: var(--color-bg-secondary); --color-navbar-menu-border: var(--color-border); --color-navbar-menu-fg: var(--color-text-primary); /* Link Colors */ --color-link: #E07B39; --color-link-hover: #C3682C; --color-link-visited: #9E5A2E; /* Status Colors */ --color-success: #28A745; --color-error: #DC3545; --color-warning: #FFC107; --color-info: #17A2B8; /* ── Derived status / accent family ───────────────── ARCHITECTURE.md §3.4 Each mixes an ORG-owned hue into a MODE-owned background, so these adapt on both axes with zero per-theme maintenance. The -fg members are re-declared per ramp (ui-mode.css) to guarantee contrast on the flipped surface; -surface / -border members follow --color-bg-primary for free. */ --color-success-surface: color-mix(in srgb, var(--color-success) 14%, var(--color-bg-primary)); --color-success-border: color-mix(in srgb, var(--color-success) 40%, var(--color-bg-primary)); --color-success-fg: var(--color-success); --color-error-surface: color-mix(in srgb, var(--color-error) 14%, var(--color-bg-primary)); --color-error-border: color-mix(in srgb, var(--color-error) 40%, var(--color-bg-primary)); --color-error-fg: var(--color-error); --color-warning-surface: color-mix(in srgb, var(--color-warning) 14%, var(--color-bg-primary)); --color-warning-border: color-mix(in srgb, var(--color-warning) 40%, var(--color-bg-primary)); --color-warning-fg: var(--color-warning); --color-info-surface: color-mix(in srgb, var(--color-info) 14%, var(--color-bg-primary)); --color-info-border: color-mix(in srgb, var(--color-info) 40%, var(--color-bg-primary)); --color-info-fg: var(--color-info); --color-accent-surface: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-primary)); --color-accent-border: color-mix(in srgb, var(--color-primary) 40%, var(--color-bg-primary)); --color-selected-bg: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-primary)); --color-focus-ring: color-mix(in srgb, var(--color-primary) 45%, transparent); /* ── Domain-semantic: calendar / workcenter events ── ARCHITECTURE.md §3.5 These encode ERP MEANING, not decoration. Hue must survive every theme and both modes; only luminance adapts. */ --color-cal-ok-bg: var(--color-surface-sunken); --color-cal-ok-line: var(--color-secondary-dark); --color-cal-ok-fg: var(--color-success-fg); --color-cal-short-bg: var(--color-warning-surface); --color-cal-short-line: var(--color-error); --color-cal-short-fg: var(--color-error-fg); --color-cal-parent-bg: var(--color-surface-sunken); --color-cal-parent-line: var(--color-border-strong); --color-cal-parent-fg: var(--color-text-secondary); /* Typography */ --font-primary: Verdana, Geneva, sans-serif; --font-weight-normal: 400; --font-weight-bold: 700; /* Fluid font sizes (scale with viewport, stay within min/max) */ --font-size-xs: clamp(0.65rem, 1.2vw + 0.5rem, 0.75rem); --font-size-sm: clamp(0.75rem, 1.4vw + 0.5rem, 0.875rem); --font-size-base: clamp(0.8125rem, 1.6vw + 0.5rem, 1rem); --font-size-lg: clamp(0.9375rem, 1.8vw + 0.5rem, 1.125rem); --font-size-xl: clamp(1rem, 2vw + 0.5rem, 1.25rem); --font-size-2xl: clamp(1.125rem, 2.5vw + 0.5rem, 1.5rem); --font-size-3xl: clamp(1.25rem, 3vw + 0.5rem, 1.875rem); --font-size-4xl: clamp(1.375rem, 4vw + 0.5rem, 2.25rem); /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Spacing (use rem so it scales with html font-size) */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* Border Radius */ --border-radius-sm: 0.25rem; --border-radius-md: 0.5rem; --border-radius-lg: 1rem; --border-radius-full: 9999px; /* Shadows — expressed in terms of --shadow-color so they deepen in dark mode for free (ARCHITECTURE.md §3.1). NOTE: this raises the alpha of the 7 existing var(--shadow-*) consumers from 0.05/0.06/0.10 to a uniform 0.12; intentional, and the only shadow change in Wave 0. */ --shadow-sm: 0 1px 2px 0 var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color); /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-normal: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; /* Layout (fixed navbar/footer) */ --navbar-height: 70px; --footer-height: 50px; } /* ============================================================================ DEPRECATED ALIASES — ARCHITECTURE.md §3.6 These names are referenced by legacy CSS/templates that predate the token system and were never defined anywhere, so every use silently resolved to a hardcoded fallback literal that no theme could reach. Defining them here routes those uses through the theme/mode system. ⚠ Adding these definitions CHANGES RENDERING TODAY in all 9 themes — it is a reviewable visual change, not a mechanical no-op. Each line records the fallback literal(s) it displaces so the delta is auditable. DELETE each line once the referencing file has been through the colour audit (see docs/ARCHITECTURE.md §4 — Waves 1 and 2). NOT aliased on purpose (assigned at runtime by JS via style.setProperty, never meant to have a CSS definition; allowlisted in scripts/color_audit.py): --tip-x, --tip-y, --ag-coscroll-header-h, --workflow-process-cols, --bfb-accent, --bfb-saccent ============================================================================ */ :root { /* ── surfaces / borders ── */ --border-color: var(--color-border); /* was #dee2e6 x5, #ced4da x1 */ --surface: var(--color-bg-primary); /* was #fff */ --surface-muted: var(--color-bg-secondary); /* was #f8f9fa x2 */ --bg-subtle: var(--color-surface-sunken); /* was #f8f9fa */ --color-surface: var(--color-bg-primary); /* was #fff */ --color-background-secondary: var(--color-bg-secondary); /* was #f5f5f5 x3 */ --color-bg-tertiary: var(--color-surface-hover); /* was UNDEFINED (transparent) x2 */ --color-bg-hover: var(--color-surface-hover); /* was UNDEFINED x2, rgba(0,0,0,.05) x1 */ --color-secondary-lighter: var(--color-surface-hover); /* was #e8e8e8 */ --color-neutral-100: var(--color-surface-sunken); /* was #f3f4f6 x3 */ --color-neutral-200: var(--color-border-subtle); /* was #e5e7eb x4, #e5e5e5 x1 */ --color-neutral-300: var(--color-border); /* was UNDEFINED x8, #d4d4d4 x10, #d1d5db x2, #ced4da x2 */ /* ── text ── */ --text-muted: var(--color-text-muted); /* was #6c757d x4, #495057 x2 */ /* ── grid rows (atlas_grid.css) ── */ --color-row-hover: var(--color-surface-hover); /* was #fff7e6 (warm amber) x2 */ --color-row-selected: var(--color-selected-bg); /* was #e7f1ff x2 */ --color-row-even: var(--color-table-row-alt-bg);/* was #f3f5f8 x2 */ --color-row-border: var(--color-table-border); /* was #d4d8de x2 */ /* ── accents ── */ --primary: var(--color-primary); /* was #007bff x5 */ --color-brand: var(--color-primary); /* was #e87722 x2 */ --color-brand-primary: var(--color-primary); /* was #2e5cad x4 */ --color-accent: var(--color-primary); /* was #0d6efd */ --color-danger: var(--color-error); /* was #dc3545 x4, #dc2626 x1, red x2 */ /* ── admin object-tools (admin_inline_header.css) ── */ --object-tools-bg: var(--color-primary); /* was UNDEFINED */ --object-tools-fg: var(--color-on-primary); /* was UNDEFINED x2 */ --object-tools-hover-bg: var(--color-primary-dark); /* was UNDEFINED */ /* ── typography / geometry ── */ --font-size-md: var(--font-size-base); /* was UNDEFINED x8 */ --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* was monospace x3 */ --font-weight-regular: var(--font-weight-normal); /* was UNDEFINED */ --font-weight-medium: 500; /* was UNDEFINED x40, 500 x3, 600 x1 */ --font-weight-semibold: 600; /* was UNDEFINED x1, 600 x1 */ --border-radius: var(--border-radius-sm); /* was 4px x2 */ } /* Apply primary font to body */ body { font-family: var(--font-primary); color: var(--color-text-primary); background-color: var(--color-bg-primary); }