/* ============================================================ Zinc & Sky — palette pilot override for Grain. Light mode: cool zinc neutrals + deep cyan accent ("zinc+cyan"). Dark mode: zinc near-black surfaces + electric sky accent with a micro-glow on progress ("midnight + electric sky"). Load AFTER grain.css. It re-points the Grain primitive ramps, so both semantic aliases and direct --stone/--clay/--rust/ --amber references pick up the new palette with no markup changes. Pilot scope: linked from sql/index.html only. Ramp mapping (kit consumes these slots): stone 50/100/200/600/900 → light surfaces/borders/text stone 900/800/700/300/50 → dark bg/cards/elevated/muted/text clay 500/600 → light accent + hover clay 400/300 → dark accent + hover ============================================================ */ :root { /* ---- Stone → zinc neutrals (light tops, midnight bottoms) ---- */ --stone-50: #FBFCFD; --stone-100: #F5F7F8; /* light page bg */ --stone-200: #E4E7EA; /* light borders */ --stone-300: #C3C7CE; /* dark-mode muted text / light border-strong — deliberately brighter than typical zinc-400: muted text on near-black read too faint (Mike) */ --stone-400: #8A8F98; --stone-500: #71717A; --stone-600: #52525B; /* light muted text */ --stone-700: #27272A; /* dark elevated / dark borders */ --stone-800: #18181B; /* dark cards */ --stone-900: #09090B; /* dark page bg / light text ink */ /* ---- Clay → cyan/sky (primary) ---- */ --clay-50: #E0F5F9; --clay-100: #C7EDF4; --clay-200: #A5E1ED; --clay-300: #7DD3FC; /* dark hover */ --clay-400: #38BDF8; /* dark accent — electric sky */ --clay-500: #0E7490; /* light accent — deep cyan (AA on white) */ --clay-600: #155E6E; /* light hover */ --clay-700: #134E5C; --clay-800: #0F3D48; --clay-900: #0A2B33; /* ---- Amber (warning) — standard modern amber ---- */ --amber-50: #FFFBEB; --amber-100: #FDE68A; --amber-200: #FCD34D; --amber-300: #FBBF24; --amber-400: #F59E0B; --amber-500: #D97706; --amber-600: #B45309; --amber-700: #92400E; /* ---- Leaf (success) → emerald ---- */ --leaf-50: #ECFDF5; --leaf-400: #34D399; --leaf-500: #10B981; --leaf-700: #047857; /* ---- Rust (danger) → modern red ---- */ --rust-50: #FEF2F2; --rust-400: #F87171; --rust-500: #DC2626; --rust-700: #991B1B; /* ---- Teal (info) → indigo, so info never collides with primary cyan ---- */ --teal-50: #EEF2FF; --teal-400: #818CF8; --teal-500: #4F46E5; --teal-700: #3730A3; /* ---- Semantic re-points that don't follow ramps ---- */ --color-bg: var(--stone-100); --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-overlay: rgba(9, 9, 11, 0.5); --color-text-on-primary: #FFFFFF; --focus-ring: 0 0 0 3px rgba(14, 116, 144, 0.30); } /* Resume-card headline strong sits on the accent gradient — keep it white in both modes (was near-invisible ink-on-cyan in light mode). */ .resume-card p strong { color: #FFFFFF; } /* ---- Dark-mode component touches ---- Two theme conventions exist across kits: · SQL-family: light = `.light` class on , no data-theme attr → dark selector: html:not(.light):not([data-theme]) · Excel-family: html[data-theme="light"|"dark"] → dark selector: html[data-theme="dark"] */ /* Electric-sky button needs dark text — white on #38BDF8 fails contrast. */ html:not(.light):not([data-theme]) .btn-primary, html[data-theme="dark"] .btn-primary { color: #082032; } html:not(.light):not([data-theme]) .btn-primary:hover, html[data-theme="dark"] .btn-primary:hover { color: #082032; } /* Micro-glow on progress FILLS (SQL: .prog-bar/.skill-bar are fills; Excel: fills are .prog-fill/.readiness-bar — its .prog-bar is a track). */ html:not(.light):not([data-theme]) .prog-bar, html:not(.light):not([data-theme]) .skill-bar, html[data-theme="dark"] .prog-fill, html[data-theme="dark"] .readiness-bar, html[data-theme="dark"] .kit-progress:not(.done) .kit-progress-fill { box-shadow: 0 0 10px rgba(56, 189, 248, 0.55); } /* Python kit's other accent-background components — same white-on-sky contrast failure in dark mode, same ink fix. */ html:not(.light):not([data-theme]) .tag.accent, html:not(.light):not([data-theme]) .btn-run, html:not(.light):not([data-theme]) .parsons-chip.placed, html:not(.light):not([data-theme]) .fc-back, html:not(.light):not([data-theme]) .signin-btn, html:not(.light):not([data-theme]) #sprint-bar .sb-btn.sb-start, html[data-theme="dark"] .tag.accent, html[data-theme="dark"] .btn-run, html[data-theme="dark"] .parsons-chip.placed, html[data-theme="dark"] .fc-back, html[data-theme="dark"] .signin-btn, html[data-theme="dark"] #sprint-bar .sb-btn.sb-start { color: #082032; } /* PowerBI kit's extra accent/semantic-background components — dark-mode fills are the light 400 shades (sky/amber/emerald/red), so white text fails contrast; same ink fix. Inline-styled tour/workspace buttons (`style="background:var(--accent);color:#fff"`) need !important to beat the inline declaration. */ html:not(.light):not([data-theme]) .lesson-num.done, html:not(.light):not([data-theme]) #toast, html:not(.light):not([data-theme]) .conf-chip.is-on, html:not(.light):not([data-theme]) .conf-chip.is-on .lucide, html[data-theme="dark"] .lesson-num.done, html[data-theme="dark"] #toast, html[data-theme="dark"] .conf-chip.is-on, html[data-theme="dark"] .conf-chip.is-on .lucide { color: #082032; } html:not(.light):not([data-theme]) .btn[style*="background:var(--accent)"], html[data-theme="dark"] .btn[style*="background:var(--accent)"], html:not(.light):not([data-theme]) button[style*="background:var(--accent)"], html[data-theme="dark"] button[style*="background:var(--accent)"] { color: #082032 !important; } html:not(.light):not([data-theme]) .resume-card [style*="color:#fff"], html[data-theme="dark"] .resume-card [style*="color:#fff"] { color: #082032 !important; } /* Tableau kit's extra accent-background components — same ink fix. The second [style*=] spelling (space after the colon) matches styles set from JS via element.style.background, which the browser serializes with a space (quiz answer buttons). */ html:not(.light):not([data-theme]) .mark-btn.active, html:not(.light):not([data-theme]) .sc-badge, html[data-theme="dark"] .mark-btn.active, html[data-theme="dark"] .sc-badge { color: #082032; } html:not(.light):not([data-theme]) .btn[style*="background: var(--accent)"], html[data-theme="dark"] .btn[style*="background: var(--accent)"], html:not(.light):not([data-theme]) button[style*="background: var(--accent)"], html[data-theme="dark"] button[style*="background: var(--accent)"] { color: #082032 !important; } /* Chart-literacy kit: inline-styled chart-mockup bars (accent/accent2 background + white label in one style attr). The prefix match on "var(--accent" covers both accent and accent2 fills. */ html:not(.light):not([data-theme]) [style*="background:var(--accent"][style*="color:#fff"], html[data-theme="dark"] [style*="background:var(--accent"][style*="color:#fff"] { color: #082032 !important; } /* Flashcard definitions are the card's PRIMARY content, not secondary — full text color in both modes instead of muted. */ .flashcard-face .flashcard-def { color: var(--text); } /* Resume card: the sky accent is LIGHT in dark mode, so its text and ghost button flip to deep ink instead of white. */ html:not(.light):not([data-theme]) .resume-card, html:not(.light):not([data-theme]) .resume-card h2, html:not(.light):not([data-theme]) .resume-card p, html:not(.light):not([data-theme]) .resume-card p strong, html[data-theme="dark"] .resume-card, html[data-theme="dark"] .resume-card h2, html[data-theme="dark"] .resume-card p, html[data-theme="dark"] .resume-card p strong { color: #082032; } html:not(.light):not([data-theme]) .resume-card p, html[data-theme="dark"] .resume-card p { color: rgba(8, 32, 50, 0.75); } html:not(.light):not([data-theme]) .resume-card .btn, html[data-theme="dark"] .resume-card .btn { background: rgba(8, 32, 50, 0.14); color: #082032; } html:not(.light):not([data-theme]) .resume-card .btn:hover, html[data-theme="dark"] .resume-card .btn:hover { background: rgba(8, 32, 50, 0.24); } /* Cert-kit shell (tableau-cert / excel-cert / powerbi-cert share this markup): the exam submit button is accent-filled, so it hits the same white-on-sky contrast failure as .btn-primary. (The stepper's .q-dot.cur uses --text, which stays legible in both themes and is deliberately left alone.) */ html:not(.light):not([data-theme]) .exam-submit-btn, html[data-theme="dark"] .exam-submit-btn { color: #082032; }