/* Theme system for samer.tageldin.com. Default = dark CRT telemetry (base).
   html.light = neubrutalist reskin echoing v11-coral / ai.tageldin.com light theme:
   cream canvas, black-chip eyebrows, cream cards w/ offset shadows, candy accents,
   colored bands. Tailwind color tokens resolve from these vars. */
@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.14; }
/* 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; }

/* ---------------- LIGHT: neubrutalist palette ---------------- */
html.light{
  --crt:#FFFDF5; --panel:#FFFFFF; --phos:#111111; --dim:#555555;
  --haz:#E85D4A; --grn:#2563EB; --line:#111111;
  --sun:#FFD23F; --lime:#A3E635;
  --shadow:6px 6px 0 #111111; --shadow-sm:4px 4px 0 #111111;
}

/* ---- base ---- */
html.light, html.light body{ background:var(--crt) !important; color:var(--phos) !important; }
html.light body::before{ opacity:0; }
html.light .scan::after{ display:none; }
html.light .glow-g{ text-shadow:none; }
html.light ::selection{ background:var(--sun); color:#111; }
html.light .font-mono{ font-family:'Space Mono',monospace; }
html.light nav, html.light header, html.light section{ border-color:#111 !important; }
html.light nav, html.light header, html.light section{ border-bottom-width:3px !important; }
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 ---- */
html.light nav{ background:var(--crt) !important; }
html.light nav .bg-haz{ background:var(--grn) !important; color:#fff !important; border:2px solid #111; box-shadow:3px 3px 0 #111; }
html.light nav .lnk{ color:#111 !important; }
html.light nav .lnk:hover{ color:var(--grn) !important; }

/* ---- section eyebrows -> black chips ---- */
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;
}

/* ---- cards: gridlines cells + role cards ---- */
html.light .gridlines{ background:transparent !important; gap:18px; border:0 !important; }
html.light .gridlines > *, html.light .role{ background:#fff !important; border:3px solid #111 !important; box-shadow:var(--shadow); }
html.light .role.reveal{ margin-bottom:0; }
html.light .border-line{ border-color:#111 !important; }
html.light .border-haz{ border-color:#111 !important; }

/* ---- heading highlight box (hero + CTA) ---- */
html.light .glow{ text-shadow:none; }
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;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* hero subtitle uses .glow on a <p>: keep it plain coral, no box */
html.light p.glow{ background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--haz) !important; padding:0 !important; }

/* ---- FOCUS (// 01): candy accent cards ---- */
html.light #focus .gridlines > *:nth-child(4n+1){ background:var(--sun) !important; }
html.light #focus .gridlines > *:nth-child(4n+2){ background:var(--lime) !important; }
html.light #focus .gridlines > *:nth-child(4n+3){ background:var(--grn) !important; }
html.light #focus .gridlines > *:nth-child(4n+3) *{ color:#fff !important; }
html.light #focus .gridlines > *:nth-child(4n+4){ background:var(--haz) !important; }
html.light #focus .gridlines > *:nth-child(4n+4) *{ color:#111 !important; }

/* ---- EXPERIENCE (// 02): blue band, cream role cards ---- */
html.light #work{ background:var(--grn) !important; }
html.light #work > div > p.text-dim{ color:#e8eefc !important; }

/* ---- CREDENTIALS (// 03): candy accent cards ---- */
html.light #creds .gridlines > *:nth-child(3n+1){ background:var(--sun) !important; }
html.light #creds .gridlines > *:nth-child(3n+2){ background:var(--lime) !important; }
html.light #creds .gridlines > *:nth-child(3n+3){ background:var(--grn) !important; }
html.light #creds .gridlines > *:nth-child(3n+3) *{ color:#fff !important; }

/* ---- CONTACT: sun band, coral highlight ---- */
html.light #contact{ background:var(--sun) !important; }
html.light #contact h2 .glow{ background:var(--haz) !important; color:#111 !important; }

/* ---- buttons ---- */
html.light .btn-haz{ background:var(--grn) !important; color:#fff !important; border:3px solid #111 !important; box-shadow:4px 4px 0 #111; }
html.light .btn-haz:hover{ background:#1d4ed8 !important; color:#fff !important; transform:translate(2px,2px); box-shadow:2px 2px 0 #111; }
html.light .btn-out{ background:#fff !important; color:#111 !important; border:3px solid #111 !important; box-shadow:var(--shadow-sm); }
html.light .btn-out:hover{ background:var(--sun) !important; transform:translate(2px,2px); box-shadow:2px 2px 0 #111; }

/* ---- links, footer ---- */
html.light .lnk:hover{ color:var(--haz); }
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; }

/* 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; } }

/* --------------- 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; }
}