/** * MDCX Design System — tokens (Theme v2.0) * Aesthetic: commercial mono, cool-neutral (X / Tesla / SpaceX lineage) * * Primary API: --mdc-* * Legacy alias: --fog-* (pass-throughs only — never a literal hex) * * Themes (shell.js · prefers-color-scheme + localStorage): * default / [data-theme="dark"] = Night * [data-theme="light"] = Day * * Rules that are easy to get wrong — read docs/THEME.md before editing: * · surface-0..4 is an ELEVATION ramp (0 sunken -> 4 floating), monotonic in BOTH themes. * · Interaction state is --mdc-state-*, never a surface swap. * · Header follows the theme (--mdc-header-*). Nothing in the header uses on-media. * · --mdc-on-media* is for photos / video / 3D / fixed dark bands ONLY. * · Lines are solid per theme. --mdc-line-input is mandatory on form controls (>=3:1). * · Accent is split: --mdc-accent (fill) vs --mdc-accent-text (links). * · FAMILIES: a foreground and its background must both be theme-following * (surface/ink/line/brand/accent/header/state/fog) or both fixed * (on-media*/band-*). Never one of each — that is broken in exactly one * theme, and it is always Day. See docs/THEME.md §0.5. * Full table: docs/THEME.md · docs/MDCX-DESIGN-LANGUAGE.md §3 */ :root, [data-theme="dark"] { /* ── Brand: mono invert. Never a hue. ── */ --mdc-brand: #FAFBFC; --mdc-brand-hover: #FFFFFF; --mdc-brand-pressed: #DCDFE5; --mdc-brand-ink: #0C0E12; --mdc-brand-soft: rgba(250, 251, 252, 0.10); --mdc-brand-glow: rgba(250, 251, 252, 0.14); /* ── X Blue accent — hue locked 215–219°, fill and text are separate roles. Rationed: at most one accent moment per view region (D-12). ── */ --mdc-accent: #2F6FE0; /* fill: CTA bg, active chip white ink 4.70:1 */ --mdc-accent-hover: #2762CE; /* darkens (same direction in both themes) */ --mdc-accent-pressed: #1F55BA; --mdc-accent-ink: #FFFFFF; --mdc-accent-text: #6BA1F8; /* links, active nav label 7.43:1 on canvas */ --mdc-accent-soft: rgba(47, 111, 224, 0.16); --mdc-accent-ring: #4C8DF6; /* ── Surfaces: ELEVATION ramp. 0 = sunken … 4 = floating. ── */ --mdc-surface-0: #08090C; /* wells, insets, code blocks, track bg */ --mdc-surface-1: #0C0E12; /* page canvas */ --mdc-surface-2: #111419; /* section band, table header */ --mdc-surface-3: #171A20; /* card, panel, input */ --mdc-surface-4: #1E222A; /* popover, dialog, dropdown */ --mdc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.60); --mdc-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55); --mdc-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.65); /* ── Interaction state: overlays composited on the surface beneath. ── */ --mdc-state-hover: rgba(255, 255, 255, 0.055); --mdc-state-active: rgba(255, 255, 255, 0.090); --mdc-state-selected: rgba(47, 111, 224, 0.16); /* ── Ink on canvas. Floor is ink-muted @ 4.89:1 on surface-3. ── */ --mdc-ink-primary: #FAFBFC; --mdc-ink-secondary: #DCDFE5; --mdc-ink-tertiary: #9AA1AE; --mdc-ink-muted: #808898; --mdc-ink-inverse: #0C0E12; /* --mdc-ink-faint REMOVED — use --mdc-ink-muted */ /* ── Header: theme-aware. NOTHING here uses on-media. ── */ --mdc-header-bg: rgba(12, 14, 18, 0.82); --mdc-header-bg-solid: #0C0E12; --mdc-header-line: #232830; --mdc-header-ink: #FAFBFC; --mdc-header-ink-muted: #9AA1AE; /* ── On media: photos, video posters, 3D, fixed dark bands. Fixed light. ── */ --mdc-on-media: #FFFFFF; --mdc-on-media-muted: rgba(255, 255, 255, 0.66); --mdc-on-media-faint: rgba(255, 255, 255, 0.52); /* was .44 — 4.34:1 on band-surface */ --mdc-on-media-line: rgba(255, 255, 255, 0.16); --mdc-on-media-ink: #0C0E12; /* ink ON an on-media fill 19.3:1 */ --mdc-on-media-fill: rgba(255, 255, 255, 0.10); /* ghost button on media 15.9:1 */ --mdc-on-media-fill-hover: rgba(255, 255, 255, 0.18); --mdc-band-dark: #08090C; --mdc-band-surface: #171A20; /* card ON a band 17.4:1 */ --mdc-band-surface-hover: #1E222A; --mdc-band-dark-scrim: linear-gradient(180deg, rgba(8,9,12,0) 0%, rgba(8,9,12,0.72) 100%); /* ── Lines: SOLID per theme. line-input is mandatory on form controls. ── */ --mdc-line-subtle: #16191F; --mdc-line: #232830; --mdc-line-strong: #363D48; --mdc-line-input: #5C6472; /* 3.24:1 vs canvas — WCAG 1.4.11 */ /* ── Status quartet: machine truth only. Never brand/decorate/CTA. ── */ --mdc-ok: #34D399; --mdc-warn: #FBBF24; --mdc-critical: #F87171; --mdc-info: #38BDF8; /* ── Thermal / metric: diagrams only, never chrome. ── */ --mdc-temp-supply: #7DD3FC; --mdc-temp-return: #FB923C; --mdc-metric-power: var(--mdc-ink-primary); --mdc-metric-heat: var(--mdc-critical); --mdc-metric-flow: #22D3EE; /* ── Layout (unchanged) ── */ --mdc-max-content: 1120px; --mdc-max-wide: 1600px; --mdc-header-h: 56px; --mdc-radius: 2px; --mdc-radius-panel: 2px; --mdc-radius-chip: 2px; --mdc-space-1: 4px; --mdc-space-2: 8px; --mdc-space-3: 12px; --mdc-space-4: 16px; --mdc-space-5: 24px; --mdc-space-6: 40px; --mdc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --mdc-font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; --mdc-ease: linear; --mdc-duration: 120ms; /* ── Page shell ── */ --mdc-bg: var(--mdc-surface-1); --mdc-fg: var(--mdc-ink-primary); --mdc-muted: var(--mdc-ink-tertiary); --mdc-border: var(--mdc-line); --mdc-card: var(--mdc-surface-3); --mdc-input-bg: var(--mdc-surface-3); color-scheme: dark; } /* ── Day ─────────────────────────────────────────────────────── */ [data-theme="light"], .theme-light { --mdc-brand: #12151A; --mdc-brand-hover: #262B33; --mdc-brand-pressed: #000000; --mdc-brand-ink: #FAFBFC; --mdc-brand-soft: rgba(18, 21, 26, 0.06); --mdc-brand-glow: rgba(18, 21, 26, 0.10); --mdc-accent: #1560CC; /* white ink 5.87:1 */ --mdc-accent-hover: #1252AC; --mdc-accent-pressed: #0E4491; --mdc-accent-ink: #FFFFFF; --mdc-accent-text: #1560CC; /* 5.47:1 on canvas */ --mdc-accent-soft: rgba(21, 96, 204, 0.09); --mdc-accent-ring: #1560CC; /* Monotonic in ELEVATION, same as Night: 0 sunken … 4 floating. */ --mdc-surface-0: #E6E9EE; --mdc-surface-1: #F5F7F9; --mdc-surface-2: #FAFBFC; --mdc-surface-3: #FFFFFF; --mdc-surface-4: #FFFFFF; /* Day cannot exceed white — use shadow-2 */ --mdc-shadow-1: 0 1px 2px rgba(18, 21, 26, 0.06); --mdc-shadow-2: 0 8px 24px rgba(18, 21, 26, 0.10); --mdc-shadow-3: 0 20px 48px rgba(18, 21, 26, 0.14); --mdc-state-hover: rgba(18, 21, 26, 0.045); --mdc-state-active: rgba(18, 21, 26, 0.075); --mdc-state-selected: rgba(21, 96, 204, 0.09); --mdc-ink-primary: #12151A; --mdc-ink-secondary: #262B33; --mdc-ink-tertiary: #565E6C; --mdc-ink-muted: #646C7A; --mdc-ink-inverse: #FAFBFC; --mdc-header-bg: rgba(245, 247, 249, 0.82); --mdc-header-bg-solid: #F5F7F9; --mdc-header-line: #DCE0E6; --mdc-header-ink: #12151A; --mdc-header-ink-muted: #565E6C; /* on-media + band-dark intentionally not overridden — stay light-on-dark */ --mdc-line-subtle: #E9ECF0; --mdc-line: #DCE0E6; --mdc-line-strong: #C3C9D2; --mdc-line-input: #7E8899; /* 3.33:1 vs canvas */ --mdc-ok: #067A46; --mdc-warn: #8A5A00; --mdc-critical: #C0261F; --mdc-info: #0B6BA8; --mdc-metric-power: var(--mdc-ink-primary); --mdc-metric-heat: var(--mdc-critical); --mdc-bg: var(--mdc-surface-1); --mdc-fg: var(--mdc-ink-primary); --mdc-muted: var(--mdc-ink-tertiary); --mdc-border: var(--mdc-line); --mdc-card: var(--mdc-surface-3); --mdc-input-bg: var(--mdc-surface-3); color-scheme: light; } /* ── Atomic theme switch (THEME.md §1) ────────────────────────── */ html.mdcx-theme-switching, html.mdcx-theme-switching *, html.mdcx-theme-switching *::before, html.mdcx-theme-switching *::after { transition: none !important; animation-play-state: paused !important; } /* ── Legacy --fog-* alias layer ────────────────────────────────── PASS-THROUGHS ONLY. No literal hex here, ever. */ :root, [data-theme="dark"], [data-theme="light"], .theme-light { --fog-yellow: var(--mdc-brand); --fog-yellow-hover: var(--mdc-brand-hover); --fog-yellow-pressed: var(--mdc-brand-pressed); --fog-yellow-soft: var(--mdc-brand-soft); --fog-yellow-glow: var(--mdc-brand-glow); --fog-on-brand: var(--mdc-brand-ink); --fog-on-yellow: var(--mdc-brand-ink); --fog-ink: var(--mdc-ink-primary); --fog-ink-2: var(--mdc-ink-secondary); --fog-ink-3: var(--mdc-ink-tertiary); --fog-ink-4: var(--mdc-ink-muted); --fog-black: var(--mdc-surface-1); --fog-navy: var(--mdc-band-dark); --fog-surface: var(--mdc-surface-3); --fog-surface-light: var(--mdc-surface-3); --fog-surface-50: var(--mdc-surface-2); --fog-surface-100: var(--mdc-surface-2); --fog-surface-200: var(--mdc-surface-0); --fog-line: var(--mdc-line); --fog-line-strong: var(--mdc-line-strong); --fog-ease: var(--mdc-ease); --fog-cyan: var(--mdc-info); --fog-warn-amber: var(--mdc-warn); --ease: var(--mdc-ease); --blue: var(--mdc-accent); --black: var(--mdc-ink-primary); --green: var(--mdc-ok); --red: var(--mdc-critical); }