/* ====================================================================
   TRINITY OVERRIDES — Applies the sand + lagoon-blue palette to ALL
   legacy "matrix" pages. Load AFTER trinity-system.css.
   Strategy: redefine the legacy :root variables so the entire page
   re-themes via the cascade, plus aggressive overrides for hardcoded
   matrix colors that don't go through variables.
   ==================================================================== */

:root {
  /* Surfaces (legacy matrix vars → Lanikai sand) */
  --bg: #E8D5A4 !important;
  --bg-2: #DFCB97 !important;
  --bg-3: #D6C088 !important;
  --bg-4: #C9B375 !important;
  --bg-card: #FFFFFF !important;
  --bg-code: #F4E8C8 !important;
  --bg-elev: #FCFAF3 !important;
  --surface: #FFFFFF !important;
  --surface2: #FCFAF3 !important;

  /* Typography */
  --text: #2D1F0E !important;
  --text-dim: #5C4A35 !important;
  --text-muted: rgba(60,40,15,0.55) !important;
  --text-2: #5C4A35 !important;
  --text-3: #8C7858 !important;

  /* Borders */
  --border: rgba(60,40,15,0.10) !important;
  --border-solid: rgba(60,40,15,0.18) !important;
  --border-2: rgba(60,40,15,0.16) !important;
  --border-3: rgba(60,40,15,0.26) !important;

  /* Matrix green → tropical lagoon blue */
  --green: #3DA5D9 !important;
  --green-dim: rgba(61,165,217,0.10) !important;
  --green-glow: rgba(61,165,217,0.28) !important;

  /* Cyan → brighter lagoon */
  --cyan: #5BB8E5 !important;
  --cyan-dim: rgba(91,184,229,0.10) !important;
  --cyan-glow: rgba(91,184,229,0.28) !important;

  /* Gold → warm sand gold */
  --gold: #B89E5E !important;
  --gold-dim: rgba(184,158,94,0.12) !important;
  --gold-glow: rgba(184,158,94,0.25) !important;

  /* Orange accent → lagoon blue (unify) */
  --accent: #3DA5D9 !important;
  --accent2: #5BB8E5 !important;
  --accent-dim: rgba(61,165,217,0.10) !important;
  --accent-glow: rgba(61,165,217,0.30) !important;

  /* Reds stay (errors etc) but warmer */
  --red: #E85C2A !important;
  --orange: #B89E5E !important;
}

/* ===== Force body to sand + apply grain texture ===== */
html { background: #E8D5A4 !important; }
body {
  background: #E8D5A4 !important;
  color: #2D1F0E !important;
}

/* Override the matrix grid backgrounds with sand grain */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.12  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.40  0 0 0 0 0.18  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)'/%3E%3C/svg%3E') !important;
  background-size: 300px 300px, 150px 150px !important;
  background-position: 0 0, 0 0 !important;
}

/* Sun-on-sand warmth + dune shadows (replaces matrix scanlines) */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 80% 60% at 12% -10%, rgba(255,238,180,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 18%, rgba(245,220,150,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(140,100,50,0.18) 0%, transparent 65%) !important;
}

/* ===== Kill matrix glows / hard text-shadows ===== */
*, *::before, *::after {
  text-shadow: none !important;
}

/* ===== Heading + body text colors ===== */
h1, h2, h3, h4, h5, h6 { color: #2D1F0E !important; }
p, li { color: #5C4A35 !important; }

/* Make accent text actually use the new blue */
.green, .text-green, [style*="color: var(--green)"] { color: #3DA5D9 !important; }
.cyan, .text-cyan, [style*="color: var(--cyan)"] { color: #2483BA !important; }
.gold, .text-gold, [style*="color: var(--gold)"] { color: #B89E5E !important; }

/* ===== Links ===== */
a {
  color: #2483BA !important;
}
a:hover { color: #3DA5D9 !important; }

/* ===== Generic surface / card / panel patterns ===== */
.surface,
.bg-surface,
[class*="-card"],
[class*="card-"],
[class*="-panel"],
.panel,
.cta-card,
.box,
.feature {
  background: #FFFFFF !important;
  color: #2D1F0E !important;
  border-color: rgba(60,40,15,0.10) !important;
  box-shadow:
    0 1px 2px rgba(45,31,14,0.08),
    0 6px 14px rgba(45,31,14,0.08),
    0 20px 40px rgba(45,31,14,0.06) !important;
}

/* ===== Nav bar — light over sand ===== */
nav, .nav, [class*="-nav"], header[class*="nav"] {
  background: rgba(232,213,164,0.78) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid rgba(60,40,15,0.10) !important;
}
nav a, .nav a, .nav-link, .nav-btn {
  color: #2D1F0E !important;
  text-shadow: none !important;
}
nav a:hover, .nav a:hover, .nav-link:hover {
  color: #3DA5D9 !important;
  background: rgba(61,165,217,0.08) !important;
}
.nav-brand, .nav-logo, .logo {
  color: #2D1F0E !important;
  filter: none !important;
}

/* ===== CTAs — primary actions get lagoon blue ===== */
button[class*="primary"],
.btn-primary,
.cta-primary,
.cta,
.cta-green,
[class*="cta-green"],
.btn[class*="green"] {
  background: #3DA5D9 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow:
    0 2px 4px rgba(61,165,217,0.18),
    0 8px 20px rgba(61,165,217,0.22),
    0 24px 48px rgba(61,165,217,0.14) !important;
  text-shadow: none !important;
}
button[class*="primary"]:hover,
.btn-primary:hover,
.cta-primary:hover,
.cta-green:hover {
  background: #5BB8E5 !important;
  transform: translateY(-1px) !important;
}

.cta-gold,
[class*="cta-gold"],
.btn[class*="gold"] {
  background: linear-gradient(135deg, #B89E5E 0%, #C9B375 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow:
    0 2px 4px rgba(184,158,94,0.20),
    0 8px 20px rgba(184,158,94,0.24) !important;
}

/* ===== Inputs ===== */
input, textarea, select {
  background: #FCFAF3 !important;
  border: 1px solid rgba(60,40,15,0.16) !important;
  color: #2D1F0E !important;
  box-shadow: inset 0 1px 2px rgba(45,31,14,0.06) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #3DA5D9 !important;
  box-shadow: 0 0 0 3px rgba(61,165,217,0.15), inset 0 1px 2px rgba(45,31,14,0.06) !important;
  background: #FFFFFF !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(60,40,15,0.45) !important;
}

/* ===== Borders / dividers ===== */
hr, .divider, [class*="divider"] {
  border-color: rgba(60,40,15,0.10) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(60,40,15,0.18) 50%, transparent 100%) !important;
}

/* ===== Tables ===== */
table, th, td {
  border-color: rgba(60,40,15,0.10) !important;
  color: #2D1F0E !important;
}
th { background: #F4E8C8 !important; }

/* ===== Code blocks readable on sand ===== */
pre, code {
  background: #2D1F0E !important;
  color: #E8D5A4 !important;
  border: 1px solid rgba(60,40,15,0.18) !important;
}

/* ===== Override matrix-specific class patterns ===== */
.matrix-bg, .matrix-grid, [class*="matrix"] {
  display: none !important;
}

/* Live counters / fear-ticker bars: convert to calm sand-toned info bar */
.fear-ticker, .live-strip, [class*="ticker"] {
  background: #FFFFFF !important;
  border-color: rgba(60,40,15,0.10) !important;
  color: #2D1F0E !important;
  box-shadow: 0 2px 8px rgba(45,31,14,0.08) !important;
}
.fear-ticker *, .live-strip *, [class*="ticker"] * {
  color: #2D1F0E !important;
}

/* Footer — keep dark for water trench feel */
footer, .footer {
  background: #0A2540 !important;
  color: #FFFFFF !important;
  border-top: 3px solid #3DA5D9 !important;
}
footer *, .footer * { color: rgba(255,255,255,0.85) !important; }
footer h5, .footer h5 { color: rgba(255,255,255,0.55) !important; }
footer a:hover, .footer a:hover { color: #FFFFFF !important; }