/* Tokens de diseño — PHN Cápsulas Colombia (fábrica de cápsulas duras).
   Diseño por defecto: el de Farmacápsulas (pedido de Aron, 2026-10-02), con sus colores exactos muestreados de su
   sitio: azul #284E8B, cian #4AC4D6, footer #001D3F, botón de boletín #4184EE. El verde PHN queda como tema "bosque".
   El porqué vive en DESIGN.md. */
:root {
  /* Marca (azul Farmacápsulas) */
  --leaf: #4AC4D6;           /* cian: resaltes, puntos del mapa, acentos */
  --leaf-mid: #7FD3E0;
  --leaf-light: #B3E5FC;
  --leaf-wash: #E8F7FB;
  --forest: #284E8B;         /* azul de marca: bandas, iconos, títulos de acento */
  --forest-hover: #213F72;
  --forest-deep: #1B355F;
  --leaf-text: #284E8B;      /* texto de acento sobre blanco */

  /* Roles (lo que cambia entre temas) */
  --hl: #4AC4D6;             /* resaltes: eyebrows, palabra destacada del título */
  --btn-bg: #4AC4D6;         /* botón principal (como "Enviar" de Farmacápsulas) */
  --btn-hover: #36B2C5;
  --btn-ink: #FFFFFF;
  --topbar-bg: #284E8B;
  --nav-link: #284E8B;
  --footer-bg: #001D3F;
  --footer-band: #284E8B;    /* banda del boletín dentro del footer */
  --footer-btn: #4184EE;

  /* Neutros */
  --ink: #0F1A2B;
  --muted: #55606E;
  --line: #E1E6EC;
  --bg: #FFFFFF;
  --bg-soft: #F4F7FA;
  --on-dark: #E6EEF7;
  --on-dark-muted: #A9B8CC;

  /* Tipografía: títulos geométricos y minimalistas (referencia GS Capsule), texto legible */
  --font-title: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-brand: 'Zen Dots', 'Sora', system-ui, sans-serif;
  --fs-hero: clamp(38px, 5.4vw, 66px);
  --fs-h2: clamp(28px, 3.4vw, 42px);
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --tracking-title: -0.025em;

  /* Espaciado y forma */
  --wrap: 1200px;
  --gutter: 24px;
  --section: 96px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px rgba(15, 26, 43, 0.08);
  --shadow-soft: 0 6px 18px rgba(15, 26, 43, 0.06);
  --nav-h: 72px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* Temas alternos (selector "Color"): cambian marca y roles; neutros, tipografía y espaciado quedan iguales.
   Los roles por defecto de cada tema salen de su forest/leaf. */
:root[data-theme] {
  --hl: var(--leaf-text); --btn-bg: var(--forest); --btn-hover: var(--forest-hover); --btn-ink: #FFFFFF;
  --topbar-bg: var(--forest-deep); --nav-link: var(--muted); --footer-bg: var(--forest-deep);
  --footer-band: var(--forest); --footer-btn: var(--leaf);
}
:root[data-theme="bosque"] {
  /* Verde PHN original: verde bosque + los tres verdes del logo */
  --leaf: #80BA26; --leaf-mid: #9FC755; --leaf-light: #BAD684; --leaf-wash: #EEF5E1;
  --forest: #1E4D32; --forest-hover: #173D27; --forest-deep: #123224; --leaf-text: #2F6B2F;
  --ink: #0F1F17; --muted: #55625A; --line: #E3E8E2; --bg-soft: #F5F7F3; --on-dark: #EAF3DC; --on-dark-muted: #A9BCA9;
}
:root[data-theme="esmeralda"] {
  --leaf: #34C38F; --leaf-mid: #5FD3A8; --leaf-light: #A5E6CC; --leaf-wash: #E7F7F0;
  --forest: #0B5D4B; --forest-hover: #084A3C; --forest-deep: #073B30; --leaf-text: #0B6B53;
}
:root[data-theme="oliva"] {
  --leaf: #A6C23A; --leaf-mid: #BCD268; --leaf-light: #D6E3A0; --leaf-wash: #F3F6E3;
  --forest: #45561C; --forest-hover: #374516; --forest-deep: #2A3510; --leaf-text: #4F6320;
}
:root[data-theme="petroleo"] {
  --leaf: #2BB3B1; --leaf-mid: #5CC7C5; --leaf-light: #9ADCDB; --leaf-wash: #E5F6F6;
  --forest: #0E4F5C; --forest-hover: #0A3F4A; --forest-deep: #0A3540; --leaf-text: #0E6470;
}
:root[data-theme="marino"] {
  /* Azul marino de confianza + el verde PHN original como acento */
  --leaf: #80BA26; --leaf-mid: #9FC755; --leaf-light: #BAD684; --leaf-wash: #EEF5E1;
  --forest: #12335A; --forest-hover: #0D2745; --forest-deep: #0C2238; --leaf-text: #2F6B2F;
}

@media (max-width: 720px) {
  :root { --section: 64px; --gutter: 16px; }
}