/* ============================================================
   THEME — edit these values to rebrand the whole site.
   RGB format: space-separated, no commas.
   ============================================================ */
:root {
  /* Surfaces */
  --bg:         11 14 20;       /* #0a0a0a  page background       */
  --bg-soft:    19 24 32;       /* #121212  alternating section   */
  --card:       24 31 42;       /* #1a1a1a  cards & panels        */
  --border:     42 52 66;       /* #2a2a2a  hairlines & dividers  */

  /* Text */
  --text:       232 237 243;    /* #f5f5f5  primary text          */
  --muted:      139 152 168;    /* #a1a1aa  secondary text        */

  /* Brand */
  --accent:     232 76 61;      /* #dc2626  red-600 — CTAs, links */
  --accent-hover: 245 179 1;    /* #ef4444  red-500 — hover state */
  --accent-fg:  11 14 20;    /* #ffffff  text on accent bg     */
  --glow:       232 76 61;      /* shadow color for accent glow   */

  /* Errors (kept distinct from brand accent) */
  --danger:     232 76 61;      /* #991b1b  red-800               */
}

/* ========== Global ========== */
html { scroll-behavior: smooth; }

select option {
  background: rgb(var(--bg-soft));
  color: rgb(var(--text));
}

/* ========== Hero background (home) ========== */
/*.hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 75% 20%, rgb(var(--accent) / 0.18), transparent),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgb(var(--border) / 0.6), transparent);
}
*/

/* ========== Page hero (inner pages) ========== */
.page-hero-bg {
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgb(var(--accent) / 0.18), transparent);
}

/* ========== Scroll reveal ========== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   GRAPH PAPER — white lines on dark bg
   No mask, no opacity — pure, uniform grid.
   ============================================================ */

.bg-graph {
  background-color: #0b0e14 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

.bg-graph-accent {
  background-color: #0b0e14 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.14) 1px, transparent 1px) !important;
  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px !important;
}

.bg-graph-soft {
  background-color: #131820 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px) !important;
  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px !important;
}