/** * CubeWP Console — design tokens (U1). * * THE RULE: no module may use raw hex/px for themed properties. Everything * routes through these custom properties. This is what makes dark mode a * palette file, WaaS white-labeling a one-file override, and visual drift * (the four-modal-dialects era) mechanically impossible. * * Naming is SEMANTIC (--cw-danger, never --cw-red): meaning survives theming. * Loaded before every other stylesheet. */ :root { /* ── Brand ─────────────────────────────────────────────── */ --cw-accent: #5641F3; --cw-accent-hover: #4733D6; --cw-accent-subtle: #F5F4FF; /* tinted backgrounds */ --cw-accent-border: #DFDBFB; --cw-accent-ink: #FFFFFF; /* text on accent */ /* ── Ink (text) — AA-clean on white; the old #9c9cb5 tier is retired ── */ --cw-ink: #16161F; /* headings, primary emphasis */ --cw-text: #3A3A4A; /* body */ --cw-text-soft: #5D5D70; /* meta/secondary — ≈6.3:1, replaces #6b6b85 AND #9c9cb5 */ --cw-text-faint: #8A8A9E; /* ONLY ≥14px or decorative; never sole carrier of meaning */ /* ── Surfaces ──────────────────────────────────────────── */ --cw-bg: #F7F7FB; /* canvas */ --cw-surface: #FFFFFF; /* cards, panels */ --cw-surface-2: #F1F1F6; /* wells, hover tints, code */ --cw-border: #E8E8F0; --cw-border-strong: #D6D6E2; /* ── Status (Health language, §16.5) ───────────────────── */ --cw-ok: #16A34A; --cw-ok-bg: #E8F7EE; --cw-ok-border: #BFE8CD; --cw-warn: #D97706; --cw-warn-bg: #FDF3E0; --cw-warn-border: #F3DFB5; --cw-danger: #DC2626; --cw-danger-bg: #FEF1F1; --cw-danger-border: #F8CFCF; --cw-info: #5641F3; --cw-info-bg: #F5F4FF; --cw-info-border: #DFDBFB; /* ── Charts (sequential of brand) ──────────────────────── */ --cw-chart-1: var(--cw-accent); --cw-chart-2: #8B7CF7; --cw-chart-3: #C9C2FB; /* ── Typography ────────────────────────────────────────── */ --cw-font: 'Inter Tight', system-ui, -apple-system, sans-serif; --cw-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; --cw-display: 700 28px/34px var(--cw-font); --cw-title: 650 20px/28px var(--cw-font); --cw-heading: 600 16px/24px var(--cw-font); --cw-body: 450 14px/22px var(--cw-font); --cw-small: 450 13px/20px var(--cw-font); --cw-micro: 500 12px/16px var(--cw-font); /* the floor — nothing below 12px */ /* ── Space (4-base) ────────────────────────────────────── */ --cw-s1: 4px; --cw-s2: 8px; --cw-s3: 12px; --cw-s4: 16px; --cw-s5: 20px; --cw-s6: 24px; --cw-s7: 32px; --cw-s8: 48px; --cw-s9: 64px; /* ── Radius ────────────────────────────────────────────── */ --cw-r-sm: 6px; /* inputs, badges */ --cw-r-md: 10px; /* buttons, wells */ --cw-r-lg: 14px; /* cards, panels */ --cw-r-full: 999px; /* ── Elevation ─────────────────────────────────────────── */ --cw-e1: 0 1px 3px rgba(22, 22, 31, .06); --cw-e2: 0 8px 30px rgba(22, 22, 31, .12); /* ── Motion ────────────────────────────────────────────── */ --cw-t-micro: 120ms ease-out; --cw-t-std: 200ms ease-out; --cw-t-panel: 280ms cubic-bezier(.32, .72, .24, 1); /* ── Layout ────────────────────────────────────────────── */ --cw-content-max: 1200px; --cw-header-h: 56px; } /* ══ Dark theme (U8) ══════════════════════════════════════════════════════ Exactly what the semantic naming promised: a palette file, not a rewrite. It remaps BOTH the Console tokens and the LEGACY signup.css variables (--bg/--surface/--text/…), so pre-redesign surfaces come along instead of glowing white in the middle of a dark app. Applied by [data-theme="dark"] on . The toggle sets it explicitly; with no stored choice we follow the OS. */ /* ⚠ `html[data-theme="dark"]`, NOT `[data-theme="dark"]`. signup.css redefines the LEGACY vars (--bg/--surface/--border/--text) on `:root`, which has the same (0,1,0) specificity as a bare attribute selector — and it loads AFTER this file. Every legacy override below was therefore silently losing the cascade, which is why dark mode rendered as dark --cw-* cards sitting on a white legacy sidebar and paper background. Adding the element qualifier makes this (0,1,1) so it wins on specificity rather than on load order. Do not remove the `html`. */ html[data-theme="dark"] { /* Brand — lifted slightly; #5641F3 is too dense against a dark canvas. */ --cw-accent: #7C6BF7; --cw-accent-hover: #8E80F9; --cw-accent-subtle: #1E1B3A; --cw-accent-border: #332E63; --cw-accent-ink: #FFFFFF; --cw-ink: #F4F4F9; --cw-text: #D2D2DF; --cw-text-soft: #9C9CB2; /* ≈6.1:1 on --cw-surface — AA on dark */ --cw-text-faint: #71718A; --cw-bg: #0F0F15; --cw-surface: #17171F; --cw-surface-2: #1E1E29; --cw-border: #262632; --cw-border-strong: #343443; --cw-ok: #34D399; --cw-ok-bg: #10281E; --cw-ok-border: #1D4636; --cw-warn: #FBBF24; --cw-warn-bg: #2A2213; --cw-warn-border: #4A3A1A; --cw-danger: #F87171; --cw-danger-bg: #2B1618; --cw-danger-border: #4A2226; --cw-info: #7C6BF7; --cw-info-bg: #1E1B3A; --cw-info-border: #332E63; --cw-chart-1: #7C6BF7; --cw-chart-2: #9B8DF9; --cw-chart-3: #4A4180; --cw-e1: 0 1px 3px rgba(0, 0, 0, .5); --cw-e2: 0 10px 34px rgba(0, 0, 0, .6); /* Legacy palette (signup.css) — carried into dark so old tabs don't glare. */ --bg: #0F0F15; --surface: #17171F; --border: #262632; --border-2: #343443; --text: #F4F4F9; --muted: #C2C2D2; --muted-2: #9C9CB2; --accent: #7C6BF7; --accent-h: #9385FA; --border-ink: rgba(255, 255, 255, .10); --shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, .6); } /* Follow the OS until the user chooses — [data-theme="light"] opts back out. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } [data-theme="dark"] { color-scheme: dark; } /* Images/embeds that assume a light backdrop (favicons, template thumbs) get a light plate rather than floating on black. */ [data-theme="dark"] .sc-fav-img { background: #FFFFFF; padding: 1px; border-radius: 3px; } /* Reduced motion: every animation in the product respects this globally. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }