/* ========================================================================== TOKENS — Design System Foundation (canonical, light + dark) -------------------------------------------------------------------------- Single source of truth for color, type, radius, spacing, shadow and motion across marketing, app, auth and admin chrome. design-system.css, foundation.css, components.css, motion.css and admin.css read these same custom properties, so changing a value here re-themes the whole product without touching component or page markup. Light palette: porcelain white surfaces, ink-navy text, electric violet accent, a restrained cyan/teal info tone, soft neutral borders and subtle violet-tinted elevated surfaces. THEMING (Phase 2 §5) -------------------------------------------------------------------------- Dark mode is implemented here, at the token layer, and ONLY here. There are no page-level or component-level dark overrides anywhere in the product — if something themes incorrectly in dark, the fix is a token, not a `[data-theme="dark"] .some-component` rule. Three selectors drive the whole thing: :root -> light values (the default) :root[data-theme="dark"] -> explicit user choice: dark @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) -> system preference, but only when the user has not explicitly chosen light That third selector is what makes "System" a real third option rather than a synonym for one of the other two: an explicit `data-theme="light"` always wins over the OS preference, and an absent attribute follows the OS. includes/theme-init.php sets the attribute before first paint so there is no flash, and assets/js/theme-toggle.js persists the choice. Dark is NOT an inversion of light. Surfaces get *lighter* as they rise (canvas -> surface -> raised -> overlay) exactly as they do in light mode, so elevation reads the same way in both themes. Status hues are re-picked (not merely alpha-adjusted) because #C0203D-on-near-black fails contrast badly; the dark set is tuned for >=4.5:1 on --surface. ========================================================================== */ /* Fonts (Inter + IBM Plex Mono) are linked from includes/asset-head.php with preconnect, not @imported here — an @import inside a stylesheet is a render-blocking chain. */ :root{ /* -------------------------------------------------------------------- LEGACY NAMES — still consumed by a handful of editorial marketing selectors (.surface-ink / .surface-paper alternating content bands, see design-system.css). Those bands are an intentional theme- independent editorial pattern, not "dark mode", and are addressed on their own in the marketing-site pass. Everything else in the product (header, footer, auth shell, app shell, admin) reads the semantic tokens below instead of these. -------------------------------------------------------------------- */ --ink: #10131A; /* ink-navy — editorial dark band bg / navy text */ --ink-soft: #171B24; /* editorial dark band, slightly lifted surface */ --paper: #F7F8FA; /* editorial light band bg */ --paper-soft: #F1F3F6; --cream: #F7F8FC; /* text placed on top of an editorial dark band */ --pine: #12352C; --pine-bright:#0E7A4C; /* success / positive delta, AA on white */ --amber: #6A4AEE; /* PRIMARY ACCENT — electric violet (Phase 4: was #7C5CFF, 4.34:1 on white — fails WCAG AA's 4.5:1. #6A4AEE gives 5.49:1 on white / 4.66:1 on --accent-tint.) */ --brick: #C0203D; /* danger / negative delta, AA on white */ --line-dark: rgba(16,19,26,.12); --line-light: #E3E6EC; --ink-70: rgba(16,19,26,.72); --ink-50: rgba(16,19,26,.52); --cream-70: rgba(247,248,252,.72); --cream-50: rgba(247,248,252,.52); --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --radius-sm: 10px; --radius-md: 14px; /* -------------------------------------------------------------------- SEMANTIC TOKENS — the canonical set. Every shared component and all global chrome (header, footer, auth shell, app shell, sidebar, topbar) reads these, and only these. Light values only — there is no dark counterpart to redefine. -------------------------------------------------------------------- */ --bg: #F7F8FA; /* porcelain white */ --surface: #FFFFFF; --surface-2: #F5F4FC; /* subtle violet-tinted elevated surface */ --surface-3: #EFEDFA; --text: #10131A; /* ink navy */ --text-secondary: #3E4654; --text-muted: #687080; --border: #E5E7EE; --border-strong: rgba(16,19,26,.18); --accent: var(--amber); /* electric violet */ --accent-2: #A78BFA; --accent-ink: #FFFFFF; /* text colour placed on top of --accent */ --success: #10B981; --warning: #D97706; --danger: var(--brick); --info: #2563EB; /* restrained cyan/teal-leaning blue */ /* status TEXT tokens — darker/more saturated so badges, alerts and form errors keep 4.5:1 contrast against a white/near-white surface. Kept separate from --success/--warning/--danger/--info, which stay tuned for solid button backgrounds with a fixed text colour on top. */ --success-text: #0E7A4C; --warning-text: #8A5A00; --danger-text: #C0203D; --info-text: #1D5FC4; /* -------------------------------------------------------------------- STATUS TINTS — the low-alpha wash behind badges, alerts, chips and status dots. Previously these were written inline as one-off rgba() literals in foundation/components/design-system/admin CSS (~60 of them), which is precisely why dark mode was impossible: a 6%-alpha brand hue over a near-black canvas is invisible. Tokenised here so the dark block below can raise the alpha and re-pick the hue once, centrally. -------------------------------------------------------------------- */ --success-tint: rgba(16,185,129,.12); --warning-tint: rgba(217,119,6,.13); --danger-tint: rgba(192,32,61,.10); --info-tint: rgba(37,99,235,.10); --accent-tint: rgba(106,74,238,.13); /* keyed off the new --amber (#6A4AEE) */ --neutral-tint: #EDEDF2; /* .badge-secondary and friends */ --neutral-tint-text: #5B6477; /* surfaces + borders that only existed as literals before */ --surface-overlay: #FFFFFF; /* dropdowns, popovers, menus, toasts */ --scrim: rgba(16,19,26,.44); /* modal/drawer backdrop */ --border-subtle: rgba(16,19,26,.08); --border-interactive: rgba(124,92,255,.40); --focus-ring: var(--accent); /* button hover states — were hardcoded per-variant in two files */ --btn-primary-hover: #8E70FF; --btn-danger-hover: #A01B33; --btn-success-hover: #0E9E6E; --on-accent: #FFFFFF; --on-danger: #FFFFFF; --on-success: #06231A; /* Foreground for text/glyphs on ANY solid status fill (danger/warning/ success/info/accent swatches, risk bubbles, solid chips). Light-theme status hues are dark, so ink is white; the dark-theme hues are light, so it flips to near-black. Use this instead of a literal #fff whenever the background colour is chosen dynamically from a status. */ --on-status: #FFFFFF; /* skeleton / shimmer */ --skeleton-base: rgba(16,19,26,.07); --skeleton-shine: rgba(16,19,26,.12); /* -------------------------------------------------------------------- COMPATIBILITY ALIASES (Phase 2 §14) -------------------------------------------------------------------- These names are referenced across page stylesheets and inline styles but were never declared anywhere in the product — an audit of var() references against declarations found 7 such phantom tokens with 22 references between them. Most had a hardcoded fallback and so silently ignored the theme; two had NO fallback and therefore render broken today, in light mode: --border-color app/growth/ai-visibility-command-center.php:251,275 -> `1px solid var(--border-color)` with nothing to resolve, so the border falls back to currentColor --surface-1 assets/css/reputation.css:78 -> panel background resolves to nothing (transparent) Declaring them as aliases here fixes every reference at once, in both themes, without touching a single consuming file. They are aliases, not new primitives: nothing new should start using these names — use the canonical token on the right-hand side instead. -------------------------------------------------------------------- */ --border-color: var(--border); --surface-0: var(--surface); --surface-1: var(--surface-2); --signal-dim: var(--accent); --success-bg: var(--success-tint); --warning-bg: var(--warning-tint); --danger-bg: var(--danger-tint); /* radius scale */ --radius-xs: 8px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* layout */ --container-max: 1240px; --container-wide: 1440px; --container-narrow: 760px; --gutter-sm: 16px; --section-space: 96px; --section-space-sm: 64px; /* spacing scale */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px; --space-13:120px; --space-14:160px; /* z-index scale */ --z-base:0; --z-content:1; --z-sticky:100; --z-dropdown:200; --z-modal:400; --z-toast:500; --z-command:600; /* shadow / depth — soft neutral shadows tuned for light surfaces */ --shadow-sm: 0 1px 2px rgba(16,19,26,.06); --shadow-md: 0 8px 24px rgba(16,19,26,.07); --shadow-lg: 0 24px 48px rgba(16,19,26,.09); --shadow-xl: 0 40px 80px rgba(16,19,26,.11); --glow-accent: 0 0 0 1px rgba(124,92,255,.28); --glow-success: 0 0 0 1px rgba(16,185,129,.22); --glow-danger: 0 0 0 1px rgba(225,29,72,.22); /* motion */ --duration-fast: 160ms; --duration-normal: 300ms; --duration-slow: 700ms; --duration-cinematic: 1200ms; --ease-standard: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-cinematic: cubic-bezier(.22,1,.36,1); /* -------------------------------------------------------------------- INTELLIGENCE GRAPH — node fill colors (Phase 11). Previously a hardcoded hex map duplicated in assets/js/intelligence-graph.js; that map now reads these at draw time via getComputedStyle(), so dark mode (and any future re-theme) changes the canvas without touching the JS. Same palette as the pre-Phase-11 hex map for light — values below are a starting point, not verified for WCAG contrast on --bg in either theme; a design pass should confirm before shipping broadly. -------------------------------------------------------------------- */ --ig-node-brand: #6A4AEE; --ig-node-competitor: #2563EB; --ig-node-domain: #0E7A4C; --ig-node-url: #687080; --ig-node-theme: #D97706; --ig-node-entity: #A78BFA; --ig-node-ai_query: #1D5FC4; --ig-node-comment_cluster: #C0203D; --ig-node-opportunity: #0E7A4C; --ig-node-site: #0F766E; --ig-node-page: #475569; --ig-node-campaign: #C2410C; --ig-node-alert: #B91C1C; --ig-node-action: #15803D; --ig-node-competitor_page: #1E40AF; --ig-node-cluster: #94A3B8; --ig-node-keyword: #0891B2; --ig-node-citation: #9333EA; --ig-node-narrative: #DB2777; --ig-node-default: #687080; --ig-conf-high: #0E7A4C; --ig-conf-medium: #8A5A00; --ig-conf-low: #C0203D; } /* ========================================================================== DARK THEME -------------------------------------------------------------------------- Every value below is an override of a token declared in :root above. Nothing new is introduced here, and nothing here is component-specific — that is the invariant that keeps dark mode maintainable. If you add a token to :root, add its dark counterpart here in the same position. ========================================================================== */ :root[data-theme="dark"]{ color-scheme: dark; /* Editorial/legacy names. The marketing site's alternating .surface-ink / .surface-paper bands are an intentional theme- independent editorial pattern, so --ink/--paper keep their original absolute values and are deliberately NOT flipped here. Only the derived text-opacity helpers move, since those are read by app chrome. */ --line-dark: rgba(233,236,242,.14); --line-light: #262C3A; --ink-70: rgba(233,236,242,.72); --ink-50: rgba(233,236,242,.52); /* Surfaces rise toward lighter, same as light mode rises toward white, so elevation reads identically in both themes. */ --bg: #0B0D12; --surface: #12151D; --surface-2: #181C26; --surface-3: #1F2430; --text: #E9ECF2; --text-secondary: #B4BCCB; --text-muted: #7F8899; --border: #262C3A; --border-strong: rgba(233,236,242,.22); /* Violet is legible on dark as-is, but lifted one step so it still reads as "interactive" against a #12151D card rather than sinking into it. */ --amber: #8E70FF; --accent: var(--amber); --accent-2: #B9A5FF; --accent-ink: #0B0D12; /* Status hues re-picked for >=4.5:1 on --surface. #C0203D and #0E7A4C are far too dark against near-black, so the dark set moves to the lighter end of each hue rather than reusing the light values. */ --pine-bright: #34D399; --brick: #FF6B85; --success: #34D399; --warning: #FBBF24; --danger: var(--brick); --info: #60A5FA; --success-text: #34D399; --warning-text: #FBBF24; --danger-text: #FF8CA0; --info-text: #7FB4FF; /* Tints need roughly double the alpha to register against a dark canvas, and are keyed off the brightened hues above. */ --success-tint: rgba(52,211,153,.16); --warning-tint: rgba(251,191,36,.16); --danger-tint: rgba(255,107,133,.16); --info-tint: rgba(96,165,250,.16); --accent-tint: rgba(142,112,255,.20); --neutral-tint: #232834; --neutral-tint-text: #A2AABA; --surface-overlay: #1A1F2B; /* menus sit above cards, so a step lighter */ --scrim: rgba(4,5,8,.66); --border-subtle: rgba(233,236,242,.08); --border-interactive: rgba(142,112,255,.50); --focus-ring: var(--accent); --btn-primary-hover: #A288FF; --btn-danger-hover: #FF8CA0; --btn-success-hover: #5BE0B4; --on-accent: #0B0D12; --on-danger: #2A0810; --on-success: #06231A; --on-status: #0B0D12; --skeleton-base: rgba(233,236,242,.06); --skeleton-shine: rgba(233,236,242,.11); /* Shadows carry far less signal on dark surfaces, so depth leans on the surface ramp above; these stay for layering but go deeper and tighter rather than being scaled-up versions of the light shadows. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 48px rgba(0,0,0,.55); --shadow-xl: 0 40px 80px rgba(0,0,0,.65); --glow-accent: 0 0 0 1px rgba(142,112,255,.40); --glow-success: 0 0 0 1px rgba(52,211,153,.32); --glow-danger: 0 0 0 1px rgba(255,107,133,.32); /* Intelligence Graph node fills — lightened/desaturated where the light value was tuned for a white canvas (page/url/action/alert); bright accent hues (brand/domain/keyword/etc.) carry over unchanged since they already read on dark. Not independently contrast-verified. */ --ig-node-brand: #8B72FF; --ig-node-competitor: #5B8DEF; --ig-node-domain: #22C55E; --ig-node-url: #9AA1AE; --ig-node-theme: #F59E0B; --ig-node-entity: #C4B5FD; --ig-node-ai_query: #5B8DEF; --ig-node-comment_cluster: #F87171; --ig-node-opportunity: #22C55E; --ig-node-site: #2DD4BF; --ig-node-page: #94A3B8; --ig-node-campaign: #FB923C; --ig-node-alert: #F87171; --ig-node-action: #4ADE80; --ig-node-competitor_page: #60A5FA; --ig-node-cluster: #64748B; --ig-node-keyword: #22D3EE; --ig-node-citation: #C084FC; --ig-node-narrative: #F472B6; --ig-node-default: #9AA1AE; --ig-conf-high: #22C55E; --ig-conf-medium: #EAB308; --ig-conf-low: #F87171; } /* System preference — applies only when the user has NOT explicitly picked light. Duplicating the block (rather than @extend-ing it, which CSS has no mechanism for) is the standard, dependency-free way to express this; the two selectors are kept adjacent so they stay in sync. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ color-scheme: dark; --line-dark: rgba(233,236,242,.14); --line-light: #262C3A; --ink-70: rgba(233,236,242,.72); --ink-50: rgba(233,236,242,.52); --bg: #0B0D12; --surface: #12151D; --surface-2: #181C26; --surface-3: #1F2430; --text: #E9ECF2; --text-secondary: #B4BCCB; --text-muted: #7F8899; --border: #262C3A; --border-strong: rgba(233,236,242,.22); --amber: #8E70FF; --accent: var(--amber); --accent-2: #B9A5FF; --accent-ink: #0B0D12; --pine-bright: #34D399; --brick: #FF6B85; --success: #34D399; --warning: #FBBF24; --danger: var(--brick); --info: #60A5FA; --success-text: #34D399; --warning-text: #FBBF24; --danger-text: #FF8CA0; --info-text: #7FB4FF; --success-tint: rgba(52,211,153,.16); --warning-tint: rgba(251,191,36,.16); --danger-tint: rgba(255,107,133,.16); --info-tint: rgba(96,165,250,.16); --accent-tint: rgba(142,112,255,.20); --neutral-tint: #232834; --neutral-tint-text: #A2AABA; --surface-overlay: #1A1F2B; --scrim: rgba(4,5,8,.66); --border-subtle: rgba(233,236,242,.08); --border-interactive: rgba(142,112,255,.50); --focus-ring: var(--accent); --btn-primary-hover: #A288FF; --btn-danger-hover: #FF8CA0; --btn-success-hover: #5BE0B4; --on-accent: #0B0D12; --on-danger: #2A0810; --on-success: #06231A; --on-status: #0B0D12; --skeleton-base: rgba(233,236,242,.06); --skeleton-shine: rgba(233,236,242,.11); --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 48px rgba(0,0,0,.55); --shadow-xl: 0 40px 80px rgba(0,0,0,.65); --glow-accent: 0 0 0 1px rgba(142,112,255,.40); --glow-success: 0 0 0 1px rgba(52,211,153,.32); --glow-danger: 0 0 0 1px rgba(255,107,133,.32); /* Intelligence Graph node fills — same values as the explicit dark theme block above. */ --ig-node-brand: #8B72FF; --ig-node-competitor: #5B8DEF; --ig-node-domain: #22C55E; --ig-node-url: #9AA1AE; --ig-node-theme: #F59E0B; --ig-node-entity: #C4B5FD; --ig-node-ai_query: #5B8DEF; --ig-node-comment_cluster: #F87171; --ig-node-opportunity: #22C55E; --ig-node-site: #2DD4BF; --ig-node-page: #94A3B8; --ig-node-campaign: #FB923C; --ig-node-alert: #F87171; --ig-node-action: #4ADE80; --ig-node-competitor_page: #60A5FA; --ig-node-cluster: #64748B; --ig-node-keyword: #22D3EE; --ig-node-citation: #C084FC; --ig-node-narrative: #F472B6; --ig-node-default: #9AA1AE; --ig-conf-high: #22C55E; --ig-conf-medium: #EAB308; --ig-conf-low: #F87171; } } /* Global chrome baseline. color-scheme is set per-theme above so native form controls, scrollbars and the canvas behind rubber-band scrolling follow the theme too; the light default lives here. */ html{ color-scheme: light; } body{ background:var(--bg); color:var(--text); } /* ========================================================================== MARKETING TOKENS (public site only) -------------------------------------------------------------------------- Consumed by assets/css/marketing.css. The public site is light-first and is locked to light by includes/theme-init.php, so there is intentionally no dark counterpart here — dark on marketing pages is an explicit .mk-band--dark decision, not a theme side-effect. The app keeps using the semantic tokens above. ========================================================================== */ :root{ /* surfaces */ --mk-canvas: #FFFFFF; --mk-warm: #FAF9F6; --mk-muted: #F3F2EE; --mk-tint: #F6F4FF; --mk-dark: #0D1018; --mk-dark-2: #151926; /* text */ --mk-ink: #0E1220; --mk-text: #2A3040; --mk-text-2: #4B5263; --mk-text-3: #5E6678; --mk-on-dark: #EEF0F6; --mk-on-dark-2: #A9B0C2; /* lines */ --mk-border: #E6E4DE; --mk-border-strong: #CFCCC4; --mk-border-dark: rgba(255,255,255,.12); /* brand + status */ --mk-brand: #5B3FE4; --mk-brand-hover: #4A2FCB; --mk-brand-tint: #EFEBFF; --mk-brand-on-dark: #B5A6FF; --mk-positive: #0B7A55; --mk-positive-tint: #E4F5EE; --mk-warning: #8A5A00; --mk-warning-tint:#FBF0DA; --mk-negative: #B4233F; --mk-negative-tint:#FBE7EB; --mk-info: #1D5FC4; --mk-info-tint: #E6EEFB; /* type scale */ --mk-display-xl: clamp(2.375rem, 1.6rem + 3vw, 4rem); --mk-display-lg: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); --mk-h1: clamp(2rem, 1.5rem + 2vw, 3rem); --mk-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); --mk-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4375rem); --mk-h4: 1.0625rem; --mk-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.25rem); --mk-body: 1rem; --mk-body-sm: .9375rem; --mk-caption: .8125rem; --mk-label: .75rem; --mk-metric: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); /* rhythm + shape */ --mk-gutter: clamp(20px, 4.5vw, 40px); --mk-section: clamp(56px, 3.5rem + 3vw, 112px); --mk-max: 1200px; --mk-measure: 68ch; --mk-r-1: 8px; --mk-r-2: 12px; --mk-r-3: 20px; --mk-shadow-1: 0 1px 2px rgba(14,18,32,.05); --mk-shadow-2: 0 10px 28px -10px rgba(14,18,32,.14); --mk-shadow-3: 0 30px 70px -28px rgba(14,18,32,.28); --mk-header-h: 68px; --mk-ease: cubic-bezier(.2,.7,.2,1); }