/* ==================================================================
   THEME: light / dark mode.
   All brand colors (navy, navydeep, ink, gold, goldlight, paper) are
   wired into Tailwind as `rgb(var(--c-x) / <alpha-value>)`, so every
   existing utility class (bg-navy/40, text-paper/60, border-gold/30,
   bg-ink/80, ...) automatically repaints when data-theme flips, with
   no template changes needed for those. What Tailwind's own built-in
   palette classes (white/red/green) don't pick up automatically is
   patched below for the handful actually used across the app.
   ================================================================== */
:root,
:root[data-theme="dark"] {
  --c-navy: 38 48 66;
  --c-navydeep: 27 34 48;
  --c-ink: 14 18 25;
  --c-gold: 162 141 101;
  --c-goldlight: 201 180 145;
  --c-paper: 250 249 247;
}

:root[data-theme="light"] {
  --c-ink: 250 249 247;        /* page background: warm off-white */
  --c-paper: 30 34 44;         /* body text: dark ink */
  --c-navy: 233 229 221;       /* card/panel surfaces: soft warm gray */
  --c-navydeep: 222 217 206;   /* slightly deeper panel surfaces */
  --c-gold: 138 111 66;        /* deepened for contrast on light bg */
  --c-goldlight: 168 138 88;
}

html { transition: background-color .25s ease; }
body { transition: background-color .25s ease, color .25s ease; }

/* Raw white/black-based utility overrides (borders, subtle fills)
   that aren't part of the CSS-variable palette above. */
[data-theme="light"] .border-white\/10 { border-color: rgba(20,20,20,.10) !important; }
[data-theme="light"] .border-white\/15 { border-color: rgba(20,20,20,.14) !important; }
[data-theme="light"] .bg-white\/5 { background-color: rgba(20,20,20,.04) !important; }
[data-theme="light"] .bg-white\/10 { background-color: rgba(20,20,20,.06) !important; }
[data-theme="light"] .bg-white\/15 { background-color: rgba(20,20,20,.09) !important; }
[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(20,20,20,.05) !important; }
[data-theme="light"] .hover\:bg-white\/15:hover { background-color: rgba(20,20,20,.08) !important; }
[data-theme="light"] .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(20,20,20,.08) !important; }

/* Status colors (errors/success) need darker text on a light background
   to stay readable. */
[data-theme="light"] .text-red-300 { color: #b91c1c !important; }
[data-theme="light"] .text-green-300 { color: #15803d !important; }
[data-theme="light"] .bg-red-500\/10 { background-color: rgba(220,38,38,.08) !important; }
[data-theme="light"] .bg-red-500\/15 { background-color: rgba(220,38,38,.12) !important; }
[data-theme="light"] .bg-green-500\/15 { background-color: rgba(22,163,74,.12) !important; }
[data-theme="light"] .border-red-500\/30 { border-color: rgba(220,38,38,.35) !important; }

/* Scrollbar follows the theme too. */
[data-theme="light"] ::-webkit-scrollbar-track { background: #FAF9F7; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #E9E5DD; border-color: #FAF9F7; }

/* ---- Card face texture: subtle diagonal weave to feel like a real
   collectible rather than a flat web card ---- */
.card-texture {
  background-image:
    radial-gradient(circle at 15% 15%, rgba(162,141,101,0.18), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(162,141,101,0.10), transparent 40%);
}

.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

.num-tag {
  font-family: 'Source Code Pro', monospace;
  letter-spacing: 0.06em;
}

/* Reveal-on-scroll target state (JS toggles .is-visible) */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Modal backdrop */
.qw-modal-backdrop { backdrop-filter: blur(6px); }

/* Scrollbar (webkit) tuned to brand */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0E1219; }
::-webkit-scrollbar-thumb { background: #263042; border-radius: 999px; border: 2px solid #0E1219; }