/* Brand overlay for the From Sand to Agents interactive atlas.
   Layout, type scale and motion are untouched; only the palette is remapped to
   the site's charcoal / platinum / gold / emerald system.
   teal -> gold (primary accent) · amber -> emerald (second accent) */

:root {
  --background: 210 7% 11%;      /* #1A1C1E */
  --foreground: 210 36% 96%;     /* #F0F4F8 */
  --card: 205 7% 14%;
  --card-foreground: 210 36% 96%;
  --border: 210 10% 26%;
  --input: 210 10% 26%;
  --ring: 46 65% 52%;
  --primary: 46 65% 52%;
  --primary-foreground: 210 7% 11%;
  --secondary: 205 7% 16%;
  --secondary-foreground: 210 36% 96%;
  --muted: 205 7% 18%;
  --muted-foreground: 210 12% 62%;
  --accent: 158 100% 33%;
  --accent-foreground: 210 7% 11%;
  --sidebar: 210 8% 9%;
  --sidebar-foreground: 210 36% 96%;
  --sidebar-border: 210 10% 24%;
  --sidebar-primary: 46 65% 52%;
  --sidebar-primary-foreground: 210 7% 11%;
  --sidebar-accent: 205 7% 16%;
  --sidebar-accent-foreground: 210 36% 96%;
  --sidebar-ring: 46 65% 52%;
  --elevate-1: #0000001f;
  --elevate-2: #0000003d;
}

html, body { background: #1A1C1E !important; color: #F0F4F8 !important; }

/* ---------- grounds ---------- */
.bg-\[\#f3f0e7\] { background-color: #1A1C1E !important; }
.bg-\[\#f3f0e7\]\/90 { background-color: rgba(26, 28, 30, 0.92) !important; }
.bg-\[\#f7f5ee\],
.bg-\[\#fffdf6\],
.hover\:bg-\[\#fffdf6\]:hover { background-color: #202325 !important; }
.bg-\[\#e9f0ec\] { background-color: #1F2426 !important; }
.bg-\[\#eeeade\] { background-color: #232527 !important; }
.bg-\[\#e9e5d9\] { background-color: #1D2022 !important; }
.bg-\[\#173644\] { background-color: #16181A !important; }
.bg-slate-300 { background-color: rgba(240, 244, 248, 0.18) !important; }
.bg-slate-950\/35 { background-color: rgba(5, 6, 7, 0.62) !important; }
.bg-red-50 { background-color: rgba(220, 80, 70, 0.12) !important; }

/* ---------- ink ---------- */
.text-\[\#173644\] { color: #F0F4F8 !important; }
.text-\[\#e9eee8\],
.text-\[\#f3f0e7\],
.text-\[\#f7f5ee\] { color: #F0F4F8 !important; }
.text-slate-900 { color: #F0F4F8 !important; }
.text-slate-800 { color: rgba(240, 244, 248, 0.88) !important; }
.text-slate-700 { color: rgba(240, 244, 248, 0.82) !important; }
.text-slate-600 { color: rgba(240, 244, 248, 0.76) !important; }
.text-slate-500 { color: rgba(240, 244, 248, 0.62) !important; }
.text-slate-300 { color: rgba(240, 244, 248, 0.74) !important; }
.placeholder\:text-slate-400::placeholder { color: rgba(240, 244, 248, 0.45) !important; }
.text-white, .hover\:text-white:hover { color: #FFFFFF !important; }
.text-red-500 { color: #E4736B !important; }
.text-red-800 { color: #EFA39C !important; }

/* ---------- primary accent: teal -> gold ---------- */
.text-teal-300,
.text-teal-400\/70,
.text-teal-700,
.text-teal-800,
.text-teal-950 { color: #D4AF37 !important; }
.hover\:text-teal-950:hover { color: #E7C860 !important; }
.bg-teal-600,
.bg-teal-700 { background-color: #D4AF37 !important; }
.hover\:bg-teal-800:hover { background-color: #E7C860 !important; }
.bg-teal-50\/70 { background-color: rgba(212, 175, 55, 0.12) !important; }
.border-teal-700\/15,
.border-teal-700\/20,
.border-teal-800\/15 { border-color: rgba(212, 175, 55, 0.3) !important; }
.decoration-teal-700\/40 { text-decoration-color: rgba(212, 175, 55, 0.55) !important; }
.focus-within\:border-teal-600:focus-within { border-color: #D4AF37 !important; }
.focus-within\:ring-teal-600\/15:focus-within { --tw-ring-color: rgba(212, 175, 55, 0.28) !important; }

/* ---------- second accent: amber -> emerald ---------- */
.text-amber-400,
.text-amber-600,
.text-amber-700,
.text-amber-900 { color: #00A86B !important; }
.bg-amber-400,
.bg-amber-500 { background-color: #D4AF37 !important; }
.bg-amber-50\/60 { background-color: rgba(0, 168, 107, 0.12) !important; }
.border-amber-500\/20,
.border-amber-500\/25,
.border-amber-500\/30 { border-color: rgba(0, 168, 107, 0.32) !important; }

/* keep dark ink on the solid accent fills (two classes beats one) */
.bg-amber-500.text-\[\#173644\],
.bg-amber-400.text-\[\#173644\],
.bg-teal-600.text-\[\#f7f5ee\],
.bg-teal-700.text-\[\#f7f5ee\],
.bg-teal-600.text-\[\#f3f0e7\],
.bg-teal-700.text-\[\#f3f0e7\] { color: #1A1C1E !important; }
.bg-teal-600, .bg-teal-700, .bg-amber-400, .bg-amber-500 { color: #1A1C1E !important; }

/* ---------- edges ---------- */
.border-slate-300,
.border-slate-300\/60,
.border-slate-300\/80,
.border-slate-400\/50 { border-color: rgba(240, 244, 248, 0.16) !important; }
.border-slate-700\/10 { border-color: rgba(240, 244, 248, 0.1) !important; }
.border-slate-700\/30 { border-color: rgba(240, 244, 248, 0.14) !important; }
.border-white\/10 { border-color: rgba(240, 244, 248, 0.12) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(240, 244, 248, 0.09) !important; }
.border-red-300 { border-color: rgba(228, 115, 107, 0.4) !important; }

/* ---------- textures & depth ---------- */
.field-grid {
  background-image:
    linear-gradient(rgba(240, 244, 248, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 244, 248, 0.055) 1px, transparent 1px) !important;
}
.noise:after { opacity: 0.055 !important; }
.topic-card { box-shadow: 0 5px rgba(0, 0, 0, 0.35) !important; }
.topic-card:hover {
  border-color: rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45) !important;
}
.topic-card-amber:hover { border-color: rgba(0, 168, 107, 0.6) !important; }

::selection { background: rgba(212, 175, 55, 0.3); }
:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: rgba(240, 244, 248, 0.22) !important; }

/* ---------- the credit line ---------- */
#ys-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
}
#ys-credit .ys-by {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.58);
}
#ys-credit .ys-name {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: #D4AF37;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}
#ys-credit .ys-name:hover { color: #E7C860; border-bottom-color: #E7C860; }
#ys-credit .ys-li {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.58);
  text-decoration: none;
  border: 1px solid rgba(240, 244, 248, 0.22);
  padding: 6px 10px;
  border-radius: 2px;
}
#ys-credit .ys-li:hover { color: #D4AF37; border-color: #D4AF37; }