/* Theme system for insights.tageldin.com
   Default = dark CRT telemetry (base). html.light = neubrutalist reskin of v11-coral.html.
   Tailwind color tokens (crt/panel/phos/dim/haz/grn/line) resolve from these vars, so most
   of the recolor is free; the rest is structural neubrutalism (borders + offset shadows). */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap");

:root{
  --crt:#0A0A0A; --panel:#121212; --phos:#EAEAEA; --dim:#8A8A8A;
  --haz:#E85D4A; --grn:#4AF626; --line:#2A2A2A;
}

/* readability: enlarge everything one step (both themes) */
html{ zoom:1.08; }
/* buttons never wrap */
.btn{ white-space:nowrap; }
/* heavier body text for readability (both themes) */
body p, body li, body dd, body dt{ font-weight:500; }
/* light: roomier heading line-height so highlight boxes clear the line above */
html.light h1{ line-height:1.42 !important; }
html.light h2{ line-height:1.12 !important; }

/* ---------------- CORAL: neubrutalist palette ---------------- */
html.light{
  --crt:#FFFDF5;    /* cream canvas */
  --panel:#FFFFFF;  /* card surface */
  --phos:#111111;   /* ink text */
  --dim:#555555;    /* muted */
  --haz:#E85D4A;    /* coral accent */
  --grn:#2563EB;    /* repurposed as blue accent */
  --line:#111111;   /* borders = ink */
  --sun:#E85D4A;
  --lime:#A3E635;
  --shadow:6px 6px 0 #111111;
  --shadow-sm:4px 4px 0 #111111;
}

/* cream canvas (base inline style hardcodes a dark body bg, so override explicitly) */
html.light, html.light body{ background:var(--crt) !important; color:var(--phos) !important; }
/* thicker section rules to read as neubrutalist */
html.light nav, html.light header, html.light section{ border-bottom-width:3px !important; border-color:#111 !important; }

/* strip the CRT atmosphere */
html.light body::before{ opacity:0; }
html.light .scan::after{ display:none; }
html.light .glow{ text-shadow:none; }
html.light ::selection{ background:var(--sun); color:#111; }

/* type: Work Sans body, Space Mono for the mono labels */
html.light body{ font-family:'Work Sans',system-ui,sans-serif; }
html.light .font-mono{ font-family:'Space Mono',monospace; }

/* blueprint grid -> faint ink grid on cream */
html.light .blueprint{
  background-image:
    linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px);
}

/* nav: solid cream + thick base rule + neubrutalist brand mark */
html.light nav{ background:var(--crt) !important; border-bottom:3px solid #111 !important; }
html.light nav .bg-haz{ background:var(--grn) !important; color:#fff !important; border:2px solid #111; box-shadow:3px 3px 0 #111; }

/* index card grid: drop the hairline seam, give each cell a bordered, shadowed card */
html.light .gridlines{ background:transparent !important; gap:20px; border:0 !important; padding:0; }
html.light .gridlines > *{ background:var(--panel) !important; }
html.light .card,
html.light .gridlines > *,
html.light .bg-panel{
  border:3px solid #111 !important;
  box-shadow:var(--shadow);
  background:var(--panel);
}
html.light .card:hover{
  border-color:#111 !important;
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 #111;
}

/* links */
html.light .lnk:hover{ color:var(--haz); }

/* article prose */
html.light .prose strong{ color:#111; }
html.light .prose a{ color:var(--haz); }

/* footer: ink slab, cream text (mirrors coral template footer) */
html.light footer{ background:#111 !important; border-top:3px solid #111; }
html.light footer, html.light footer *{ color:#FFFDF5 !important; }
html.light footer .lnk:hover{ color:var(--sun) !important; }

/* section eyebrows -> black chips (match ai/samer) */
html.light :is(p,h2)[class*="tracking-[0.16em]"]{
  display:inline-block; background:#111 !important; color:#FFFDF5 !important;
  padding:6px 12px; border:3px solid #111; box-shadow:4px 4px 0 #111;
  font-family:'Space Mono',monospace; font-size:11px;
}

/* =============== CANDY COLOR (v11-coral parity) =============== */
/* index THEME grid (3 cards): sun / lime / blue */
html.light .gridlines.sm\:grid-cols-3 > *:nth-child(-n+2) *{ color:#111 !important; }
html.light .gridlines.sm\:grid-cols-3 > *:nth-child(1){ background:var(--sun) !important; }
html.light .gridlines.sm\:grid-cols-3 > *:nth-child(2){ background:var(--lime) !important; }
html.light .gridlines.sm\:grid-cols-3 > *:nth-child(3){ background:var(--grn) !important; }
html.light .gridlines.sm\:grid-cols-3 > *:nth-child(3) *{ color:#fff !important; }

/* index LOG grid (article teasers): rotating light candy, ink text */
html.light .gridlines:not(.sm\:grid-cols-3) > * *{ color:#111 !important; }
html.light .gridlines:not(.sm\:grid-cols-3) > *:nth-child(4n+1){ background:var(--sun) !important; }
html.light .gridlines:not(.sm\:grid-cols-3) > *:nth-child(4n+2){ background:var(--lime) !important; }
html.light .gridlines:not(.sm\:grid-cols-3) > *:nth-child(4n+3){ background:var(--grn) !important; }
html.light .gridlines:not(.sm\:grid-cols-3) > *:nth-child(4n+3) *{ color:#fff !important; }
html.light .gridlines:not(.sm\:grid-cols-3) > *:nth-child(4n+4){ background:var(--haz) !important; }

/* v11 highlight box on the accented heading word */
html.light :is(h1,h2) .glow{
  background:var(--sun); color:#111 !important; padding:0 0.14em;
  border:3px solid #111; box-shadow:4px 4px 0 #111; text-shadow:none;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* article: sun author card for a pop of color */
html.light article .bg-panel{ background:var(--sun) !important; }

/* keep footer content clear of the fixed theme toggle (both themes) */
footer .mx-auto{ padding-right:190px; padding-top:14px; padding-bottom:24px; }
@media (max-width:767px){ footer .mx-auto{ padding-right:20px; padding-top:16px; padding-bottom:80px; } }

/* ================= ARTICLE PROSE ENHANCEMENTS (both themes) ================= */
/* brighter, more readable body copy (prose div is text-dim by default) */
html body .prose{ color:#c9c9c9; }
html.light body .prose{ color:#242424; }

/* lead paragraph + drop cap */
html body .prose > p:first-of-type{ font-size:1.06em; }
html body .prose > p:first-of-type::first-letter{
  float:left; font-family:'Archivo',sans-serif; font-weight:900;
  font-size:4.4em; line-height:0.74; margin:6px 14px 0 0; color:var(--haz,#E85D4A);
}

/* section headers: telemetry kicker (// 01) + full-width divider rule */
html body .prose{ counter-reset:sec; }
html body .prose h2{
  counter-increment:sec; margin-top:3.75rem !important; padding-top:2rem;
  border-top:1px solid var(--line,#2A2A2A);
}
html body .prose h2::before{
  content:"// " counter(sec,decimal-leading-zero);
  display:block; margin-bottom:0.7rem;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:0.4em; font-weight:500;
  letter-spacing:0.18em; color:var(--haz,#E85D4A);
}

/* key stats / vital data -> accent highlight (skill: red for vital data) */
html body .prose strong{ color:var(--haz,#E85D4A) !important; font-weight:700; }

/* links: accent underline */
html body .prose a{ color:var(--haz,#E85D4A); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
html body .prose a:hover{ background:var(--haz,#E85D4A); color:var(--crt,#0A0A0A); }

/* --------------- floating theme toggle (both themes) --------------- */
#theme-toggle{
  position:fixed; right:16px; bottom:16px; z-index:60; display:flex;
  border:3px solid #111; box-shadow:4px 4px 0 #111; background:#fff;
  font-family:'Space Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
}
#theme-toggle button{ padding:8px 12px; border:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; background:transparent; color:#111; }
#theme-toggle button + button{ border-left:3px solid #111; }
#theme-toggle button[aria-pressed="true"]{ background:#111; color:#fff; }
html.light #theme-toggle button[aria-pressed="true"]{ background:#E85D4A; color:#111; }
@media (prefers-reduced-motion: no-preference){
  #theme-toggle button{ transition:background-color .12s ease, color .12s ease; }
}