/* ============================================================
   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 <html>, 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.
   The :not(.ghost) on .signin-btn matters: the ghost variant is transparent,
   not accent-filled, so the deep ink landed on the dark nav at 1.07:1 and the
   Log out button was invisible in dark mode across eleven kits. It keeps its
   own var(--dim). */
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:not(.ghost),
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:not(.ghost),
html[data-theme="dark"] #sprint-bar .sb-btn.sb-start { color: #082032; }

/* The streak chip is a translucent-white pill sitting ON the resume card's sky
   gradient, so its white label was ~2:1 in dark mode. Same ink as everything
   else riding that accent — but ONLY inside the resume card: the stats kit
   builds its .loop-chip as an ordinary --surf2 chip on the page background,
   where deep ink would be 1.2:1. */
html:not(.light):not([data-theme]) .resume-card .loop-chip,
html[data-theme="dark"] .resume-card .loop-chip { color: #082032; background: rgba(8, 32, 50, 0.14); }

/* Lesson number markers are navigation, not secondary metadata. Keep them
   at full foreground contrast on the subdued track instead of using muted text. */
html .lesson-num:not(.done) {
  color: var(--text, var(--color-text)) !important;
}
html .pmap-node:not(.done):not(.current) .pmap-dot {
  color: var(--text, var(--color-text)) !important;
}

/* The palette has two theme conventions: most SQL pages toggle the `.light`
   class, while other kits toggle `data-theme`. In dark mode the sky accent is
   light, so numbers on completed/current nodes need deep ink instead of white.
   Checking `:not(.light)` also covers pages whose stale `data-theme="light"`
   attribute does not reflect the actual CSS theme class. */
html:not(.light) .lesson-num.done,
html:not(.light) .pmap-node.done .pmap-dot,
html:not(.light) .pmap-node.current .pmap-dot,
html[data-theme="dark"] .lesson-num.done,
html[data-theme="dark"] .pmap-node.done .pmap-dot,
html[data-theme="dark"] .pmap-node.current .pmap-dot {
  color: #082032 !important;
}

/* PowerBI kit's other accent/semantic-background components use light 400
   shades in dark mode, so white text fails contrast. */
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"] #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; }