/* Stateloop dark theme — Industry navy. Remaps ONLY the semantic layer (semantic.css); primitive ramps in tokens.css stay constant. The ground is the accent ramp's 900 step (the landing's dark band) with paper ink. Theme selection follows the system by default: - No data-theme attribute → follows prefers-color-scheme. - data-theme="dark" on → always dark. - data-theme="light" on → always light. NOTE: the two rule blocks below must stay IDENTICAL — CSS cannot share a declaration block between a media query and a plain selector without a build step, and this file ships unbuilt. Edit both together. */ [data-theme="dark"] { color-scheme: dark; /* Surfaces — navy drafting board */ --color-bg: var(--color-accent-900); --color-surface: color-mix(in srgb, var(--color-accent-900) 88%, #f2f2f3); --surface-raised: color-mix(in srgb, var(--color-accent-900) 78%, #f2f2f3); --surface-sunken: color-mix(in srgb, var(--color-accent-900) 85%, black); /* Text (paper on navy) */ --color-text: #f2f2f3; --text-muted: color-mix(in srgb, var(--color-text) 72%, transparent); --text-subtle: color-mix(in srgb, var(--color-text) 55%, transparent); --on-accent: var(--color-accent-900); /* Lines */ --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent); --border: var(--color-divider); --border-strong: color-mix(in srgb, var(--color-text) 32%, transparent); /* Accent — lift two steps so azure reads on navy; fills carry navy ink */ --color-accent: var(--color-accent-400); --accent-hover: var(--color-accent-300); --accent-active: var(--color-accent-200); --color-lift: var(--color-accent-300); --color-link: var(--color-accent-300); --link-hover: var(--color-accent-200); --color-accent-2: var(--color-accent-2-400); /* Status */ --color-danger: var(--color-danger-300); --color-warning: var(--color-warning-300); --color-success: var(--color-accent-400); /* Elevation — hairline edge + ambient darkness on a dark ground */ --shadow-sm: 0 0 0 1px color-mix(in srgb, #f2f2f3 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 0 0 1px color-mix(in srgb, #f2f2f3 8%, transparent), 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 0 0 1px color-mix(in srgb, #f2f2f3 10%, transparent), 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-card: none; --shadow-glow: 0 0 40px color-mix(in srgb, var(--color-accent-500) 28%, transparent); --shadow-glow-strong: 0 0 60px color-mix(in srgb, var(--color-accent-500) 55%, transparent); --gradient-hero: radial-gradient( ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60% ); --border-accent-soft: color-mix(in srgb, var(--color-accent) 30%, transparent); --border-accent: color-mix(in srgb, var(--color-accent) 45%, transparent); } /* System preference — identical block, applied when the OS is dark and the page has not pinned a theme. Keep in sync with [data-theme="dark"] above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --color-bg: var(--color-accent-900); --color-surface: color-mix(in srgb, var(--color-accent-900) 88%, #f2f2f3); --surface-raised: color-mix(in srgb, var(--color-accent-900) 78%, #f2f2f3); --surface-sunken: color-mix(in srgb, var(--color-accent-900) 85%, black); --color-text: #f2f2f3; --text-muted: color-mix(in srgb, var(--color-text) 72%, transparent); --text-subtle: color-mix(in srgb, var(--color-text) 55%, transparent); --on-accent: var(--color-accent-900); --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent); --border: var(--color-divider); --border-strong: color-mix(in srgb, var(--color-text) 32%, transparent); --color-accent: var(--color-accent-400); --accent-hover: var(--color-accent-300); --accent-active: var(--color-accent-200); --color-lift: var(--color-accent-300); --color-link: var(--color-accent-300); --link-hover: var(--color-accent-200); --color-accent-2: var(--color-accent-2-400); --color-danger: var(--color-danger-300); --color-warning: var(--color-warning-300); --color-success: var(--color-accent-400); --shadow-sm: 0 0 0 1px color-mix(in srgb, #f2f2f3 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 0 0 1px color-mix(in srgb, #f2f2f3 8%, transparent), 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 0 0 1px color-mix(in srgb, #f2f2f3 10%, transparent), 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-card: none; --shadow-glow: 0 0 40px color-mix(in srgb, var(--color-accent-500) 28%, transparent); --shadow-glow-strong: 0 0 60px color-mix(in srgb, var(--color-accent-500) 55%, transparent); --gradient-hero: radial-gradient( ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60% ); --border-accent-soft: color-mix(in srgb, var(--color-accent) 30%, transparent); --border-accent: color-mix(in srgb, var(--color-accent) 45%, transparent); } }