/* ==========================================================================
   Cooperación Bolivia — Design Tokens
   Variables globales del sistema de diseño. Pensado para heredarse tal cual
   en un tema de WordPress (una sola fuente de verdad para toda la identidad).
   ========================================================================== */

:root {
  /* ---- Colores de marca ---- */
  --cb-primary: #298CC7;        /* Azul institucional */
  --cb-primary-700: #1f6f9e;    /* Hover / estados activos */
  --cb-primary-050: #e8f3fa;    /* Fondos suaves */
  --cb-secondary: #1DADDA;      /* Azul claro */
  --cb-secondary-700: #1690b5;
  --cb-secondary-050: #e5f7fc;

  /* ---- Neutros ---- */
  --cb-white: #FFFFFF;
  --cb-ink: #2b2b2b;            /* Texto principal (oscurecido para mejor contraste en pantalla) */
  --cb-ink-soft: #45484b;       /* Texto de párrafo cuando se busca algo más suave que --cb-ink */
  --cb-muted: #6f7276;          /* Texto secundario (más oscuro que el #9B9B9B original para legibilidad) */
  --cb-muted-soft: #9B9B9B;     /* Gris medio original: para microcopy y detalles muy secundarios */
  --cb-line: #e7ebee;           /* Bordes / divisores */
  --cb-surface: #f6f9fb;        /* Fondo de secciones alternas */
  --cb-surface-2: #eef3f7;

  /* ---- Complementarios (uso puntual, NUNCA compiten con la identidad) ---- */
  --cb-red: #D40000;            /* Alertas / destacados */
  --cb-yellow: #F7CA34;         /* Informativo */
  --cb-green: #07B466;          /* Confirmaciones / éxito */
  --cb-wa: #25D366;             /* Verde WhatsApp (canal) */
  --cb-wa-700: #1da851;

  /* ---- Color por CAPACIDAD (solo para elementos de énfasis) ----
     Deriva de la paleta del isotipo. Se usa en íconos, chips y acentos de CTA,
     NUNCA invadiendo el diseño general (dominado por los azules institucionales). */
  --cb-cap-gobernanza: #1DADDA;        /* azul claro  */
  --cb-cap-gobernanza-050: #e5f7fc;
  --cb-cap-direccion: #298CC7;         /* azul oscuro/institucional */
  --cb-cap-direccion-050: #e8f3fa;
  --cb-cap-comunicacion: #F7CA34;      /* amarillo */
  --cb-cap-comunicacion-050: #fdf6dd;
  --cb-cap-comunicacion-ink: #8a6d10;  /* texto legible sobre fondo claro amarillo */
  --cb-cap-digital: #07B466;           /* verde */
  --cb-cap-digital-050: #dcf6ea;
  --cb-cap-digital-ink: #06704a;

  /* ---- Gradientes de marca ---- */
  --cb-grad-brand: linear-gradient(120deg, var(--cb-primary) 0%, var(--cb-secondary) 100%);
  --cb-grad-soft: linear-gradient(180deg, var(--cb-secondary-050) 0%, var(--cb-white) 100%);

  /* ---- Tipografía ---- */
  --cb-font-head: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica fluida (clamp: móvil → escritorio) */
  --cb-fs-xs: 0.8rem;
  --cb-fs-sm: 0.9rem;
  --cb-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --cb-fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --cb-fs-xl: clamp(1.35rem, 1.2rem + 0.8vw, 1.6rem);
  --cb-fs-h3: clamp(1.3rem, 1.15rem + 0.9vw, 1.75rem);
  --cb-fs-h2: clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
  --cb-fs-h1: clamp(2.1rem, 1.5rem + 3vw, 3.75rem);
  --cb-fs-display: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);

  --cb-lh-tight: 1.15;
  --cb-lh-snug: 1.3;
  --cb-lh-normal: 1.65;

  /* ---- Espaciado (escala 4px) ---- */
  --cb-sp-1: 0.25rem;
  --cb-sp-2: 0.5rem;
  --cb-sp-3: 0.75rem;
  --cb-sp-4: 1rem;
  --cb-sp-5: 1.5rem;
  --cb-sp-6: 2rem;
  --cb-sp-7: 3rem;
  --cb-sp-8: 4rem;
  --cb-sp-9: 6rem;
  --cb-sp-10: 8rem;

  /* ---- Layout ---- */
  --cb-container: 1180px;
  --cb-container-narrow: 820px;
  --cb-gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* ---- Radios ---- */
  --cb-radius-sm: 8px;
  --cb-radius: 14px;
  --cb-radius-lg: 22px;
  --cb-radius-pill: 999px;

  /* ---- Sombras (suaves, con tinte azul de marca para cohesión) ---- */
  --cb-shadow-sm: 0 2px 8px rgba(40, 90, 130, 0.06);
  --cb-shadow: 0 10px 30px rgba(40, 90, 130, 0.10);
  --cb-shadow-lg: 0 24px 60px rgba(40, 90, 130, 0.16);
  --cb-shadow-brand: 0 14px 34px rgba(41, 140, 199, 0.28);

  /* ---- Animación ---- */
  --cb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cb-dur-fast: 180ms;
  --cb-dur: 320ms;
  --cb-dur-slow: 620ms;

  /* ---- Capas ---- */
  --cb-z-header: 100;
  --cb-z-overlay: 200;
  --cb-z-modal: 300;
}