/* ==========================================================================
   Tech With Darin — UI tokens & components
   Goals:
   - Lighter, softer dark mode (not black-on-black)
   - Light mode that doesn't wash out cards
   - Modern, minimal, legible
   - Works alongside Tailwind utility classes already in use
   ========================================================================== */

/* ------------------------------
   Design tokens
   ------------------------------ */

:root{
  /* Base palette (light) */
  --bg:            #f7f9fc;   /* app background */
  --fg:            #0f172a;   /* primary text (slate-900-ish) */
  --muted:         #475569;   /* secondary text */
  --muted-2:       #64748b;   /* tertiary text */
  color-scheme: light dark;

  --card:          #ffffff;   /* card background */
  --card-contrast: #0b1220;   /* dark text on colorful pills */

  --border:        #e5e7eb;   /* subtle border */
  --shadow:        0 6px 18px rgba(15, 23, 42, 0.06);

  --brand:         #0ea5e9;   /* sky-500 */
  --brand-600:     #0284c7;   /* sky-600 */
  --ring:          rgba(2,132,199,0.4);

  --ok:            #16a34a;   /* green-600 */
  --bad:           #dc2626;   /* red-600 */
  --warn:          #d97706;   /* amber-600 */

  --radius-lg:     16px;
  --radius-md:     12px;
  --radius-sm:     10px;

  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;

  --fade-fast:     120ms;
  --fade:          180ms;
  --easing:        cubic-bezier(.2,.7,.3,1);
}

:root.dark{
  /* Softer dark — navy slate, not pure black */
  --bg:            #0f172a;   /* slate-900-ish but lifted */
  --fg:            #f8fafc;   /* brighter text for contrast */
  --muted:         #cbd5e1;
  --muted-2:       #a6b3c5;

  --card:          #0c1324;   /* solid dark card for stronger contrast */
  --card-contrast: #ffffff;

  --border:        #22304a;
  --shadow:        0 8px 24px rgba(2, 6, 23, 0.45);

  --ring:          rgba(56,189,248,0.35); /* sky-400-ish glow */
}

/* If user prefers dark, start there until toggled */
@media (prefers-color-scheme: dark){
  :root:not(.dark) { /* no-op; you toggle via JS */ }
}

/* ------------------------------
   Base
   ------------------------------ */

html, body{
  background: var(--bg);
  color: var(--fg);
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

::selection{
  background: rgba(14,165,233,0.18);
}

/* ------------------------------
   Cards
   ------------------------------ */

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card.p-3{ padding: 0.75rem; }
.card.p-5{ padding: 1.25rem; }
.card.p-6{ padding: 1.5rem; }

/* sticky header blur support (used by BrandBar) */
.supports-\[backdrop-filter\]\:bg-white\/60{ backdrop-filter: saturate(160%) blur(10px); }
.dark .dark\:supports-\[backdrop-filter\]\:bg-slate-900\/60{ backdrop-filter: saturate(160%) blur(10px); }

/* ------------------------------
   Buttons
   ------------------------------ */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0));
  color: var(--fg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: all var(--fade) var(--easing);
  cursor: pointer;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2,6,23,0.08);
  border-color: color-mix(in oklab, var(--border) 70%, var(--brand) 30%);
}

.btn:active{
  transform: translateY(0);
}

.btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* subtle secondary */
.btn.secondary{
  background: rgba(2,132,199,0.06);
  border-color: rgba(2,132,199,0.15);
}

/* micro size (language/theme toggles) */
.btn.micro{
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  border-radius: 10px;
}

/* brand gradient (primary calls-to-action) */
.btn.grad{
  border: none;
  color: #fff;
  background-image: linear-gradient(135deg, var(--brand-600), var(--brand));
  box-shadow: 0 8px 20px rgba(2,132,199,.35);
}
.btn.grad:hover{
  filter: brightness(1.04);
}

/* ------------------------------
   Tabs
   ------------------------------ */

.tab{
  display: inline-flex;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  transition: all var(--fade) var(--easing);
}

.tab:hover{ color: var(--fg); border-color: color-mix(in oklab, var(--border) 60%, var(--brand) 40%); }
.tab.active{
  color: var(--card-contrast);
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  box-shadow: 0 6px 16px rgba(14,165,233,.35);
}

/* ------------------------------
   Badges & Chips
   ------------------------------ */

.badge{
  display:inline-flex; align-items:center;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  background: rgba(15,23,42,0.03);
  color: var(--muted);
}

.brand-chip{
  display:inline-flex; align-items:center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  box-shadow: 0 4px 10px rgba(14,165,233,.35);
}

/* ------------------------------
   Links
   ------------------------------ */

a.link{
  color: var(--brand-600);
  text-decoration: none;
}
a.link:hover{ text-decoration: underline; }

.link.subtle{
  color: var(--muted-2);
}
.link.subtle:hover{ color: var(--brand-600); }

/* ------------------------------
   Grid helpers
   ------------------------------ */

.grid-3{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------
   Prose (mini)
   ------------------------------ */

.prose{ color: var(--fg); }
.dark .prose{ color: var(--fg); }

.prose p{ margin: 0.25rem 0 0.5rem; }
.prose ul, .prose ol{ margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }
.prose li{ margin: 0.15rem 0; }
.prose code{
  background: rgba(15,23,42,0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ------------------------------
   PopQuiz option states
   ------------------------------ */

label.opt{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  background: var(--card);
  transition: all var(--fade) var(--easing);
  cursor: pointer;
}

label.opt input[type="radio"]{
  accent-color: var(--brand-600);
}

label.opt.pending:hover{
  border-color: color-mix(in oklab, var(--border) 40%, var(--brand) 60%);
  box-shadow: 0 6px 14px rgba(2, 132, 199, .15);
}

label.opt.correct{
  border-color: color-mix(in oklab, var(--ok) 70%, white 30%);
  background: color-mix(in oklab, var(--ok) 12%, var(--card) 88%);
}
label.opt.wrong{
  border-color: color-mix(in oklab, var(--bad) 70%, white 30%);
  background: color-mix(in oklab, var(--bad) 10%, var(--card) 90%);
}

/* ------------------------------
   Small utilities
   ------------------------------ */

.text-xs{ font-size: 0.8rem; }
.text-sm{ font-size: 0.92rem; }
.text-xl{ font-size: 1.35rem; }
.font-semibold{ font-weight: 600; }
.mt-1{ margin-top: 0.25rem; }
.mt-2{ margin-top: 0.5rem; }
.mt-3{ margin-top: 0.75rem; }
.mt-4{ margin-top: 1rem; }
.mb-1{ margin-bottom: 0.25rem; }
.mb-2{ margin-bottom: 0.5rem; }

.text-slate-500{ color: var(--muted); }
.text-slate-600{ color: var(--muted); }
.dark .dark\:text-slate-300{ color: var(--muted); }

/* ring hover used on domain tiles (paired with Tailwind's .hover:ring-2) */
.ring-sky-300{ box-shadow: 0 0 0 0 rgba(14,165,233,0.0); }
button:hover.ring-sky-300{ box-shadow: 0 0 0 2px rgba(56,189,248,.45); }

.outline{ outline: 2px solid var(--brand-600); outline-offset: 0; }
.outline-sky-300{ outline-color: rgba(56,189,248,.65); }

/* Pill counters, tiny chips */
.badge.count{
  background: rgba(2,132,199,0.08);
  border-color: rgba(2,132,199,0.2);
  color: var(--brand-600);
}

/* ------------------------------
   Animations (subtle)
   ------------------------------ */

.fade-in{
  animation: fadeIn var(--fade) var(--easing);
}
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(2px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ------------------------------
   Focus visibility
   ------------------------------ */
:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ------------------------------
   Helpers for the hero brand token
   ------------------------------ */

.rounded-xl{
  border-radius: 12px;
}

/* ensure cards stand out on light bg */
body:not(.dark) .card{
  background-image: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.98));
}
/* === UI polish additions === */
.navlink { padding: 6px 8px; border-radius: 8px; }
.navlink:hover { background: rgba(2,132,199,.08); }
.chip { border-radius: 10px; background: rgba(2,132,199,.08); }
.card { background: rgba(255,255,255,0.85); border: 1px solid rgba(148,163,184,.25); border-radius: 16px; box-shadow: 0 8px 24px rgba(2,8,23,.04); }
.dark .card { background: #0c1324; border-color: #22304a; }
.brand-chip { font-size: 11px; padding: 2px 6px; background: linear-gradient(135deg,#0284c7,#0ea5e9); color:#fff; border-radius: 9999px; }

.grid-3 { display:grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 12px; }
@media (min-width: 768px){ .grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Domain tile spacing */
button.card.p-4.text-left { padding: 16px; }
button.card.p-4.text-left .font-semibold { font-size: 15px; }

/* Options in PopQuiz */
.opt { padding: 10px 12px; border-radius: 12px; border:1px solid rgba(148,163,184,.35); }
.opt.pending:hover { border-color: rgba(14,165,233,.55); background: rgba(14,165,233,.06); }
.opt.correct { border-color: rgba(16,185,129,.7); background: rgba(16,185,129,.08); }
.opt.wrong { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.06); }

/* Buttons */
.btn { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(148,163,184,.35); background: white; }
.dark .btn { background: rgba(2,6,23,.5); }
.btn.grad { background: linear-gradient(135deg,#0284c7,#0ea5e9); }
.btn.secondary { background: rgba(148,163,184,.12); }

/* Buy me a coffee */
.bmc { display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:12px;
       background: linear-gradient(135deg,#ffcc80,#ffb74d); color:#2f1a09; font-weight:600; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.bmc:hover { filter: brightness(1.02); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.bmc .coffee { font-size: 18px; }

/* ------------------------------
   Dark-mode text overrides (normalize Tailwind utilities)
   ------------------------------ */

/* Many pages use Tailwind text-* utilities that are too dark on our dark bg.
   Normalize them to our tokens so copy is readable everywhere. */

/* Highest-contrast text: map 700-900 to foreground */
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-neutral-900,
.dark .text-neutral-800,
.dark .text-neutral-700 { color: var(--fg) !important; }

/* Secondary copy: map 400-600 to muted */
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-gray-400,
.dark .text-neutral-600,
.dark .text-neutral-500,
.dark .text-neutral-400 { color: var(--muted) !important; }

/* Tertiary copy: 100-300 become softer muted-2 */
.dark .text-slate-300,
.dark .text-slate-200,
.dark .text-slate-100,
.dark .text-gray-300,
.dark .text-gray-200,
.dark .text-gray-100,
.dark .text-neutral-300,
.dark .text-neutral-200,
.dark .text-neutral-100 { color: var(--muted-2) !important; }

/* Headings remain bright in dark mode */
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--fg); }

/* Links in dark mode */
.dark a, .dark a.link { color: #7dd3fc; }
.dark a:hover, .dark a.link:hover { color: #bae6fd; }

/* Buttons inherit legible text in dark */
.dark .btn { color: var(--fg); }

/* Prose blocks use readable foreground */
.dark .prose,
.dark .prose p,
.dark .prose li,
.dark .prose strong { color: var(--fg); }
.dark .prose code { background: rgba(148,163,184,.18); }

/* Secondary copy inside cards should be slightly muted, not near-black */
.dark .card .text-slate-700,
.dark .card .text-slate-600,
.dark .card .text-slate-500,
.dark .card .text-gray-700,
.dark .card .text-gray-600,
.dark .card .text-gray-500,
.dark .card .text-neutral-700,
.dark .card .text-neutral-600,
.dark .card .text-neutral-500 { color: var(--muted) !important; }

/* Contrast clamp inside cards: ensure readable ink on dark */
.dark .card,
.dark .card :where(p, li, small, span, div){
  color: var(--fg);
}
/* Slightly soften secondary copy but keep it readable */
.dark .card :where(.text-slate-600,.text-slate-500,.text-gray-600,.text-gray-500){
  color: var(--muted) !important;
}
/* Prevent ultra‑light utilities from washing out */
.dark .card :where(.text-slate-300,.text-slate-200,.text-gray-300,.text-gray-200){
  color: var(--fg) !important;
}

/* ------------------------------ */
/* Extra normalization for common extremes & hero copy */
/* Tailwind extremes sometimes sneak in and cause unreadable text on dark */
.dark .text-black,
.dark .text-white { color: var(--fg) !important; }

/* Ensure first paragraph under headings (hero/section intros) stays readable */
.dark h1 + p,
.dark h2 + p { color: var(--fg) !important; }

/* Links inside containers that force darker text still pop in dark */
.dark .text-slate-700 a,
.dark .text-slate-600 a,
.dark .text-slate-500 a,
.dark .text-black a { color: #7dd3fc !important; }
.dark .text-slate-700 a:hover,
.dark .text-slate-600 a:hover,
.dark .text-slate-500 a:hover,
.dark .text-black a:hover { color: #bae6fd !important; }

/* Defensive: custom fun-text class used on demo page should be readable */
.fun-text { color: var(--fg); }
.dark .fun-text { color: var(--fg); }

/* Optional semantic helpers for consistent hero copy across pages */
.twd-title { color: var(--fg); }
.twd-subtitle { color: var(--muted); }
.lead { font-size: 1.05rem; }
.dark .lead { color: var(--fg); opacity: .95; }

/* Global dark fallback for paragraphs in main/section (not !important, so utilities can override) */
.dark main p,
.dark section p { color: var(--fg); }

/* ------------------------------
   Card text ink (dark mode, safe)
   ------------------------------ */

/* Consolidated: readable ink inside cards */
.dark .card :where(h1,h2,h3,h4,strong){ color: var(--fg); }
.dark .card :where(a){ color:#7dd3fc !important; }
.dark .card :where(a):hover{ color:#bae6fd !important; }

/* Preserve badge/brand-chip intended colors */
.dark .card .brand-chip { color: #fff !important; }
.dark .card .badge { color: var(--muted) !important; }

/* Neutralize hard-coded extremes inside cards in both themes */
.card :is(.text-white,.text-black){ color: var(--fg) !important; }

/* Normalize common Tailwind text utilities inside cards (light & dark) */
.card :is(.text-slate-900,.text-gray-900,.text-neutral-900){ color: var(--fg) !important; }
.card :is(.text-slate-700,.text-gray-700,.text-neutral-700){ color: var(--fg) !important; }
.card :is(.text-slate-600,.text-gray-600,.text-neutral-600){ color: var(--muted) !important; }
.card :is(.text-slate-500,.text-gray-500,.text-neutral-500){ color: var(--muted) !important; }
.card :is(.text-slate-400,.text-gray-400,.text-neutral-400){ color: var(--muted-2) !important; }

/* Utility ink helpers for markup cleanups (optional to use) */
.ink { color: var(--fg) !important; }
.muted-ink { color: var(--muted) !important; }

/* ==========================================================================
   Theme alias selectors (data-theme / twd-theme-dark) for consistent dark mode
   These mirror the key .dark overrides so pages using data-theme or helper class
   keep readable text and card contrast.
   ========================================================================== */

html[data-theme="dark"], .twd-theme-dark { /* anchor for specificity */ }

/* Card readability in dark theme aliases */
html[data-theme="dark"] .card,
.twd-theme-dark .card {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .card :where(p, li, small, span, div),
.twd-theme-dark .card :where(p, li, small, span, div) {
  color: var(--fg);
}

/* Map Tailwind-style utilities to tokens under dark theme aliases (high contrast) */
html[data-theme="dark"] :is(.text-slate-900,.text-slate-800,.text-slate-700,.text-gray-900,.text-gray-800,.text-gray-700,.text-neutral-900,.text-neutral-800,.text-neutral-700),
.twd-theme-dark :is(.text-slate-900,.text-slate-800,.text-slate-700,.text-gray-900,.text-gray-800,.text-gray-700,.text-neutral-900,.text-neutral-800,.text-neutral-700){
  color: var(--fg) !important;
}

/* Secondary copy */
html[data-theme="dark"] :is(.text-slate-600,.text-slate-500,.text-slate-400,.text-gray-600,.text-gray-500,.text-gray-400,.text-neutral-600,.text-neutral-500,.text-neutral-400),
.twd-theme-dark :is(.text-slate-600,.text-slate-500,.text-slate-400,.text-gray-600,.text-gray-500,.text-gray-400,.text-neutral-600,.text-neutral-500,.text-neutral-400){
  color: var(--muted) !important;
}

/* Tertiary copy */
html[data-theme="dark"] :is(.text-slate-300,.text-slate-200,.text-slate-100,.text-gray-300,.text-gray-200,.text-gray-100,.text-neutral-300,.text-neutral-200,.text-neutral-100),
.twd-theme-dark :is(.text-slate-300,.text-slate-200,.text-slate-100,.text-gray-300,.text-gray-200,.text-gray-100,.text-neutral-300,.text-neutral-200,.text-neutral-100){
  color: var(--muted-2) !important;
}

/* Headings and hero-intro lines remain bright under alias selectors */
html[data-theme="dark"] :is(h1,h2,h3,h4),
.twd-theme-dark :is(h1,h2,h3,h4){
  color: var(--fg);
}
html[data-theme="dark"] h1 + p,
html[data-theme="dark"] h2 + p,
.twd-theme-dark h1 + p,
.twd-theme-dark h2 + p{
  color: var(--fg) !important;
}

/* Links in dark under alias selectors */
html[data-theme="dark"] a,
html[data-theme="dark"] a.link,
.twd-theme-dark a,
.twd-theme-dark a.link{
  color: #7dd3fc;
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a.link:hover,
.twd-theme-dark a:hover,
.twd-theme-dark a.link:hover{
  color: #bae6fd;
}

/* Buttons under alias selectors */
html[data-theme="dark"] .btn,
.twd-theme-dark .btn{
  color: var(--fg);
}

/* Prose blocks under alias selectors */
html[data-theme="dark"] .prose,
html[data-theme="dark"] .prose :is(p, li, strong),
.twd-theme-dark .prose,
.twd-theme-dark .prose :is(p, li, strong){
  color: var(--fg);
}
html[data-theme="dark"] .prose code,
.twd-theme-dark .prose code{
  background: rgba(148,163,184,.18);
}

/* Ensure extreme utilities don’t force unreadable ink under alias selectors */
html[data-theme="dark"] :is(.text-black,.text-white),
.twd-theme-dark :is(.text-black,.text-white){
  color: var(--fg) !important;
}