/* LoadLeader Design System — Shared Tokens v3 Light mode is DEFAULT. Dark applies only via [data-theme="dark"] on . Theme toggle script lives in /tokens-theme.js (loaded by every public page). ============================================================= */ :root { /* SURFACES — light by default */ --bg: #FFFFFF; --surface: #FAFAFA; --surface-2: #F4F4F5; --surface-3: #E4E4E7; /* BORDERS */ --line: rgba(0,0,0,0.08); --line-strong: rgba(0,0,0,0.14); --line-hover: rgba(255,205,17,0.55); /* TEXT */ --text: #09090B; --text-2: #52525B; --text-3: #71717A; /* ACCENT — CAT EQUIPMENT YELLOW (theme-invariant brand) */ --accent: #FFCD11; --accent-hot: #FFE066; --accent-dim: #C99E00; --accent-text: #0A0A0A; --accent-bg: rgba(255,205,17,0.16); --accent-border: rgba(255,205,17,0.45); /* STATUS */ --ok: #16A34A; --ok-bg: rgba(22,163,74,0.10); --ok-border: rgba(22,163,74,0.30); --warn: #F97316; --warn-bg: rgba(249,115,22,0.10); --warn-border:rgba(249,115,22,0.30); --bad: #DC2626; --bad-bg: rgba(220,38,38,0.08); --bad-border:rgba(220,38,38,0.28); --info: #2563EB; --info-bg: rgba(37,99,235,0.08); --info-border:rgba(37,99,235,0.24); /* TYPOGRAPHY */ --font-display: 'Syne', 'Impact', sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; /* SHAPE */ --r-card: 6px; --r-btn: 6px; --r-chip: 4px; --r-input: 6px; /* MOTION */ --ease: cubic-bezier(0.4,0,0.2,1); --dur-hover: 120ms; --dur-modal: 200ms; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-pop: 0 8px 24px rgba(0,0,0,0.10); /* FOCUS RING HALO — adapts to surface luminance */ --focus-halo: rgba(255,255,255,0.6); } /* DARK MODE — opt-in via (set by theme toggle JS) */ [data-theme="dark"] { --bg: #0A0A0A; --surface: #141414; --surface-2: #1C1C1C; --surface-3: #242424; --line: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.10); --line-hover: rgba(255,205,17,0.40); --text: #F5F5F5; --text-2: #A3A3A3; --text-3: #737373; --accent-bg: rgba(255,205,17,0.08); --accent-border: rgba(255,205,17,0.32); --ok: #4ADE80; --ok-bg: rgba(74,222,128,0.10); --ok-border: rgba(74,222,128,0.28); --warn: #FF8A00; --warn-bg: rgba(255,138,0,0.10); --warn-border:rgba(255,138,0,0.30); --bad: #FF4444; --bad-bg: rgba(255,68,68,0.10); --bad-border:rgba(255,68,68,0.30); --info: #60A5FA; --info-bg: rgba(96,165,250,0.08); --info-border:rgba(96,165,250,0.24); --accent-text: var(--accent); /* yellow is readable on dark surfaces */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-pop: 0 8px 24px rgba(0,0,0,0.50); --focus-halo: rgba(10,10,10,0.6); } /* BASE */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 200ms var(--ease), color 200ms var(--ease); } /* KEYFRAMES */ @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } } @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } } /* TYPE PRIMITIVES */ .h-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; margin: 0; } .h-num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--text-2); } /* SCROLLBARS */ html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:0; } ::-webkit-scrollbar-thumb:hover { background:var(--text-3); } /* SELECTION — yellow at low alpha, black text */ ::selection { background: rgba(255,205,17,0.35); color: #0A0A0A; } ::-moz-selection { background: rgba(255,205,17,0.35); color: #0A0A0A; } /* FOCUS — two-color ring, visible on yellow + any surface */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); } /* HEADLINE BALANCE — tidy line breaks */ h1, h2, h3 { text-wrap: balance; } /* THEME TOGGLE BUTTON — drop into nav of any page */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-btn); background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); cursor: pointer; transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* REDUCED MOTION — global respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }