/* ============================================================ AGS THEME LAYER — light + dark tokens (ticket #987) Author: Echo (marketing/creative lead), 2026-08-03 MECHANISM: this file extends the SAME mechanism custom.css already uses — CSS custom properties on :root. It does not introduce a parallel system. Dark stays the DEFAULT (:root); light is an override selected by [data-theme="light"] on . Nothing changes for an existing user who never picks. LOAD ORDER (base.html): tailwind.css -> ags-theme.css -> custom.css ags-theme.css must come BEFORE custom.css so custom.css's own :root block can be reduced to the values that are genuinely theme-invariant. Both files define :root; last-in wins per property, so any token custom.css still sets would override. The shipped modified custom.css has had its themed tokens removed for exactly this reason. ============================================================ */ /* ------------------------------------------------------------ THEME-INVARIANT TOKENS (identical in both themes) These are structure, not colour. They carry the reference image's geometry: generous radii, quiet spacing, big type. ------------------------------------------------------------ */ :root { /* Brand fill — the ONE constant. AGS gold is the same physical colour in both themes; only the INK derived from it changes. */ --gold-fill: #C7A35A; --gold-fill-hover: #B88933; /* Text that sits ON a gold fill. DARK IN BOTH THEMES — this is the token most likely to be "helpfully" inverted. Do not. Measured: #1A1712 on #C7A35A = 7.50:1. White on gold = 2.38:1 (fails). */ --on-gold: #1A1712; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — reference-derived. The hero numeral is the star. */ --type-metric-xl: 3.25rem; /* 52px — the "123,689" hero numeral */ --type-metric-lg: 2.5rem; /* 40px — secondary hero */ --type-display: 1.75rem; /* 28px — card titles ("Desktop usage") */ --type-body: 0.9375rem; /* 15px */ --type-small: 0.8125rem; /* 13px */ --type-label: 0.6875rem; /* 11px — the uppercase tracked label */ --tracking-label: 0.08em; --metric-tabular: "tnum" 1, "lnum" 1; /* font-feature-settings for numerals */ /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Radius — reference is generously rounded */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 9999px; /* Layout */ --sidebar-width: 200px; --sidebar-collapsed: 64px; --header-height: 64px; --chat-width: 320px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Z-index */ --z-sidebar: 100; --z-header: 90; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; --z-chat: 150; } /* ------------------------------------------------------------ DARK THEME — the DEFAULT. Values preserved from the shipped custom.css so existing screens are pixel-identical, except where a token had to be ADDED for light parity. ------------------------------------------------------------ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-primary: #0B0B0D; --bg-secondary: #111215; --bg-tertiary: #111215; --bg-card: #17181C; --bg-card-hover: #1E2025; --bg-input: #111215; --bg-subtle: #1E2025; /* NEW — tinted well (btn-secondary, table stripe) */ --bg-overlay: rgba(0, 0, 0, 0.65); /* Gold */ --gold: #C7A35A; --gold-hover: #B88933; --gold-champagne: #E4D3A2; /* INK use (a:hover, badge-prospect) */ --gold-highlight: #E4D3A2; /* FILL use (decorative gradients) */ --gold-bronze: #87652C; --gold-tint: rgba(199, 163, 90, 0.10); --gold-glow: rgba(199, 163, 90, 0.25); /* Accent used for TEXT / icons / thin strokes. On dark, the raw brand gold already reads: measured #C7A35A on #17181C = 7.45:1. */ --gold-ink: #C7A35A; /* Text — measured #F5F0E8 on #0B0B0D = 17.33:1 */ --text-primary: #F5F0E8; --text-muted: #C8C0B4; --text-subtle: #9E978C; /* on card = 6.13:1 */ --text-inverse: #0B0B0D; /* Borders — split into DECORATIVE vs CONTROL. A hairline divider has no contrast obligation; an input boundary does (WCAG 1.4.11 non-text contrast, 3:1). */ --border: #31343C; --border-light: #24262C; --border-hairline: #24262C; --border-control: #63697A; /* 3.42:1 on --bg-input. NOTE: the shipped #3E414A measured 1.84:1 — a PRE-EXISTING dark-theme 1.4.11 failure this change also fixes. */ --border-gold: rgba(199, 163, 90, 0.35); /* Status — fill + ink. On dark the saturated value works as ink. */ --success: #22C55E; --success-ink: #4ADE80; --success-bg: rgba(34, 197, 94, 0.10); --warning: #F59E0B; --warning-ink: #FBBF24; --warning-bg: rgba(245, 158, 11, 0.10); --danger: #EF4444; --danger-ink: #F87171; --danger-bg: rgba(239, 68, 68, 0.10); --on-status: #0B0B0D; /* text on a saturated status fill */ /* Elevation — on dark, elevation is SHADOW */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.40); --shadow-gold: 0 0 20px rgba(199, 163, 90, 0.15); /* Data-visualisation — categorical. All 5 measured >= 6.1:1 on the dark card. Never distinguish series by colour ALONE: pair with --viz-pattern-* / direct labels / dash arrays. */ --viz-1: #5FA894; /* pine 6.35:1 */ --viz-2: #C7A35A; /* bronze 7.45:1 */ --viz-3: #D9906A; /* clay 6.88:1 */ --viz-4: #8FA4C9; /* slate 7.03:1 */ --viz-5: #C286A6; /* plum 6.13:1 */ /* Data-visualisation — sequential (heatmap, 4 steps, low->high) */ --viz-seq-0: #1E2025; --viz-seq-1: #2E4A43; --viz-seq-2: #3F6B60; --viz-seq-3: #519082; --viz-seq-4: #6FBBA6; /* Chart furniture */ --viz-grid: #24262C; --viz-axis: #9E978C; --viz-track: #24262C; /* unfilled portion of a progress bar */ } /* ------------------------------------------------------------ LIGHT THEME — warm paper, not white. Every colour below was measured, not eyeballed. Ratios are stated against the surface the token is actually used on. ------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; /* Surfaces. Page is a paper tone (#FAF7F0), cards sit LIGHTER than the page — the reference's inversion of the usual "cards are darker" habit, and the reason it feels calm. */ --bg-primary: #FAF7F0; --bg-secondary: #F3EFE6; --bg-tertiary: #F3EFE6; --bg-card: #FFFDF9; --bg-card-hover: #F7F3EA; --bg-input: #FFFDF9; --bg-subtle: #F3EFE6; --bg-overlay: rgba(26, 23, 18, 0.45); /* Gold. --gold stays the brand fill; --gold-ink is the DARKENED gold used wherever gold becomes TEXT or a thin stroke. Raw #C7A35A on cream measures 2.34:1 — it FAILS, which is precisely why this token exists. */ --gold: #C7A35A; --gold-hover: #B88933; /* champagne was ONE token doing two jobs: bright INK on dark, and the light end of decorative GRADIENTS. Those diverge under a light theme (ink must go darker, the gradient must not), so it is now split. */ --gold-champagne: #8A6B26; /* INK — 5.0:1 on card, goes DARKER not lighter */ --gold-highlight: #E4D3A2; /* FILL — unchanged, still the light end of a gradient */ --gold-bronze: #6E5218; --gold-tint: rgba(110, 82, 24, 0.08); --gold-glow: rgba(110, 82, 24, 0.16); --gold-ink: #6E5218; /* 7.17:1 on card — deliberately matched to dark's 7.45:1 */ /* Text */ --text-primary: #1A1712; /* 16.70:1 on page, 17.59:1 on card */ --text-muted: #57503F; /* 7.48:1 on page */ --text-subtle: #6B6252; /* 5.62:1 on page, 5.92:1 on card — the small-caps label */ --text-inverse: #FAF7F0; /* Borders */ --border: #E4DCCB; --border-light: #EFE9DC; --border-hairline: #E4DCCB; /* 1.27:1 — DECORATIVE ONLY, never a control edge */ --border-control: #8A7E66; /* 3.73:1 on page — inputs, toggles, checkboxes */ --border-gold: rgba(110, 82, 24, 0.30); /* Status — saturated web-default greens/ambers FAIL on cream (#22C55E = 2.24:1, #F59E0B = 2.11:1). Fills keep the familiar hue; the *ink* variants are what text and icons use. */ /* The FILL is darkened too, not just the ink. White on the raw #22C55E measures 2.28:1 — a solid "Won" badge would have been unreadable. */ --success: #15803D; --success-ink: #15803D; --success-bg: rgba(21, 128, 61, 0.10); --warning: #A16207; --warning-ink: #A16207; --warning-bg: rgba(161, 98, 7, 0.10); --danger: #B91C1C; --danger-ink: #B91C1C; --danger-bg: rgba(185, 28, 28, 0.10); --on-status: #FFFFFF; /* 5.02:1 / 4.92:1 / 6.47:1 on the three fills above */ /* Elevation — on light, elevation is BORDER + a whisper of shadow. The reference has almost no shadow; reusing dark's 0.2-0.4 black alpha here produces grey haloes and is the single fastest way to make a light theme look cheap. */ --shadow-sm: 0 1px 2px rgba(26, 23, 18, 0.04); --shadow-md: 0 2px 6px rgba(26, 23, 18, 0.06); --shadow-lg: 0 8px 24px rgba(26, 23, 18, 0.08); --shadow-gold: 0 0 0 1px rgba(110, 82, 24, 0.20); /* Data-visualisation — categorical. All 5 measured >= 5.6:1 on card. */ --viz-1: #2F5D50; /* pine 7.38:1 */ --viz-2: #6E5218; /* bronze 7.17:1 */ --viz-3: #8C5A3B; /* clay 5.68:1 */ --viz-4: #4A5A7A; /* slate 6.81:1 */ --viz-5: #7A4A63; /* plum 6.92:1 */ /* Sequential — the reference's four teal tints, kept as the one place teal survives (see the deliverable note). */ --viz-seq-0: #EDE7DA; --viz-seq-1: #BFD8D0; --viz-seq-2: #8FBDB0; --viz-seq-3: #5A9384; --viz-seq-4: #2F5D50; --viz-grid: #EFE9DC; --viz-axis: #6B6252; --viz-track: #EDE7DA; } /* ------------------------------------------------------------ FIRST-VISIT DEFAULT A user who has never chosen follows the OS, but only if they have expressed a preference for light. Absent any signal the product stays dark — dark is the AGS identity. base.html writes an explicit data-theme before first paint, so this block only governs the no-JS / pre-hydration case. ------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }