/* ============================================
   Ágere — Brand Override for Recursos Platform
   Replaces AI4PDG visual identity with Ágere brand
   ============================================ */

/* ── Google Fonts: Plus Jakarta Sans + IBM Plex Mono ─────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Remap platform CSS variables to Ágere palette ────────── */
:root {
  /* Ágere brand colors */
  --agere-marino:   #1A3468;
  --agere-pizarra:  #3D5F9A;
  --agere-cielo:    #A8C4E8;
  --agere-niebla:   #E8EEF7;
  --agere-humo:     #F4F6FA;
  --agere-blanco:   #FFFFFF;
  --agere-grafito:  #64748B;

  /* Override platform variables */
  --bg-base:       var(--agere-humo);
  --bg-surface:    var(--agere-blanco);
  --bg-elevated:   var(--agere-niebla);
  --bg-card:       var(--agere-blanco);

  --text-primary:  var(--agere-marino);
  --text-secondary:var(--agere-pizarra);
  --text-tertiary: var(--agere-grafito);

  --accent:        var(--agere-pizarra);
  --accent-hover:  var(--agere-marino);
  --accent-subtle: rgba(61,95,154,0.08);
  --accent-glow:   rgba(61,95,154,0.12);
  --accent-btn:    var(--agere-marino);

  --font-heading:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  --border:        rgba(26,52,104,0.08);
  --border-strong: rgba(26,52,104,0.18);
}

/* ── Force light mode always (no dark mode) ──────────────── */
[data-theme="dark"],
.dark,
body.dark {
  --bg-base:       var(--agere-humo);
  --bg-surface:    var(--agere-blanco);
  --bg-elevated:   var(--agere-niebla);
  --bg-card:       var(--agere-blanco);
  --text-primary:  var(--agere-marino);
  --text-secondary:var(--agere-pizarra);
  --text-tertiary: var(--agere-grafito);
  --accent:        var(--agere-pizarra);
  --accent-hover:  var(--agere-marino);
  --accent-subtle: rgba(61,95,154,0.08);
  --accent-glow:   rgba(61,95,154,0.12);
  --accent-btn:    var(--agere-marino);
  --border:        rgba(26,52,104,0.08);
  --border-strong: rgba(26,52,104,0.18);
}

/* ── Body base ───────────────────────────────────────────── */
body {
  background: var(--agere-humo) !important;
  color: var(--agere-marino) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--agere-marino) !important;
  letter-spacing: -0.02em;
}

/* ── Nav logo ────────────────────────────────────────────── */
.nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  color: var(--agere-marino) !important;
  letter-spacing: -0.03em !important;
  font-size: 1.15rem !important;
}
.nav-logo:hover { color: var(--agere-pizarra) !important; }

/* ── Nav links ───────────────────────────────────────────── */
.nav-link, .nav-links a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--agere-grafito) !important;
}
.nav-link:hover, .nav-link.active,
.nav-links a:hover, .nav-links a.active {
  color: var(--agere-marino) !important;
}

/* ── Nav scrolled state ──────────────────────────────────── */
#main-nav.scrolled {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom-color: rgba(26,52,104,0.07) !important;
  box-shadow: 0 2px 40px rgba(26,52,104,0.07) !important;
}

/* ── Back to agere link ──────────────────────────────────── */
.nav-back-link {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--agere-grafito) !important;
  text-decoration: none !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-right: 16px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(26,52,104,0.2) !important;
  border-radius: 2px !important;
  transition: color 0.2s, border-color 0.2s !important;
  white-space: nowrap !important;
}
.nav-back-link:hover {
  color: var(--agere-marino) !important;
  border-color: rgba(26,52,104,0.45) !important;
}

/* ── Accent / CTA buttons ────────────────────────────────── */
.btn-primary, .btn, button[class*="primary"], a[class*="btn-primary"],
.cta-btn, .hero-cta, .action-btn {
  background: var(--agere-marino) !important;
  border-color: var(--agere-marino) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 2px !important;
}
.btn-primary:hover, .btn:hover, .cta-btn:hover {
  background: var(--agere-pizarra) !important;
  border-color: var(--agere-pizarra) !important;
}

/* ── Accent color overrides ──────────────────────────────── */
.accent, .text-accent, [class*="accent-text"] {
  color: var(--agere-pizarra) !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card, [class*="-card"], .resource-card, .case-card {
  background: var(--agere-blanco) !important;
  border-color: rgba(26,52,104,0.08) !important;
  border-radius: 4px !important;
}
.card:hover, [class*="-card"]:hover {
  border-color: rgba(26,52,104,0.2) !important;
  box-shadow: 0 4px 24px rgba(26,52,104,0.08) !important;
}

/* ── Tags / badges ───────────────────────────────────────── */
.tag, .badge, [class*="-tag"], [class*="-badge"] {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--agere-niebla) !important;
  color: var(--agere-pizarra) !important;
  border: 1px solid rgba(61,95,154,0.15) !important;
  border-radius: 2px !important;
}

/* ── Footer ──────────────────────────────────────────────── */
footer, #main-footer, .site-footer {
  background: var(--agere-niebla) !important;
  border-top: 1px solid rgba(26,52,104,0.08) !important;
  color: var(--agere-grafito) !important;
}
footer a, #main-footer a, .site-footer a {
  color: var(--agere-pizarra) !important;
}
footer a:hover, #main-footer a:hover {
  color: var(--agere-marino) !important;
}

/* ── Mono / code blocks ──────────────────────────────────── */
code, pre, .mono, [class*="mono"], [class*="prompt"],
.prompt-box, .code-block {
  font-family: 'IBM Plex Mono', monospace !important;
  background: var(--agere-niebla) !important;
  color: var(--agere-marino) !important;
  border: 1px solid rgba(26,52,104,0.1) !important;
  border-radius: 4px !important;
}

/* ── Search input ────────────────────────────────────────── */
input[type="search"], input[type="text"], .search-input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-color: rgba(26,52,104,0.18) !important;
  border-radius: 2px !important;
}
input:focus, .search-input:focus {
  border-color: var(--agere-pizarra) !important;
  box-shadow: 0 0 0 3px rgba(61,95,154,0.12) !important;
  outline: none !important;
}

/* ── Section backgrounds ─────────────────────────────────── */
section, .section {
  background: var(--agere-humo);
}
section:nth-child(even), .section-alt {
  background: var(--agere-blanco);
}

/* ── Remove grid/dot background pattern ─────────────────── */
body,
body::before,
body::after,
.bg-grid,
[class*="bg-grid"],
[class*="grid-bg"],
[class*="dot-bg"],
[class*="pattern"] {
  background-image: none !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--agere-niebla); }
::-webkit-scrollbar-thumb { background: var(--agere-cielo); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--agere-pizarra); }

/* ── Dark mode toggle — hide it ─────────────────────────── */
.theme-toggle, #theme-toggle, [class*="theme-toggle"],
[class*="dark-mode"], [id*="dark-mode"] {
  display: none !important;
}