/* theme.css — shared styles for every page.
   Colors and fonts come from THEME in config.js (via theme.js).
   The fallbacks below only matter if theme.js fails to load. */

:root {
  --black: #000000;
  --white: #ffffff;
  --selected: #00ffff;
  --cursor-color: #ff00ff;
  --hover: #ffff00;

  --h1-family: Consolas, 'Courier New', monospace;
  --h2-family: Consolas, 'Courier New', monospace;
  --h3-family: Consolas, 'Courier New', monospace;
  --body-family: Consolas, 'Courier New', monospace;
  --small-family: Consolas, 'Courier New', monospace;
}

/* ---------- Base ---------- */
html, body { cursor: var(--cursor-default, default); }

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--body-family);
  font-size: var(--body-size, 0.875rem);
}

.bg-dot-grid {
  background-color: var(--black);
  background-image: radial-gradient(color-mix(in srgb, var(--white) 25%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Anything clickable gets the "pointer" cursor variant */
a, button, [onclick], .clickable { cursor: var(--cursor-pointer, pointer) !important; }

::selection { background: var(--selected); color: var(--black); }

/* ---------- Type scale (use these classes, not Tailwind text-* sizes) ---------- */
.t-h1, .t-h2, .t-h3, .t-body, .t-small { margin: 0; }

.t-h1 {
  font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking); text-transform: var(--h1-transform); line-height: var(--h1-leading);
}
.t-h2 {
  font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking); text-transform: var(--h2-transform); line-height: var(--h2-leading);
}
.t-h3 {
  font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking); text-transform: var(--h3-transform); line-height: var(--h3-leading);
}
.t-body {
  font-family: var(--body-family); font-size: var(--body-size); font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking); text-transform: var(--body-transform); line-height: var(--body-leading);
}
.t-small {
  font-family: var(--small-family); font-size: var(--small-size); font-weight: var(--small-weight);
  letter-spacing: var(--small-tracking); text-transform: var(--small-transform); line-height: var(--small-leading);
}

/* ---------- Frames & rules ---------- */
.double-border {
  border: 1px solid var(--white);
  outline: 1px solid var(--white);
  outline-offset: -4px;
}
.rule-b { border-bottom: 1px solid var(--white); }
.dim { color: color-mix(in srgb, var(--white) 55%, var(--black)); }

/* ---------- Tabs & buttons (one component, three states) ---------- */
.tab {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
  padding: 0.375rem 1rem;
  transition: background-color .12s, color .12s, border-color .12s;
}
.tab:hover, .tab:focus-visible {
  background: var(--hover); color: var(--black); border-color: var(--hover); outline: none;
}
.tab.is-active,
.tab.is-active:hover {
  background: var(--selected); color: var(--black); border-color: var(--selected);
}

/* ---------- Cards ---------- */
.tech-card {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  transition: transform .15s ease-in-out, filter .15s ease-in-out;
}
.tech-card:hover, .tech-card:focus-visible {
  transform: translateY(-2px);
  /* drop-shadow follows the painted shape (tab + body), unlike box-shadow's rectangle */
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hover) 70%, transparent))
          drop-shadow(0 0 9px color-mix(in srgb, var(--hover) 45%, transparent));
  outline: none;
}
.card-label {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
  padding: 0.25rem 0.75rem;
  transition: background-color .12s, color .12s, border-color .12s;
}
.tech-card:hover .card-label,
.tech-card:focus-visible .card-label {
  background: var(--hover); color: var(--black); border-color: var(--hover);
}
.tech-card:hover .double-border,
.tech-card:focus-visible .double-border {
  border-color: var(--hover); outline-color: var(--hover);
}

/* ---------- Accent elements ---------- */
.accent-selected { color: var(--selected); }
.dot-selected { background: var(--selected); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--black); border: 1px solid #333; }
::-webkit-scrollbar-thumb { background: var(--white); }
::-webkit-scrollbar-thumb:hover { background: var(--hover); }

/* ---------- Keyboard focus ---------- */
:focus-visible { outline: 2px solid var(--selected); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Added: placeholders, hero zoom, bio list, contact form
   ============================================================ */

/* Shown wherever an image path is empty or fails to load */
.placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background-color: var(--black);
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--white) 8%, transparent) 0 1px, transparent 1px 10px);
  color: color-mix(in srgb, var(--white) 55%, var(--black));
}

/* Hero image zooms on hover only when the hero is clickable */
.hero-media { transition: transform .5s; }
.hero.clickable:hover .hero-media { transform: scale(1.05); }

/* Bio list rows */
.bio-row {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
}
.bio-row dt { color: var(--selected); transition: color .12s; }
.bio-row:hover dt { color: var(--hover); }
.bio-row dd { margin: 0; }
@media (max-width: 480px) {
  .bio-row { grid-template-columns: 1fr; gap: .25rem; }
}

/* Contact form */
.field-label { display: block; margin-bottom: .375rem; color: color-mix(in srgb, var(--white) 55%, var(--black)); }
.field {
  width: 100%;
  background: var(--black); color: var(--white);
  border: 1px solid var(--white); border-radius: 0;
  padding: .625rem .75rem;
  font-family: var(--body-family); font-size: var(--body-size);
  color-scheme: dark; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field::placeholder { color: color-mix(in srgb, var(--white) 40%, var(--black)); }
.field:hover { border-color: var(--hover); }
.field:focus { border-color: var(--selected); box-shadow: 0 0 0 1px var(--selected); caret-color: var(--selected); }
.form-status[data-state="ok"]  { color: var(--selected); }
.form-status[data-state="err"] { color: var(--hover); }
.tab:disabled { opacity: .5; pointer-events: none; }

/* Crisp scaling for pixel art */
.pixelated { image-rendering: pixelated; }