/** * MDC Design System — tokens * Aesthetic: commercial mono (Tesla / SpaceX / x.com) * * Primary API: --mdc-* * Legacy alias: --fog-* (same values; retire over time) * * Themes: * default = dark shell (apps + marketing) * [data-theme="light"] = light shell (TCO tables) */ :root { /* ── Brand (invert only — never a third hue for chrome) ── */ --mdc-brand: #FFFFFF; --mdc-brand-hover: #E8E8E8; --mdc-brand-pressed: #D0D0D0; /* Text/icon ON brand fill — always contrast pair with --mdc-brand */ --mdc-brand-ink: #000000; --mdc-brand-soft: rgba(255, 255, 255, 0.10); --mdc-brand-glow: rgba(255, 255, 255, 0.14); /* ── Surfaces (dark) ── */ --mdc-surface-0: #000000; /* deepest / hero */ --mdc-surface-1: #0A0A0A; /* body */ --mdc-surface-2: #111111; /* section */ --mdc-surface-3: #161616; /* card */ --mdc-surface-4: #222222; /* raised / hover */ /* ── Ink on dark ── */ --mdc-ink-primary: #FFFFFF; --mdc-ink-secondary: #E6E6E6; --mdc-ink-tertiary: #A3A3A3; --mdc-ink-muted: #737373; --mdc-ink-faint: rgba(255, 255, 255, 0.45); --mdc-ink-inverse: #000000; /* ── Lines ── */ --mdc-line-subtle: rgba(255, 255, 255, 0.06); --mdc-line: rgba(255, 255, 255, 0.12); --mdc-line-strong: rgba(255, 255, 255, 0.22); /* ── Semantic (status / engineering only) ── */ --mdc-ok: #22C55E; --mdc-warn: #EAB308; --mdc-critical: #EF4444; --mdc-info: #38BDF8; /* Thermal / metric (DLC diagrams — keep stable names via Tailwind) */ --mdc-temp-supply: #7DD3FC; --mdc-temp-return: #FB923C; --mdc-metric-power: #FFFFFF; /* was brand yellow — now mono */ --mdc-metric-heat: #EF4444; --mdc-metric-flow: #22D3EE; /* ── Layout ── */ --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 (dark default) ── */ --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-2); --mdc-header-bg: rgba(0, 0, 0, 0.92); /* ══════════════════════════════════════════════════════════ * Legacy Fog aliases — map to mono. Do not add new --fog-* keys. * ══════════════════════════════════════════════════════════ */ --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); /* Text sitting on brand fill. NEVER use --fog-black for this — on light theme brand and fog-black are both near-black (invisible label). */ --fog-on-brand: var(--mdc-brand-ink); --fog-on-yellow: var(--mdc-brand-ink); --fog-black: var(--mdc-surface-0); /* fog-ink* = fixed dark type for LIGHT panels on marketing pages. Do not alias to mdc-ink-primary (white on dark shells). */ --fog-ink: #0A0A0A; --fog-ink-2: #1A1A1A; --fog-ink-3: #666666; --fog-ink-4: #999999; --fog-surface-light: #FFFFFF; --fog-surface: #FFFFFF; --fog-surface-50: #FAFAFA; --fog-surface-100: #F4F4F4; --fog-surface-200: #E8E8E8; --fog-line: var(--mdc-line); --fog-line-strong: var(--mdc-line-strong); --fog-ease: var(--mdc-ease); --fog-navy: var(--mdc-surface-0); --fog-cyan: var(--mdc-info); --ease: var(--mdc-ease); /* Semantic legacy used by tco-ui */ --blue: #1F3A8A; --black: var(--mdc-ink-inverse); --green: var(--mdc-ok); --red: var(--mdc-critical); --fog-warn-amber: var(--mdc-warn); --hl: var(--mdc-brand-soft); --bd: var(--mdc-line); --bg: var(--mdc-bg); --hdr: var(--mdc-surface-0); --sub: var(--mdc-surface-2); } /* ── Light shell (TCO finance tables) ───────────────────────── */ [data-theme="light"], .theme-light { --mdc-brand: #0A0A0A; --mdc-brand-hover: #1A1A1A; --mdc-brand-pressed: #000000; --mdc-brand-ink: #FFFFFF; --mdc-brand-soft: rgba(0, 0, 0, 0.06); --mdc-brand-glow: rgba(0, 0, 0, 0.10); --mdc-surface-0: #FFFFFF; --mdc-surface-1: #FAFAFA; --mdc-surface-2: #F4F4F4; --mdc-surface-3: #FFFFFF; --mdc-surface-4: #EBEBEB; --mdc-ink-primary: #0A0A0A; --mdc-ink-secondary: #1A1A1A; --mdc-ink-tertiary: #525252; --mdc-ink-muted: #737373; --mdc-ink-faint: rgba(0, 0, 0, 0.40); --mdc-ink-inverse: #FFFFFF; --mdc-line-subtle: rgba(0, 0, 0, 0.06); --mdc-line: rgba(0, 0, 0, 0.12); --mdc-line-strong: rgba(0, 0, 0, 0.22); --mdc-metric-power: #0A0A0A; --mdc-bg: #FFFFFF; --mdc-fg: #0A0A0A; --mdc-muted: #525252; --mdc-border: rgba(0, 0, 0, 0.12); --mdc-card: #FFFFFF; --mdc-input-bg: #FAFAFA; --mdc-header-bg: #0A0A0A; /* dark bar on light pages still OK */ /* re-bind fog aliases so light theme propagates */ --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-black: #0A0A0A; /* hero bar stays near-black on light TCO */ --fog-ink: #0A0A0A; --fog-ink-2: #1A1A1A; --fog-ink-3: #525252; --fog-ink-4: #737373; --fog-line: #E0E0E0; --fog-line-strong: #C8C8C8; --hl: var(--mdc-brand-soft); --bd: var(--fog-line); --bg: var(--mdc-surface-1); --hdr: #0A0A0A; --sub: var(--mdc-surface-2); --black: var(--mdc-ink-primary); }