/* ============================================================
   Gobernabilidad — Design Tokens (GENAI AREDEZ)
   Identidad "enterprise serene". Fuente: GOB-VISUAL-001.
   Tipografía sobre casi-papel; paleta deliberadamente pequeña.
   ============================================================ */

:root {
  /* --- Color: fundamentos --- */
  --paper: #FAFAF7;        /* fondo por defecto: casi-blanco, calidez leve */
  --ink: #1A1A1A;          /* texto: casi-negro (no negro puro) */
  --ink-muted: #4A4A4A;    /* texto secundario, leyendas, metadatos */
  --rule: #E5E5E0;         /* filetes, separadores, bordes de un pelo */

  /* --- Color: acento único (uso parco) --- */
  --accent: #1F3A5F;       /* azul-tinta profundo: enlaces, hover CTA, foco */

  /* --- Color: inversa (secciones oscuras puntuales) --- */
  --paper-inverse: #0F0F0F;
  --ink-inverse: #F0F0EC;
  --ink-inverse-muted: #A8A8A8;

  /* --- Color: estados (solo formularios) --- */
  --state-error: #A03030;
  --state-success: #2A6F47;

  /* --- Color: bloque de código --- */
  --code-bg: #F5F5F0;

  /* --- Tipografía --- */
  --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* --- Escala tipográfica (razón modular 1.250) --- */
  --fs-display: clamp(3rem, 7vw, 5.5rem);  /* hero: presencia dramática (sobrio pero vivo) */
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-mono: 0.9375rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* --- Espaciado (base 8px) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  /* --- Contenedores --- */
  --w-prose: 42rem;    /* ~672px: prosa a una columna */
  --w-wide: 64rem;     /* ~1024px: tablas, bloques anchos */
  --w-page: 80rem;     /* ~1280px: contenedor de página */

  --radius: 4px;       /* botones, código (ligero, no pill) */

  /* --- Movimiento (presupuesto mínimo) --- */
  --t-fast: 100ms;
  --t-cta: 150ms;
}

/* Longitud de línea legible para prosa */
.prose { max-width: var(--w-prose); }

/* Regla de cita: filete a la izquierda + sangría (una sola variante) */
blockquote {
  border-left: 2px solid var(--rule);
  padding-left: var(--space-3);
  color: var(--ink-muted);
}

/* CTA primario: sólido tinta, sin sombra/glow/degradado */
.cta-primary {
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  transition: background var(--t-cta) ease;
}
.cta-primary:hover { background: var(--accent); }
.cta-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }