/* ===================================================================== Cadence — admin dashboard M3 TOKENS — Material Design 3 token set seeded from Cadence green. Supports three theme sources (highest priority first): 1. data-theme="light|dark" on — manual toggle (saved in localStorage) 2. prefers-color-scheme media query — OS default 3. Light fallback — when nothing else is set Variable NAMES are identical to the previous flat theme; only VALUES changed. ===================================================================== */ /* ---------- Light tokens (default) ---------- */ :root { --bg: #F7F9F5; /* page canvas — M3 surface dim below cards */ --surface: #FFFFFF; /* cards / sidebar / tables */ --surface-2: #EFF2EC; /* hover fills / table head / filled inputs */ --surface-3: #E3E7DF; /* pressed / skeleton */ --text: #191D18; /* on-surface */ --muted: #4C5245; /* on-surface-variant */ --faint: #757B6C; /* tertiary */ --accent: #158A4F; /* primary */ --accent-2: #0E7A44; /* hover */ --accent-3: #096B3B; /* pressed */ --accent-ink:#0B6B3D; /* readable green text on light */ --accent-tint:#DCF2E4; /* primary container */ --accent-line:#B7E4CA; /* primary-container outline */ --border: #DEE3D8; /* outline-variant */ --border-2: #E9ECE4; /* inner dividers */ /* Functional status accents. ok reuses the accent family. */ --ok-tint:#DCF2E4; --ok-line:#B7E4CA; --ok-ink:#0B6B3D; --warn-tint:#FBF3DC; --warn-line:#EBDCA8;--warn-ink:#8F5E0B; --bad-tint:#FBE9E9; --bad-line:#F0C4C4; --bad-ink:#B32030; --info-tint:#EFF2EC; --info-line:#DEE3D8;--info-ink:#4C5245; /* Inverse surface — snackbars/tooltips (M3). */ --inv-bg: #262B22; --inv-ink: #EEF1EA; /* Shape scale (sm 8 / md 12 / lg 24). */ --radius-sm: 8px; --radius: 12px; --radius-lg: 24px; /* Elevation — M3 key-shadow levels 1/2/3. */ --shadow-hair: 0 1px 2px rgba(24,32,22,.10), 0 1px 3px 1px rgba(24,32,22,.06); --shadow-lift: 0 1px 2px rgba(24,32,22,.12), 0 2px 6px 2px rgba(24,32,22,.07); --shadow-float: 0 4px 8px 3px rgba(24,32,22,.10), 0 1px 3px rgba(24,32,22,.14); --focus: rgba(21,138,79,.28); --ease: cubic-bezier(.22,1,.36,1); --sidebar-w: 72px; --ic: 24px; --ic-sm: 20px; /* M3 type scale — surface text roles. */ --type-display: 2.8125rem; /* 45px — hero numbers only */ --type-headline: 2rem; /* 32px */ --type-title-lg: 1.375rem; /* 22px */ --type-title-md: 1rem; /* 16px / 500 */ --type-body-lg: 1rem; /* 16px — default body */ --type-body-md: 0.875rem; /* 14px */ --type-body-sm: 0.75rem; /* 12px */ --type-label-lg: 0.875rem; /* 14px / 500 */ --type-label-md: 0.75rem; /* 12px / 500 */ --type-label-sm: 0.6875rem; /* 11px / 500 */ /* M3 spacing — 4dp grid. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; } /* ---------- Dark tokens — OS default (no data-theme set) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0D100C; --surface: #161A14; --surface-2: #1F241C; --surface-3: #2A3026; --text: #E3E6DD; --muted: #AEB5A4; --faint: #78816E; --accent: #2FC87E; --accent-2: #46D68F; --accent-3: #25B06B; --accent-ink:#4ADE96; --accent-tint:#12291C; --accent-line:#235938; --border: #2E342A; --border-2: #23281F; --ok-tint:#12291C; --ok-line:#235938; --ok-ink:#4ADE96; --warn-tint:#2A230E;--warn-line:#4C3E17;--warn-ink:#F0BE58; --bad-tint:#2B1416; --bad-line:#54211F; --bad-ink:#F87171; --info-tint:#1F241C;--info-line:#2E342A;--info-ink:#AEB5A4; --inv-bg: #E3E6DD; --inv-ink: #191D18; --shadow-hair: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px 1px rgba(0,0,0,.20); --shadow-lift: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.25); --shadow-float: 0 4px 8px 3px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.45); --focus: rgba(47,200,126,.38); } } /* ---------- Manual dark override ---------- */ :root[data-theme="dark"] { --bg: #0D100C; --surface: #161A14; --surface-2: #1F241C; --surface-3: #2A3026; --text: #E3E6DD; --muted: #AEB5A4; --faint: #78816E; --accent: #2FC87E; --accent-2: #46D68F; --accent-3: #25B06B; --accent-ink:#4ADE96; --accent-tint:#12291C; --accent-line:#235938; --border: #2E342A; --border-2: #23281F; --ok-tint:#12291C; --ok-line:#235938; --ok-ink:#4ADE96; --warn-tint:#2A230E;--warn-line:#4C3E17;--warn-ink:#F0BE58; --bad-tint:#2B1416; --bad-line:#54211F; --bad-ink:#F87171; --info-tint:#1F241C;--info-line:#2E342A;--info-ink:#AEB5A4; --inv-bg: #E3E6DD; --inv-ink: #191D18; --shadow-hair: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px 1px rgba(0,0,0,.20); --shadow-lift: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.25); --shadow-float: 0 4px 8px 3px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.45); --focus: rgba(47,200,126,.38); } /* ---------- Manual light override (OS=dark, user chose light) ---------- */ :root[data-theme="light"] { --bg: #F7F9F5; --surface: #FFFFFF; --surface-2: #EFF2EC; --surface-3: #E3E7DF; --text: #191D18; --muted: #4C5245; --faint: #757B6C; --accent: #158A4F; --accent-2: #0E7A44; --accent-3: #096B3B; --accent-ink:#0B6B3D; --accent-tint:#DCF2E4; --accent-line:#B7E4CA; --border: #DEE3D8; --border-2: #E9ECE4; --ok-tint:#DCF2E4; --ok-line:#B7E4CA; --ok-ink:#0B6B3D; --warn-tint:#FBF3DC; --warn-line:#EBDCA8;--warn-ink:#8F5E0B; --bad-tint:#FBE9E9; --bad-line:#F0C4C4; --bad-ink:#B32030; --info-tint:#EFF2EC; --info-line:#DEE3D8;--info-ink:#4C5245; --inv-bg: #262B22; --inv-ink: #EEF1EA; --shadow-hair: 0 1px 2px rgba(24,32,22,.10), 0 1px 3px 1px rgba(24,32,22,.06); --shadow-lift: 0 1px 2px rgba(24,32,22,.12), 0 2px 6px 2px rgba(24,32,22,.07); --shadow-float: 0 4px 8px 3px rgba(24,32,22,.10), 0 1px 3px rgba(24,32,22,.14); --focus: rgba(21,138,79,.28); }