/* SteelAxis OS — design tokens * Locked 2026-05-18. See brand/README.md for usage. * * Light mode is the default. Dark mode kicks in via: * 1. prefers-color-scheme: dark (automatic) * 2. data-theme="dark" on (manual override) * * The brand palette (orange, yellow, navy, charcoal, cream) keeps the same * hex in both modes — only the semantic role assignments shift. * Status tokens are mode-aware: lighter tint backgrounds in light mode, * translucent backgrounds with brighter foregrounds in dark mode. */ :root { /* ===== Brand palette — same hex in every mode ===== */ --sa-orange: #EA580C; /* primary accent */ --sa-yellow: #FACC15; /* secondary accent */ --sa-navy: #0F172A; /* deep neutral */ --sa-charcoal: #27272A; /* warm neutral */ --sa-cream: #FAFAF9; /* off-white surface */ --sa-white: #FFFFFF; /* raised surface, light mode */ /* ===== Semantic surface + text tokens — light mode (default) ===== */ --sa-bg: var(--sa-cream); --sa-bg-raised: var(--sa-white); --sa-text: var(--sa-charcoal); --sa-text-strong: var(--sa-navy); --sa-text-muted: #57534E; --sa-border: rgba(15, 23, 42, 0.10); --sa-border-strong: rgba(15, 23, 42, 0.18); --sa-accent: var(--sa-orange); --sa-accent-fg: var(--sa-navy); /* text on orange */ --sa-attention: var(--sa-yellow); --sa-attention-fg: var(--sa-navy); /* text on yellow */ /* ===== Status tokens — light mode ===== */ /* Use tint variant by default. Filled / outline / ghost variants below. */ --sa-status-success-bg: #DCFCE7; --sa-status-success-fg: #14532D; --sa-status-success-dot: #16A34A; --sa-status-success-filled: #16A34A; --sa-status-success-on: #FAFAF9; /* text on filled */ --sa-status-warning-bg: #FEF3C7; --sa-status-warning-fg: #713F12; --sa-status-warning-dot: #EAB308; --sa-status-warning-filled: #EAB308; --sa-status-warning-on: #0F172A; --sa-status-danger-bg: #FEE2E2; --sa-status-danger-fg: #7F1D1D; --sa-status-danger-dot: #DC2626; --sa-status-danger-filled: #DC2626; --sa-status-danger-on: #FAFAF9; --sa-status-info-bg: #BAE6FD; --sa-status-info-fg: #0C4A6E; --sa-status-info-dot: #0284C7; --sa-status-info-filled: #0284C7; --sa-status-info-on: #FAFAF9; --sa-status-active-bg: #FED7AA; --sa-status-active-fg: #7C2D12; --sa-status-active-dot: var(--sa-orange); --sa-status-active-filled: var(--sa-orange); --sa-status-active-on: #0F172A; --sa-status-neutral-bg: #E4E4E7; --sa-status-neutral-fg: #27272A; --sa-status-neutral-dot: #71717A; --sa-status-neutral-filled: #71717A; --sa-status-neutral-on: #FAFAF9; /* ===== Typography ===== */ --sa-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sa-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sa-tracking-display: -0.038em; --sa-tracking-heading: -0.01em; --sa-tracking-mono: 0.02em; /* ===== Radius scale ===== */ --sa-radius-sm: 6px; --sa-radius-md: 8px; --sa-radius-lg: 12px; --sa-radius-pill: 999px; } /* ============================================================ */ /* Automatic dark mode */ /* ============================================================ */ @media (prefers-color-scheme: dark) { :root { --sa-bg: var(--sa-navy); --sa-bg-raised: var(--sa-charcoal); --sa-text: var(--sa-cream); --sa-text-strong: var(--sa-cream); --sa-text-muted: rgba(250, 250, 249, 0.65); --sa-border: rgba(250, 250, 249, 0.10); --sa-border-strong: rgba(250, 250, 249, 0.18); --sa-status-success-bg: rgba(22, 163, 74, 0.20); --sa-status-success-fg: #86EFAC; --sa-status-success-dot: #22C55E; --sa-status-warning-bg: rgba(234, 179, 8, 0.20); --sa-status-warning-fg: #FDE68A; --sa-status-warning-dot: #EAB308; --sa-status-danger-bg: rgba(220, 38, 38, 0.22); --sa-status-danger-fg: #FCA5A5; --sa-status-danger-dot: #EF4444; --sa-status-info-bg: rgba(2, 132, 199, 0.22); --sa-status-info-fg: #7DD3FC; --sa-status-info-dot: #38BDF8; --sa-status-active-bg: rgba(234, 88, 12, 0.22); --sa-status-active-fg: #FDBA74; --sa-status-active-dot: var(--sa-orange); --sa-status-neutral-bg: rgba(113, 113, 122, 0.25); --sa-status-neutral-fg: #E4E4E7; --sa-status-neutral-dot: #A1A1AA; } } /* ============================================================ */ /* Manual dark mode override */ /* ============================================================ */ [data-theme="dark"] { --sa-bg: var(--sa-navy); --sa-bg-raised: var(--sa-charcoal); --sa-text: var(--sa-cream); --sa-text-strong: var(--sa-cream); --sa-text-muted: rgba(250, 250, 249, 0.65); --sa-border: rgba(250, 250, 249, 0.10); --sa-border-strong: rgba(250, 250, 249, 0.18); --sa-status-success-bg: rgba(22, 163, 74, 0.20); --sa-status-success-fg: #86EFAC; --sa-status-success-dot: #22C55E; --sa-status-warning-bg: rgba(234, 179, 8, 0.20); --sa-status-warning-fg: #FDE68A; --sa-status-warning-dot: #EAB308; --sa-status-danger-bg: rgba(220, 38, 38, 0.22); --sa-status-danger-fg: #FCA5A5; --sa-status-danger-dot: #EF4444; --sa-status-info-bg: rgba(2, 132, 199, 0.22); --sa-status-info-fg: #7DD3FC; --sa-status-info-dot: #38BDF8; --sa-status-active-bg: rgba(234, 88, 12, 0.22); --sa-status-active-fg: #FDBA74; --sa-status-active-dot: var(--sa-orange); --sa-status-neutral-bg: rgba(113, 113, 122, 0.25); --sa-status-neutral-fg: #E4E4E7; --sa-status-neutral-dot: #A1A1AA; } /* ============================================================ */ /* Manual light mode override */ /* ============================================================ */ [data-theme="light"] { --sa-bg: var(--sa-cream); --sa-bg-raised: var(--sa-white); --sa-text: var(--sa-charcoal); --sa-text-strong: var(--sa-navy); --sa-text-muted: #57534E; --sa-border: rgba(15, 23, 42, 0.10); --sa-border-strong: rgba(15, 23, 42, 0.18); --sa-status-success-bg: #DCFCE7; --sa-status-success-fg: #14532D; --sa-status-success-dot: #16A34A; --sa-status-warning-bg: #FEF3C7; --sa-status-warning-fg: #713F12; --sa-status-warning-dot: #EAB308; --sa-status-danger-bg: #FEE2E2; --sa-status-danger-fg: #7F1D1D; --sa-status-danger-dot: #DC2626; --sa-status-info-bg: #BAE6FD; --sa-status-info-fg: #0C4A6E; --sa-status-info-dot: #0284C7; --sa-status-active-bg: #FED7AA; --sa-status-active-fg: #7C2D12; --sa-status-active-dot: var(--sa-orange); --sa-status-neutral-bg: #E4E4E7; --sa-status-neutral-fg: #27272A; --sa-status-neutral-dot: #71717A; } /* ============================================================ */ /* Base typography reset — drop into the global stylesheet */ /* ============================================================ */ html { background: var(--sa-bg); color: var(--sa-text); font-family: var(--sa-font-sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: var(--sa-font-sans); color: var(--sa-text-strong); } h1 { font-weight: 700; letter-spacing: var(--sa-tracking-display); line-height: 1.05; } h2, h3 { font-weight: 500; letter-spacing: var(--sa-tracking-heading); line-height: 1.2; } code, kbd, samp, .sa-mono { font-family: var(--sa-font-mono); letter-spacing: var(--sa-tracking-mono); }