/* CONSADA Brand Kit — design-system.css — v1 — NEW 2026-09-07
 *
 * Shared CONTENT design language (typography, cards, badges, links) — distinct from
 * tokens.css (raw palette + component-specific chrome tokens for header/footer) and from
 * header.js/footer.js (the chrome itself). This file is for the page CONTENT inside your
 * own app — the part AI-074's Shadow DOM components deliberately don't reach.
 *
 * WHY THIS EXISTS: GMS/RRMS/EMS/LMS content styling was never defined/signed off (still
 * draft as of 2026-09-07). SITE's own content L&F IS signed off. Rather than each app
 * inventing and later reconciling its own system, apps build content against this file
 * directly. GMS-Admin's current content styling (Space Grotesk/IBM Plex Mono, its own
 * --ink/--pool palette) predates this decision and should be treated as draft-to-replace,
 * not a second system to keep in parallel.
 *
 * REQUIRES (this file cannot provide these itself — CSS can't inject <script>/<link>):
 *   1. tokens.css loaded FIRST (defines the --consada-surface-*/--consada-text-* variables
 *      this file's classes read, plus the base brand palette).
 *   2. Manrope + Inter loaded. header.js/footer.js self-inject these once instantiated —
 *      if your page doesn't always render a <consada-header>/<consada-footer>, add the
 *      Google Fonts link yourself:
 *        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 *   3. The theme-init inline <head> script from theme-persistence-handoff-v1.md, or your
 *      page will flash light-then-dark (or vice versa) on load, same as SITE's own pages
 *      without it.
 *
 * INTEGRATION:
 *   <link rel="stylesheet" href="https://brand.consada.org/v1/tokens.css">
 *   <link rel="stylesheet" href="https://brand.consada.org/v1/design-system.css">
 *
 * This is a first cut covering the patterns already in production use on SITE
 * (quienes-somos/oficinas/comites/comisiones-style content pages). Expect to add more
 * classes as GMS/RRMS/EMS/LMS teams hit patterns this doesn't cover yet — additive,
 * non-breaking additions are the expectation, not a redesign each time.
 */

.consada-page{
  font-family: 'Inter', sans-serif;
  background: var(--consada-surface-1, #fff);
  color: var(--consada-text-primary, var(--ink, #181C20));
  transition: background .3s, color .3s;
}

.consada-display{ font-family: 'Manrope', sans-serif; }

.consada-eyebrow{
  color: var(--aqua, #3FC4AE);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
}

.consada-subtle{ color: var(--consada-text-secondary, var(--gray-600, #6B7580)); }

.consada-card{
  background: var(--consada-surface-2, var(--gray-100, #F5F7F9));
  border: 1px solid var(--consada-content-border, rgba(0,0,0,.08));
  border-radius: 1rem;
  padding: 1.75rem;
  color: var(--consada-text-primary, var(--ink, #181C20));
}

.consada-badge{
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .125rem .625rem;
  border-radius: 9999px;
  background: var(--blue-mid, #2685CC);
  color: #fff;
}

.consada-link-accent{
  color: var(--aqua, #3FC4AE);
  font-weight: 700;
  text-decoration: none;
}
.consada-link-accent:hover{ text-decoration: underline; }

.consada-btn-primary{
  display: inline-block;
  background: var(--aqua, #3FC4AE);
  color: #04231d;
  font-weight: 700;
  font-size: .875rem;
  padding: .5rem 1.25rem;
  border-radius: .5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.consada-btn-primary:disabled{ opacity: .6; cursor: default; }

.consada-hairline{ border-top: 1px solid var(--consada-content-border, rgba(0,0,0,.08)); }

/* NEW 2026-09-07 — shared content-area wrapper, matching the same max-width/padding
   rhythm header.js/footer.js already use internally (1680px / 40px), so the "body"
   region lines up with the chrome above/below it consistently across every Solution. */
.consada-shell{
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 1024px){ .consada-shell{ padding: 0 20px; } }

/* NEW 2026-09-07 — systems switcher (see systems-switcher.js). Slotted into a
   <consada-header variant="app">'s nav-extra — renders in light DOM, so these rules
   apply directly (no Shadow DOM boundary to cross). */
.consada-switcher{ position: relative; display: inline-block; font-size: 14px; }
.consada-switcher-trigger{
  background: transparent; border: none; font: inherit; font-weight: 700;
  color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px;
}
.consada-switcher-panel{
  position: absolute; top: 100%; left: 0; margin-top: 8px; display: none; min-width: 180px;
  border-radius: .75rem; overflow: hidden; background: var(--consada-surface-2, #fff);
  border: 1px solid var(--consada-content-border, rgba(0,0,0,.1));
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); z-index: 50;
}
.consada-switcher-panel.open{ display: block; }
.consada-switcher-panel a{
  display: block; padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--consada-text-primary, inherit); text-decoration: none;
}
.consada-switcher-panel a:hover{ background: var(--consada-surface-1, rgba(0,0,0,.04)); }
