/* Color Modes — Semantic Design Tokens * Source of truth: Figma variables export (2026-03-02) * Collection: "1. Color modes" * * Architecture: * tokens.css → Primitive values (hex colors, raw scales) * color-modes.css → Semantic tokens (light/dark mode mappings) * Component files → Component-specific styles * * This file contains ONLY semantic token definitions. * Component styles belong in their respective component CSS files. * * Dark mode implementation: * 1. @media (prefers-color-scheme: dark) — respects OS preference * 2. [data-theme="dark"] — explicit JS toggle * Both blocks contain identical values (necessary in plain CSS). */ /* ================================================================ * LIGHT MODE (default) * ================================================================ */ :root, [data-theme="light"] { /* ── Text ───────────────────────────────────────────────────── */ --text-primary: var(--color-black); /* Base.black */ --text-secondary: var(--neutral-brand-600); /* Neutral Brand.600 */ --text-tertiary: var(--neutral-brand-500); /* Neutral Brand.500 */ --text-quaternary: var(--neutral-500); /* Neutral.500 */ --text-secondary-hover: var(--neutral-brand-800); /* Neutral Brand.800 */ --text-tertiary-hover: var(--neutral-brand-700); /* Neutral Brand.700 */ --text-disabled: var(--neutral-brand-400); /* Neutral Brand.400 */ --text-placeholder: var(--neutral-brand-400); /* Neutral Brand.400 */ --text-placeholder-subtle: var(--neutral-brand-300);/* Neutral Brand.300 */ --text-white: var(--color-white); /* Base.white */ --text-brand-primary: var(--brand-800); /* Primary.800 */ --text-brand-primary-alt: var(--brand-700); /* Primary.700 */ --text-brand-secondary: var(--brand-600); /* Primary.600 */ --text-brand-tertiary: var(--brand-500); /* Primary.500 */ --text-brand-tertiary-alt: var(--brand-600); /* Primary.600 */ --text-primary-on-brand: var(--color-white); /* Base.white */ --text-secondary-on-brand: var(--brand-200); /* Primary.200 */ --text-tertiary-on-brand: var(--brand-200); /* Primary.200 */ --text-quaternary-on-brand: var(--brand-300); /* Primary.300 */ --text-error-primary: var(--error-700); /* Error.700 */ --text-error-secondary: var(--error-800); /* Error.800 */ --text-warning-primary: var(--warning-800); /* Warning.800 */ --text-warning-secondary: var(--warning-900); /* Warning.900 */ --text-success-secondary: var(--success-900); /* Success.900 */ /* ── Border ─────────────────────────────────────────────────── */ --border-primary: var(--neutral-brand-300); /* Neutral Brand.300 */ --border-secondary: var(--neutral-brand-200); /* Neutral Brand.200 */ --border-tertiary: var(--neutral-brand-100); /* Neutral Brand.100 */ --border-brand: var(--brand-500); /* Primary.500 */ --border-brand-alt: var(--brand-600); /* Primary.600 */ --border-brand-tabs: var(--brand-700); /* Primary.700 */ --border-disabled: var(--neutral-brand-300); /* Neutral Brand.300 */ --border-disabled-subtle: var(--neutral-brand-200); /* Neutral Brand.200 */ --border-error: var(--error-500); /* Error.500 */ --border-error-subtle: var(--error-300); /* Error.300 */ --border-success: var(--success-500); /* Success.500 */ --border-success-subtle: var(--success-300); /* Success.300 */ --border-warning: var(--warning-500); /* Warning.500 */ --border-warning-subtle: var(--warning-300); /* Warning.300 */ /* ── Foreground (icons, decorative elements) ────────────────── */ --fg-primary: var(--neutral-brand-900); /* Neutral Brand.900 */ --fg-secondary: var(--neutral-brand-700); /* Neutral Brand.700 */ --fg-tertiary: var(--neutral-brand-600); /* Neutral Brand.600 */ --fg-tertiary-hover: var(--neutral-brand-700); /* Neutral Brand.700 */ --fg-quaternary: var(--neutral-brand-500); /* Neutral Brand.500 */ --fg-quaternary-hover: var(--neutral-brand-600); /* Neutral Brand.600 */ --fg-quinary: var(--neutral-brand-400); /* Neutral Brand.400 */ --fg-quinary-hover: var(--neutral-brand-500); /* Neutral Brand.500 */ --fg-senary: var(--neutral-brand-300); /* Neutral Brand.300 */ --fg-secondary-hover: var(--neutral-brand-800); /* Neutral Brand.800 */ --fg-disabled: var(--neutral-brand-400); /* Neutral Brand.400 */ --fg-disabled-subtle: var(--neutral-brand-300); /* Neutral Brand.300 */ --fg-white: var(--color-white); /* Base.white */ --fg-brand-primary: var(--brand-600); /* Primary.600 */ --fg-brand-primary-alt: var(--brand-600); /* Primary.600 */ --fg-brand-secondary: var(--brand-500); /* Primary.500 */ --fg-error-primary: var(--error-600); /* Error.600 */ --fg-error-secondary: var(--error-500); /* Error.500 */ --fg-success-primary: var(--success-600); /* Success.600 */ --fg-success-secondary: var(--success-500); /* Success.500 */ --fg-warning-primary: var(--warning-600); /* Warning.600 */ --fg-warning-secondary: var(--warning-500); /* Warning.500 */ /* ── Background ─────────────────────────────────────────────── */ --bg-primary: var(--color-white); /* Base.white */ --bg-primary-alt: var(--color-white); /* Base.white */ --bg-primary-hover: var(--neutral-brand-50); /* Neutral Brand.50 */ --bg-primary-solid: var(--neutral-brand-950); /* Neutral Brand.950 */ --bg-secondary: var(--neutral-brand-50); /* Neutral Brand.50 */ --bg-secondary-alt: var(--neutral-brand-50); /* Neutral Brand.50 */ --bg-secondary-hover: var(--neutral-brand-100); /* Neutral Brand.100 */ --bg-secondary-subtle: var(--neutral-brand-25); /* Neutral Brand.25 */ --bg-secondary-solid: var(--neutral-brand-600); /* Neutral Brand.600 */ --bg-tertiary: var(--neutral-brand-100); /* Neutral Brand.100 */ --bg-quaternary: var(--neutral-brand-200); /* Neutral Brand.200 */ --bg-active: var(--neutral-brand-50); /* Neutral Brand.50 */ --bg-disabled: var(--neutral-brand-50); /* Neutral Brand.50 */ --bg-disabled-subtle: var(--neutral-brand-25); /* Neutral Brand.25 */ --bg-overlay: rgba(0, 0, 0, 0.6); /* alpha-black-60 */ --bg-brand-primary: var(--brand-25); /* Primary.25 */ --bg-brand-primary-alt: var(--brand-50); /* Primary.50 */ --bg-brand-secondary: var(--brand-100); /* Primary.100 */ --bg-brand-solid: var(--brand-600); /* Primary.600 */ --bg-brand-solid-hover: var(--brand-700); /* Primary.700 */ --bg-brand-section: var(--brand-800); /* Primary.800 */ --bg-brand-section-subtle: var(--brand-700); /* Primary.700 */ --bg-error-primary: var(--error-25); /* Error.25 */ --bg-error-secondary: var(--error-100); /* Error.100 */ --bg-error-solid: var(--error-600); /* Error.600 */ --bg-error-solid-secondary: var(--error-700); /* Error.700 */ --bg-warning-primary: var(--warning-50); /* Warning.50 */ --bg-warning-secondary: var(--warning-100); /* Warning.100 */ --bg-warning-solid: var(--warning-400); /* Warning.400 */ --bg-success-primary: var(--success-50); /* Success.50 */ --bg-success-secondary: var(--success-100); /* Success.100 */ --bg-success-solid: var(--success-600); /* Success.600 */ --bg-highlight: var(--violet-50); /* Violet.50 */ --bg-highlight-hover: var(--violet-100); /* Violet.100 */ /* ── Icons ───────────────────────────────────────────────────── */ --icon-fg-primary: var(--neutral-brand-700); /* Utility.Gray.700 */ --icon-fg-subtle: var(--neutral-brand-500); /* Utility.Gray.500 */ --icon-fg-brand: var(--brand-700); /* Primary.700 */ --icon-fg-brand-secondary: var(--brand-600); /* Primary.600 */ --icon-fg-brand-on-brand: var(--brand-200); /* Primary.200 */ --icon-fg-error: var(--error-700); /* Error.700 */ --icon-fg-success: var(--success-800); /* Success.800 */ --icon-fg-warning: var(--warning-700); /* Warning.700 */ /* ── Effects ─────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.1); --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1); --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08); --shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08); --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.12); --shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.08); --shadow-skeuomorphic-inner: inset 0 -1px 0 0 rgba(16, 24, 40, 0.05); --shadow-skeuomorphic-inner-border: inset 0 0 0 1px rgba(16, 24, 40, 0.18); --focus-ring: 0 0 0 4px var(--brand-500); --focus-ring-error: 0 0 0 4px var(--error-500); /* ── Project-specific (not in Figma export) ──────────────────── */ --bg-canvas: var(--neutral-brand-25); /* Page-level background */ } /* ================================================================ * DARK MODE — System preference * Applies when OS is dark AND no explicit light theme is set. * Values are identical to [data-theme="dark"] below. * ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* ── Text ───────────────────────────────────────────────── */ --text-primary: var(--neutral-50); /* Neutral.50 */ --text-secondary: var(--neutral-300); /* Neutral.300 */ --text-tertiary: var(--neutral-400); /* Neutral.400 */ --text-quaternary: var(--neutral-400); /* Neutral.400 */ --text-secondary-hover: var(--neutral-200); /* Neutral.200 */ --text-tertiary-hover: var(--neutral-300); /* Neutral.300 */ --text-disabled: var(--neutral-500); /* Neutral.500 */ --text-placeholder: var(--neutral-600); /* Neutral.600 */ --text-placeholder-subtle: var(--neutral-700); /* Neutral.700 */ --text-white: var(--color-white); /* Base.white */ --text-brand-primary: var(--brand-300); /* Primary.300 */ --text-brand-primary-alt: var(--brand-400); /* Primary.400 */ --text-brand-secondary: var(--brand-500); /* Primary.500 */ --text-brand-tertiary: var(--brand-600); /* Primary.600 */ --text-brand-tertiary-alt: var(--brand-500); /* Primary.500 */ --text-primary-on-brand: var(--neutral-50); /* Neutral.50 */ --text-secondary-on-brand: var(--neutral-300); /* Neutral.300 */ --text-tertiary-on-brand: var(--neutral-400); /* Neutral.400 */ --text-quaternary-on-brand: var(--neutral-400); /* Neutral.400 */ --text-error-primary: var(--error-400); /* Error.400 */ --text-error-secondary: var(--error-300); /* Error.300 */ --text-warning-primary: var(--warning-300); /* Warning.300 */ --text-warning-secondary: var(--warning-200); /* Warning.200 */ --text-success-secondary: var(--success-200); /* Success.200 */ /* ── Border ─────────────────────────────────────────────── */ --border-primary: var(--neutral-700); /* Neutral.700 */ --border-secondary: var(--neutral-800); /* Neutral.800 */ --border-tertiary: var(--neutral-800); /* Neutral.800 */ --border-brand: var(--brand-400); /* Primary.400 */ --border-brand-alt: var(--brand-800); /* Primary.800 */ --border-brand-tabs: var(--brand-600); /* Primary.600 */ --border-disabled: var(--neutral-700); /* Neutral.700 */ --border-disabled-subtle: var(--neutral-800); /* Neutral.800 */ --border-error: var(--error-400); /* Error.400 */ --border-error-subtle: var(--error-600); /* Error.600 */ --border-success: var(--success-400); /* Success.400 */ --border-success-subtle: var(--success-400); /* Success.400 */ --border-warning: var(--warning-400); /* Warning.400 */ --border-warning-subtle: var(--warning-800); /* Warning.800 */ /* ── Foreground ─────────────────────────────────────────── */ --fg-primary: var(--color-white); /* Base.white */ --fg-secondary: var(--neutral-300); /* Neutral.300 */ --fg-tertiary: var(--neutral-400); /* Neutral.400 */ --fg-tertiary-hover: var(--neutral-300); /* Neutral.300 */ --fg-quaternary: var(--neutral-400); /* Neutral.400 */ --fg-quaternary-hover: var(--neutral-300); /* Neutral.300 */ --fg-quinary: var(--neutral-500); /* Neutral.500 */ --fg-quinary-hover: var(--neutral-400); /* Neutral.400 */ --fg-senary: var(--neutral-600); /* Neutral.600 */ --fg-secondary-hover: var(--neutral-200); /* Neutral.200 */ --fg-disabled: var(--neutral-500); /* Neutral.500 */ --fg-disabled-subtle: var(--neutral-600); /* Neutral.600 */ --fg-white: var(--color-white); /* Base.white */ --fg-brand-primary: var(--brand-500); /* Primary.500 */ --fg-brand-primary-alt: var(--neutral-300); /* Neutral.300 */ --fg-brand-secondary: var(--brand-500); /* Primary.500 */ --fg-error-primary: var(--error-200); /* Error.200 */ --fg-error-secondary: var(--error-100); /* Error.100 */ --fg-success-primary: var(--success-200); /* Success.200 */ --fg-success-secondary: var(--success-50); /* Success.50 */ --fg-warning-primary: var(--warning-200); /* Warning.200 */ --fg-warning-secondary: var(--warning-50); /* Warning.50 */ /* ── Background ─────────────────────────────────────────── */ --bg-primary: var(--neutral-900); /* Neutral.900 */ --bg-primary-alt: var(--bg-secondary); /* → bg-secondary (self-ref) */ --bg-primary-hover: var(--neutral-800); /* Neutral.800 */ --bg-primary-solid: var(--bg-secondary); /* → bg-secondary (self-ref) */ --bg-secondary: var(--neutral-800); /* Neutral.800 */ --bg-secondary-alt: var(--bg-primary); /* → bg-primary (self-ref) */ --bg-secondary-hover: var(--neutral-900); /* Neutral.900 */ --bg-secondary-subtle: var(--neutral-brand-800);/* Neutral Brand.800 */ --bg-secondary-solid: var(--neutral-600); /* Neutral.600 */ --bg-tertiary: var(--neutral-800); /* Neutral.800 */ --bg-quaternary: var(--neutral-700); /* Neutral.700 */ --bg-active: var(--neutral-800); /* Neutral.800 */ --bg-disabled: var(--neutral-900); /* Neutral.900 */ --bg-disabled-subtle: var(--neutral-900); /* Neutral.900 */ --bg-overlay: var(--neutral-800); /* Neutral.800 */ --bg-brand-primary: var(--brand-800); /* Primary.800 */ --bg-brand-primary-alt: var(--bg-secondary); /* → bg-secondary (self-ref) */ --bg-brand-secondary: var(--brand-800); /* Primary.800 */ --bg-brand-solid: var(--brand-700); /* Primary.700 */ --bg-brand-solid-hover: var(--brand-500); /* Primary.500 */ --bg-brand-section: var(--bg-secondary); /* → bg-secondary (self-ref) */ --bg-brand-section-subtle: var(--bg-primary); /* → bg-primary (self-ref) */ --bg-error-primary: var(--error-950); /* Error.950 */ --bg-error-secondary: var(--error-700); /* Error.700 */ --bg-error-solid: var(--error-600); /* Error.600 */ --bg-error-solid-secondary: var(--error-700); /* Error.700 */ --bg-warning-primary: var(--warning-950); /* Warning.950 */ --bg-warning-secondary: var(--warning-600); /* Warning.600 */ --bg-warning-solid: var(--warning-600); /* Warning.600 */ --bg-success-primary: var(--success-900); /* Success.900 */ --bg-success-secondary: var(--success-600); /* Success.600 */ --bg-success-solid: var(--success-600); /* Success.600 */ --bg-highlight: var(--violet-950); /* Violet.950 */ --bg-highlight-hover: var(--violet-950); /* Violet.950 */ /* ── Icons ───────────────────────────────────────────────── */ --icon-fg-primary: var(--neutral-300); /* Neutral.300 */ --icon-fg-subtle: var(--neutral-500); /* Neutral.500 */ --icon-fg-brand: var(--brand-400); /* Primary.400 */ --icon-fg-brand-secondary: var(--brand-500); /* Primary.500 */ --icon-fg-brand-on-brand: var(--neutral-400); /* Neutral.400 */ --icon-fg-error: var(--error-400); /* Error.400 */ --icon-fg-success: var(--success-300); /* Success.300 */ --icon-fg-warning: var(--warning-300); /* Warning.300 */ /* ── Effects ─────────────────────────────────────────────── */ --shadow-xs: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-sm: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-md: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-lg: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-2xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-3xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-skeuomorphic-inner: inset 0 -1px 0 0 rgba(12, 17, 29, 0.05); --shadow-skeuomorphic-inner-border: inset 0 0 0 1px rgba(12, 17, 29, 0.18); /* ── Project-specific ────────────────────────────────────── */ --bg-canvas: var(--neutral-950); } } /* ================================================================ * DARK MODE — Explicit toggle * Applies when data-theme="dark" is set on any ancestor element. * Values are identical to the @media block above. * ================================================================ */ [data-theme="dark"] { /* ── Text ───────────────────────────────────────────────────── */ --text-primary: var(--neutral-50); --text-secondary: var(--neutral-300); --text-tertiary: var(--neutral-400); --text-quaternary: var(--neutral-400); --text-secondary-hover: var(--neutral-200); --text-tertiary-hover: var(--neutral-300); --text-disabled: var(--neutral-500); --text-placeholder: var(--neutral-600); --text-placeholder-subtle: var(--neutral-700); --text-white: var(--color-white); --text-brand-primary: var(--brand-300); --text-brand-primary-alt: var(--brand-400); --text-brand-secondary: var(--brand-500); --text-brand-tertiary: var(--brand-600); --text-brand-tertiary-alt: var(--brand-500); --text-primary-on-brand: var(--neutral-50); --text-secondary-on-brand: var(--neutral-300); --text-tertiary-on-brand: var(--neutral-400); --text-quaternary-on-brand: var(--neutral-400); --text-error-primary: var(--error-400); --text-error-secondary: var(--error-300); --text-warning-primary: var(--warning-300); --text-warning-secondary: var(--warning-200); --text-success-secondary: var(--success-200); /* ── Border ─────────────────────────────────────────────────── */ --border-primary: var(--neutral-700); --border-secondary: var(--neutral-800); --border-tertiary: var(--neutral-800); --border-brand: var(--brand-400); --border-brand-alt: var(--brand-800); --border-brand-tabs: var(--brand-600); --border-disabled: var(--neutral-700); --border-disabled-subtle: var(--neutral-800); --border-error: var(--error-400); --border-error-subtle: var(--error-600); --border-success: var(--success-400); --border-success-subtle: var(--success-400); --border-warning: var(--warning-400); --border-warning-subtle: var(--warning-800); /* ── Foreground ─────────────────────────────────────────────── */ --fg-primary: var(--color-white); --fg-secondary: var(--neutral-300); --fg-tertiary: var(--neutral-400); --fg-tertiary-hover: var(--neutral-300); --fg-quaternary: var(--neutral-400); --fg-quaternary-hover: var(--neutral-300); --fg-quinary: var(--neutral-500); --fg-quinary-hover: var(--neutral-400); --fg-senary: var(--neutral-600); --fg-secondary-hover: var(--neutral-200); --fg-disabled: var(--neutral-500); --fg-disabled-subtle: var(--neutral-600); --fg-white: var(--color-white); --fg-brand-primary: var(--brand-500); --fg-brand-primary-alt: var(--neutral-300); --fg-brand-secondary: var(--brand-500); --fg-error-primary: var(--error-200); --fg-error-secondary: var(--error-100); --fg-success-primary: var(--success-200); --fg-success-secondary: var(--success-50); --fg-warning-primary: var(--warning-200); --fg-warning-secondary: var(--warning-50); /* ── Background ─────────────────────────────────────────────── */ --bg-primary: var(--neutral-900); --bg-primary-alt: var(--bg-secondary); --bg-primary-hover: var(--neutral-800); --bg-primary-solid: var(--bg-secondary); --bg-secondary: var(--neutral-800); --bg-secondary-alt: var(--bg-primary); --bg-secondary-hover: var(--neutral-900); --bg-secondary-subtle: var(--neutral-brand-800); --bg-secondary-solid: var(--neutral-600); --bg-tertiary: var(--neutral-800); --bg-quaternary: var(--neutral-700); --bg-active: var(--neutral-800); --bg-disabled: var(--neutral-900); --bg-disabled-subtle: var(--neutral-900); --bg-overlay: var(--neutral-800); --bg-brand-primary: var(--brand-800); --bg-brand-primary-alt: var(--bg-secondary); --bg-brand-secondary: var(--brand-800); --bg-brand-solid: var(--brand-700); --bg-brand-solid-hover: var(--brand-500); --bg-brand-section: var(--bg-secondary); --bg-brand-section-subtle: var(--bg-primary); --bg-error-primary: var(--error-950); --bg-error-secondary: var(--error-700); --bg-error-solid: var(--error-600); --bg-error-solid-secondary: var(--error-700); --bg-warning-primary: var(--warning-950); --bg-warning-secondary: var(--warning-600); --bg-warning-solid: var(--warning-600); --bg-success-primary: var(--success-900); --bg-success-secondary: var(--success-600); --bg-success-solid: var(--success-600); --bg-highlight: var(--violet-950); --bg-highlight-hover: var(--violet-950); /* ── Icons ───────────────────────────────────────────────────── */ --icon-fg-primary: var(--neutral-300); --icon-fg-subtle: var(--neutral-500); --icon-fg-brand: var(--brand-400); --icon-fg-brand-secondary: var(--brand-500); --icon-fg-brand-on-brand: var(--neutral-400); --icon-fg-error: var(--error-400); --icon-fg-success: var(--success-300); --icon-fg-warning: var(--warning-300); /* ── Effects ─────────────────────────────────────────────────── */ --shadow-xs: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-sm: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-md: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-lg: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-2xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-3xl: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-skeuomorphic-inner: inset 0 -1px 0 0 rgba(12, 17, 29, 0.05); --shadow-skeuomorphic-inner-border: inset 0 0 0 1px rgba(12, 17, 29, 0.18); /* ── Project-specific ────────────────────────────────────────── */ --bg-canvas: var(--neutral-950); }