/* * Vantage client-portal design tokens. * * Stage A (2026-07-31): replaced the previous dark-only report-derived token * system (--bg-primary / --text-primary / --accent-gold / size+space+radius * scales) with the Vantage oklch token set. * * LIGHT IS THE DEFAULT. :root below is the light palette and is what every * client-area page renders with today. The previous file keyed its light * palette off :root[data-theme="light"], but nothing in the twenty-one * template tree has ever set a data-theme attribute (verified 2026-07-31: * the only data-theme references in the install are under * templates/hostiko-material/, an inactive template), so that block was * permanently inert and the portal always rendered dark. * * The .dark {} block below is intentionally INERT / future-ready. Nothing in * the template tree adds a "dark" class to or . It is kept so a * theme toggle can be wired up later by adding that one class; do not treat * its presence as evidence a toggle exists. * * Consumers of the OLD token names were migrated in the same pass: * templates/twenty-one/css/custom.css lines 967-988 (breadcrumb block). * One consumer was deliberately NOT migrated and now falls back to inherit: * modules/addons/vantage_portal/templates/client/dashboard.tpl:200,203,274 * (--text-primary / --text-secondary, no fallback values) -- addon-owned, * out of scope for Stage A. See Stage B. */ :root { --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-heading: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --background: oklch(0.982 0.005 95); --foreground: oklch(0.235 0.02 170); --card: oklch(0.998 0.002 95); --card-foreground: oklch(0.235 0.02 170); --popover: oklch(0.998 0.002 95); --popover-foreground: oklch(0.235 0.02 170); --primary: oklch(0.44 0.09 168); --primary-foreground: oklch(0.985 0.005 95); --secondary: oklch(0.945 0.015 165); --secondary-foreground: oklch(0.30 0.05 168); --muted: oklch(0.945 0.007 95); --muted-foreground: oklch(0.50 0.02 150); --accent: oklch(0.936 0.018 165); --accent-foreground: oklch(0.28 0.04 168); --destructive: oklch(0.545 0.17 27); --destructive-foreground: oklch(0.99 0.002 95); --border: oklch(0.905 0.012 120); --input: oklch(0.87 0.015 120); --ring: oklch(0.55 0.09 168); --radius: 0.625rem; --chart-1: oklch(0.50 0.10 168); --chart-2: oklch(0.72 0.12 80); --chart-3: oklch(0.55 0.09 250); --chart-4: oklch(0.58 0.10 335); --chart-5: oklch(0.68 0.09 130); --sidebar-background: oklch(0.962 0.010 150); --sidebar-foreground: oklch(0.34 0.02 165); --sidebar-primary: oklch(0.44 0.09 168); --sidebar-primary-foreground: oklch(0.985 0.005 95); --sidebar-accent: oklch(0.925 0.015 160); --sidebar-accent-foreground: oklch(0.25 0.03 168); --sidebar-border: oklch(0.895 0.012 140); --sidebar-ring: oklch(0.55 0.09 168); --v2-up-bg: oklch(0.93 0.045 160); --v2-up-fg: oklch(0.38 0.10 160); --v2-warn-bg: oklch(0.95 0.055 85); --v2-warn-fg: oklch(0.47 0.11 70); --v2-down-bg: oklch(0.937 0.04 27); --v2-down-fg: oklch(0.46 0.15 27); --v2-flag: oklch(0.72 0.13 78); } /* * INERT. No element in the twenty-one template tree carries a "dark" class. * Present so a future toggle only needs to add the class, per Stage A scope * (explicitly: do NOT build the toggle in this pass). */ .dark { --background: oklch(0.185 0.014 175); --foreground: oklch(0.94 0.008 150); --card: oklch(0.218 0.014 175); --card-foreground: oklch(0.94 0.008 150); --popover: oklch(0.218 0.014 175); --popover-foreground: oklch(0.94 0.008 150); --primary: oklch(0.80 0.10 166); --primary-foreground: oklch(0.19 0.03 170); --secondary: oklch(0.27 0.02 172); --secondary-foreground: oklch(0.90 0.01 155); --muted: oklch(0.255 0.014 172); --muted-foreground: oklch(0.70 0.015 155); --accent: oklch(0.285 0.025 170); --accent-foreground: oklch(0.93 0.01 155); --destructive: oklch(0.62 0.17 27); --destructive-foreground: oklch(0.99 0.002 95); --border: oklch(0.285 0.014 172); --input: oklch(0.33 0.015 172); --ring: oklch(0.70 0.10 166); --chart-1: oklch(0.75 0.10 166); --chart-2: oklch(0.80 0.12 85); --chart-3: oklch(0.72 0.10 250); --chart-4: oklch(0.74 0.10 335); --chart-5: oklch(0.78 0.10 130); --sidebar-background: oklch(0.163 0.013 175); --sidebar-foreground: oklch(0.88 0.01 155); --sidebar-primary: oklch(0.80 0.10 166); --sidebar-primary-foreground: oklch(0.19 0.03 170); --sidebar-accent: oklch(0.245 0.018 172); --sidebar-accent-foreground: oklch(0.93 0.01 155); --sidebar-border: oklch(0.26 0.014 172); --sidebar-ring: oklch(0.70 0.10 166); --v2-up-bg: oklch(0.30 0.06 160); --v2-up-fg: oklch(0.85 0.09 160); --v2-warn-bg: oklch(0.32 0.06 80); --v2-warn-fg: oklch(0.87 0.10 85); --v2-down-bg: oklch(0.30 0.06 27); --v2-down-fg: oklch(0.84 0.09 27); --v2-flag: oklch(0.78 0.12 80); } /* ========================================================================== * THEME SWITCHING (2026-07-31) * ========================================================================== * * Three NAMED states, selected by a data-theme attribute on (:root): * * [data-theme="strategic"] DEFAULT. The original dark/gold palette, * sourced verbatim from strategic-report-v2's * live CSS (client/styles.css:3-20). This is * what header.tpl hardcodes on and what * the pre-paint script falls back to. * [data-theme="vantage-light"] The light oklch palette that Stage A/B * shipped. Identical values to the :root block * above; that block is retained as the * no-attribute fallback so a page that somehow * renders without the attribute still gets a * complete, coherent token set rather than * undefined vars. * .dark UNCHANGED, still INERT. It is Vantage-light's * OWN dark variant and is orthogonal to * "strategic" -- do not confuse the two. No * element carries a "dark" class. * * WHY THE ATTRIBUTE MUST LIVE ON AND NOT : * custom.css:56-111 defines the entire --vantage-* family as aliases, e.g. * :root { --vantage-text: var(--foreground); --vantage-link: var(--primary); } * A custom property that references another custom property is resolved at * computed-value time ON THE ELEMENT WHERE IT IS DECLARED. Those aliases are * declared on :root, so they resolve against :root's --foreground/--primary. * Putting data-theme on would leave all 342 var(--vantage-*) consumers * in custom.css and 62 in vantage-layout-v2.css resolving against the light * :root values while only the direct --foreground/--card/... consumers flipped * -- a half-themed page. On the aliases relight for free. * * SPECIFICITY: [data-theme="x"] and :root are both (0,1,0). These blocks sit * AFTER :root in source order, so they win the tie. Do not move them above it. * * CONTRAST (computed 2026-07-31, not assumed -- sRGB relative luminance, * WCAG 2.1 ratio; composited alpha resolved against the actual backdrop): * #f5c518 gold text on --background #0a0a0f ......... 12.12:1 AA/AAA * #f5c518 gold text on --card #12121a ......... 11.43:1 AA/AAA * #f5c518 gold text on --accent #1a1a25 ......... 10.57:1 AA/AAA * #0a0a0f text on #f5c518 gold BUTTON FILL .......... 12.12:1 AA/AAA * #f0f0f0 body text on #0a0a0f ...................... 17.33:1 AAA * #f0f0f0 body text on #12121a ...................... 16.35:1 AAA * #a0a0a0 muted text on #0a0a0f ..................... 7.55:1 AAA * #a0a0a0 muted text on #12121a ..................... 7.12:1 AAA * #f5c518 focus ring on #0a0a0f (3:1 non-text) ...... 12.12:1 pass * badge up #4ade80 on 15% tint over #12121a ....... 7.98:1 AA * badge warn #fbbf24 on 15% tint over #12121a ....... 8.24:1 AA * badge down #f87171 on 15% tint over #12121a ....... 5.81:1 AA * * TWO DELIBERATE DEVIATIONS from the raw strategic-report-v2 palette, both * forced by the contrast check, both documented here rather than silently * applied: * * 1. --v2-down-fg is #f87171, NOT the palette's #ef4444. * #ef4444 on rgba(239,68,68,0.15) over --card #12121a measures 4.27:1 and * over --background #0a0a0f measures 4.60:1 -- i.e. it FAILS 4.5:1 on the * card surface, which is where every error badge in custom.css actually * renders. #f87171 is the same hue one step lighter and measures 5.81:1 / * 6.26:1. --destructive itself stays #ef4444, so borders, icons and fills * keep the exact palette red; only the badge TEXT token moved. * * 2. --destructive-foreground is #0a0a0f, NOT #f0f0f0. * #f0f0f0 on a #ef4444 fill measures 3.30:1 -- fails. #0a0a0f on the same * fill measures 5.25:1 -- passes. This also makes the theme internally * consistent: every bright accent fill (gold --primary, red --destructive) * carries near-black text. * * NOT USED, on purpose: the palette's --text-muted #666 measures 3.44:1 on * #0a0a0f and fails 4.5:1, so it is mapped nowhere text-bearing. * --muted-foreground uses #a0a0a0 (--text-secondary) instead. * * The badge and focus-ring CSS in custom.css from the prior WCAG pass is * entirely token-driven (var(--v2-*-bg/-fg), var(--ring)) with no hardcoded * colours, so it picks up whichever theme is active automatically. Nothing in * that pass was modified here. * ========================================================================== */ :root[data-theme="strategic"], [data-theme="strategic"] { /* Inter is loaded alongside Hanken Grotesk + Spline Sans Mono by includes/hooks/vantage_report_tokens.php. Mono is intentionally shared with the vantage-light theme. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --background: #0a0a0f; /* strategic-report-v2 --bg-primary */ --foreground: #f0f0f0; /* strategic-report-v2 --text-primary */ --card: #12121a; /* --bg-secondary */ --card-foreground: #f0f0f0; --popover: #12121a; --popover-foreground: #f0f0f0; --primary: #f5c518; /* --accent-gold */ --primary-foreground: #0a0a0f; --secondary: #1a1a25; /* --bg-tertiary */ --secondary-foreground: #f0f0f0; --muted: #1a1a25; --muted-foreground: #a0a0a0; /* --text-secondary */ --accent: #1a1a25; --accent-foreground: #f5c518; --destructive: #ef4444; /* --accent-red */ --destructive-foreground: #0a0a0f; /* deviation 2 above */ --border: #2a2a3a; /* --border-color */ --input: #2a2a3a; --ring: #f5c518; --radius: 0.625rem; /* unchanged: prior-pass radius token */ --chart-1: #f5c518; --chart-2: #4ade80; --chart-3: #3b82f6; --chart-4: #fbbf24; --chart-5: #a0a0a0; --sidebar-background: #12121a; --sidebar-foreground: #f0f0f0; --sidebar-primary: #f5c518; --sidebar-primary-foreground: #0a0a0f; --sidebar-accent: #1a1a25; --sidebar-accent-foreground: #f5c518; --sidebar-border: #2a2a3a; --sidebar-ring: #f5c518; --v2-up-bg: rgba(74, 222, 128, 0.15); /* tint of --accent-green */ --v2-up-fg: #4ade80; --v2-warn-bg: rgba(251, 191, 36, 0.15); /* tint of --accent-yellow */ --v2-warn-fg: #fbbf24; --v2-down-bg: rgba(239, 68, 68, 0.15); /* tint of --accent-red */ --v2-down-fg: #f87171; /* deviation 1 above */ --v2-flag: #f5c518; } /* Explicit named state for the Stage A/B light palette. Values are a verbatim copy of the :root block at the top of this file -- keep the two in sync if either is ever retuned. */ :root[data-theme="vantage-light"], [data-theme="vantage-light"] { --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-heading: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --background: oklch(0.982 0.005 95); --foreground: oklch(0.235 0.02 170); --card: oklch(0.998 0.002 95); --card-foreground: oklch(0.235 0.02 170); --popover: oklch(0.998 0.002 95); --popover-foreground: oklch(0.235 0.02 170); --primary: oklch(0.44 0.09 168); --primary-foreground: oklch(0.985 0.005 95); --secondary: oklch(0.945 0.015 165); --secondary-foreground: oklch(0.30 0.05 168); --muted: oklch(0.945 0.007 95); --muted-foreground: oklch(0.50 0.02 150); --accent: oklch(0.936 0.018 165); --accent-foreground: oklch(0.28 0.04 168); --destructive: oklch(0.545 0.17 27); --destructive-foreground: oklch(0.99 0.002 95); --border: oklch(0.905 0.012 120); --input: oklch(0.87 0.015 120); --ring: oklch(0.55 0.09 168); --radius: 0.625rem; --chart-1: oklch(0.50 0.10 168); --chart-2: oklch(0.72 0.12 80); --chart-3: oklch(0.55 0.09 250); --chart-4: oklch(0.58 0.10 335); --chart-5: oklch(0.68 0.09 130); --sidebar-background: oklch(0.962 0.010 150); --sidebar-foreground: oklch(0.34 0.02 165); --sidebar-primary: oklch(0.44 0.09 168); --sidebar-primary-foreground: oklch(0.985 0.005 95); --sidebar-accent: oklch(0.925 0.015 160); --sidebar-accent-foreground: oklch(0.25 0.03 168); --sidebar-border: oklch(0.895 0.012 140); --sidebar-ring: oklch(0.55 0.09 168); --v2-up-bg: oklch(0.93 0.045 160); --v2-up-fg: oklch(0.38 0.10 160); --v2-warn-bg: oklch(0.95 0.055 85); --v2-warn-fg: oklch(0.47 0.11 70); --v2-down-bg: oklch(0.937 0.04 27); --v2-down-fg: oklch(0.46 0.15 27); --v2-flag: oklch(0.72 0.13 78); } /* Theme picker control. Deliberately token-driven so it is legible in BOTH themes without a per-theme override. Lives in the always-rendered navbar toolbar (header.tpl), not the logged-in-only topbar, so logged-out visitors can switch too. */ .vantage-theme-picker { display: inline-flex; align-items: center; } .vantage-theme-picker select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.2; padding: 0.375rem 1.75rem 0.375rem 0.625rem; color: var(--foreground); background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius, 0.375rem); /* Caret drawn with currentColor so it inverts with the theme. */ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .vantage-theme-picker select:hover { border-color: var(--ring); } .vantage-theme-picker select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .vantage-theme-picker select option { /* Native option lists do not inherit; give them explicit theme colours so the open dropdown is not white-on-white / black-on-black. */ color: var(--foreground); background-color: var(--card); }