/* UncoverTechTalent theme tokens Dark (navy-and-green) is the brand default. Light follows the OS preference unless the visitor picks one with the toggle (stored in localStorage as utt-theme). Pages with (blog list and posts) default to light regardless of OS preference; the toggle still overrides. Semantic tokens only below this line; component CSS reads these, never raw hex. */ :root { color-scheme: dark; /* surfaces */ --bg: #1A2634; --bg-2: #2C3E50; --surface: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.07); --border: rgba(143, 185, 150, 0.22); --glow: rgba(93, 138, 138, 0.55); /* text */ --text: #E6F1E2; --text-muted: #9BBDBB; --text-soft: #6FA07E; /* accents */ --accent: #8FB996; --accent-strong: #DFF0D8; --on-accent: #1A2634; --link: #B5D9BB; /* code */ --code-bg: rgba(255, 255, 255, 0.09); --code-text: #B5D9BB; --pre-bg: rgba(0, 0, 0, 0.42); --pre-text: #E6F1E2; /* stat cards (homepage) */ --stat-text: #ffffff; --stat-1: rgba(74, 124, 89, 0.40); --stat-2: rgba(74, 124, 89, 0.60); --stat-3: rgba(74, 124, 89, 0.25); --stat-4: rgba(74, 124, 89, 0.80); /* legacy aliases (kept so older rules keep working) */ --c-navy-deep: var(--bg); --c-navy-light: var(--bg-2); --c-leaf-pale: var(--text); --c-leaf-mid: var(--accent); --c-leaf-dark: var(--text-soft); --c-teal-wash: var(--text-muted); --c-accent: var(--accent-strong); --glass-surface: rgba(26, 38, 52, 0.75); --glass-border: var(--border); } /* Light palette: brand greens from brand/colors.md on a warm off-white. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F6F5F0; --bg-2: #E8F0E7; --surface: rgba(61, 122, 53, 0.05); --surface-strong: rgba(61, 122, 53, 0.09); --border: rgba(61, 122, 53, 0.28); --glow: rgba(143, 185, 150, 0.45); --text: #1F2A24; --text-muted: #4E6360; --text-soft: #3d7a35; --accent: #3d7a35; --accent-strong: #2d5a27; --on-accent: #ffffff; --link: #2d5a27; --code-bg: rgba(61, 122, 53, 0.11); --code-text: #2d5a27; --pre-bg: #1F2A24; --pre-text: #E6F1E2; --stat-text: #ffffff; --stat-1: #4A7c59; --stat-2: #3d7a35; --stat-3: #457A57; --stat-4: #2d5a27; --glass-surface: rgba(246, 245, 240, 0.85); } } :root[data-theme="light"], :root[data-default="light"]:not([data-theme="dark"]) { color-scheme: light; --bg: #F6F5F0; --bg-2: #E8F0E7; --surface: rgba(61, 122, 53, 0.05); --surface-strong: rgba(61, 122, 53, 0.09); --border: rgba(61, 122, 53, 0.28); --glow: rgba(143, 185, 150, 0.45); --text: #1F2A24; --text-muted: #4E6360; --text-soft: #3d7a35; --accent: #3d7a35; --accent-strong: #2d5a27; --on-accent: #ffffff; --link: #2d5a27; --code-bg: rgba(61, 122, 53, 0.11); --code-text: #2d5a27; --pre-bg: #1F2A24; --pre-text: #E6F1E2; --stat-text: #ffffff; --stat-1: #4A7c59; --stat-2: #3d7a35; --stat-3: #457A57; --stat-4: #2d5a27; --glass-surface: rgba(246, 245, 240, 0.85); } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-leaf, 40px 0 40px 0); color: var(--accent); cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--surface-strong); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Show the icon of the theme you would switch TO */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; } :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; } } :root[data-theme="light"] .theme-toggle .icon-moon, :root[data-default="light"]:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun, :root[data-default="light"]:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }