/* JCastorena · tokens del design system · v2 · 2026-09-25
   Fuente de verdad de los valores visuales de la marca, para la web y para los documentos.
   La base —seis colores, IBM Plex Sans, unidad de 8 px e interlineado 1.5— es la del sistema
   Esencial que Juan Carlos validó el 2026-09-25 (v1 de este archivo, paquete de Codex). Lo demás
   son derivados técnicos con el contraste medido al lado; no son colores nuevos de marca.
   Reglas, componentes y límites: Projects/relanzamiento-jccg/design-system-jccg.md.
   Un cambio en la paleta de marca es una decisión de Juan Carlos, no un ajuste de código. */

:root {
  /* ── Paleta de marca (validada) ─────────────────────────────────────────────── */
  --jc-grafito: #20272D;
  --jc-petroleo: #315B68;
  --jc-cobre: #C88732;
  --jc-acero: #7D8991;
  --jc-mineral: #ECEAE4;
  --jc-blanco: #F8F8F5;

  /* ── Derivados técnicos (contraste medido, luminancia relativa sRGB) ──────── */
  --jc-petroleo-oscuro: #2B4953;          /* hover del botón principal · blanco encima 9.05:1 */
  --jc-petroleo-claro: #E0E5E4;           /* fondo informativo · grafito 11.87:1 · petróleo 5.84:1 */
  --jc-cobre-claro: #D3A05D;              /* hover del botón de acento · grafito encima 6.45:1 */
  --jc-cobre-tenue: #F0E6D6;              /* fondo de advertencia · grafito 12.23:1 */
  --jc-acero-oscuro: #6C777F;             /* borde de controles · 4.31:1 sobre blanco · 3.81:1 sobre mineral */
  --jc-linea: #D8D6D2;                    /* separador decorativo · no identifica controles */
  --jc-texto-secundario: #4A535A;         /* 7.38:1 sobre blanco · 6.52:1 sobre mineral */
  --jc-texto-secundario-oscuro: #D3D7D7;  /* 10.41:1 sobre grafito · 5.12:1 sobre petróleo */

  /* ── Funcionales: solo estados de formulario y avisos, nunca decoración ───── */
  --jc-error: #A33B2B;                    /* 6.13:1 sobre blanco · blanco encima 6.13:1 */
  --jc-error-tenue: #EEE1DD;              /* error encima 5.11:1 · grafito 11.84:1 */

  /* ── Roles semánticos: los componentes usan estos, no los hex ─────────────── */
  --jc-color-fondo: var(--jc-blanco);
  --jc-color-superficie: var(--jc-mineral);
  --jc-color-texto: var(--jc-grafito);
  --jc-color-texto-secundario: var(--jc-texto-secundario);
  --jc-color-enlace: var(--jc-petroleo);
  --jc-color-enlace-hover: var(--jc-grafito);
  --jc-color-accion: var(--jc-petroleo);
  --jc-color-accion-hover: var(--jc-petroleo-oscuro);
  --jc-color-acento: var(--jc-cobre);
  --jc-color-acento-hover: var(--jc-cobre-claro);
  --jc-color-borde-control: var(--jc-acero-oscuro);
  --jc-color-separador: var(--jc-linea);
  --jc-color-foco: var(--jc-petroleo);
  --jc-color-foco-sobre-oscuro: var(--jc-cobre);
  --jc-color-fondo-oscuro: var(--jc-grafito);
  --jc-color-texto-sobre-oscuro: var(--jc-blanco);
  --jc-color-info-fondo: var(--jc-petroleo-claro);
  --jc-color-advertencia-fondo: var(--jc-cobre-tenue);
  --jc-color-error: var(--jc-error);
  --jc-color-error-fondo: var(--jc-error-tenue);

  /* ── Tipografía: una sola familia ─────────────────────────────────────────── */
  --jc-font: "IBM Plex Sans", Arial, sans-serif;
  --jc-peso-regular: 400;
  --jc-peso-medio: 500;
  --jc-peso-semibold: 600;
  --jc-tracking-logo: -0.05em;
  --jc-tracking-titulo: -0.025em;
  --jc-tracking-rotulo: 0.08em;
  --jc-body-leading: 1.5;
  --jc-interlineado-titulo: 1.15;
  --jc-interlineado-subtitulo: 1.25;
  --jc-interlineado-chico: 1.45;
  /* Escala de pantalla, fluida entre 360 y 1280 px de ancho */
  /* 2026-10-23, auditoría de diseño: dos pasos de exhibición para la portada y los títulos de sección de
     Inicio y de las bandas de cierre. Misma familia, mismo peso medio; no tocan h1, h2 ni h3. */
  --jc-t-display: clamp(2.5rem, 1.75rem + 3.333vw, 4.5rem);     /* 40 → 72 px */
  --jc-t-h2-seccion: clamp(1.75rem, 1.4rem + 1.556vw, 2.625rem); /* 28 → 42 px */
  --jc-tracking-display: -0.03em;
  --jc-t-h1: clamp(2.25rem, 1.957rem + 1.304vw, 3rem);          /* 36 → 48 px */
  --jc-t-h2: clamp(1.75rem, 1.652rem + 0.4348vw, 2rem);         /* 28 → 32 px */
  --jc-t-h3: clamp(1.375rem, 1.326rem + 0.2174vw, 1.5rem);      /* 22 → 24 px */
  --jc-t-h4: 1.25rem;                                           /* 20 px */
  --jc-t-grande: clamp(1.125rem, 1.076rem + 0.2174vw, 1.25rem); /* 18 → 20 px */
  --jc-t-base: clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem); /* 17 → 18 px */
  --jc-t-chico: 0.9375rem;                                      /* 15 px */
  --jc-t-rotulo: 0.8125rem;                                     /* 13 px, mayúsculas */
  --jc-medida: 68ch;                                            /* ancho máximo de un párrafo */

  /* ── Espacio: múltiplos de la unidad de 8 px ──────────────────────────────── */
  --jc-space-unit: 8px;
  --jc-espacio-1: 0.25rem;  /*   4 px, medio paso, solo dentro de componentes */
  --jc-espacio-2: 0.5rem;   /*   8 px */
  --jc-espacio-3: 0.75rem;  /*  12 px */
  --jc-espacio-4: 1rem;     /*  16 px */
  --jc-espacio-5: 1.5rem;   /*  24 px */
  --jc-espacio-6: 2rem;     /*  32 px */
  --jc-espacio-7: 3rem;     /*  48 px */
  --jc-espacio-8: 4rem;     /*  64 px */
  --jc-espacio-9: 6rem;     /*  96 px, entre secciones en escritorio */
  --jc-espacio-10: 8rem;    /* 128 px */

  /* ── Retícula. Cortes: 30rem (480), 48rem (768), 64rem (1024), 80rem (1280) ── */
  --jc-contenedor: 75rem;                                      /* 1200 px */
  --jc-contenedor-texto: 45rem;                                /*  720 px, artículos */
  --jc-medianil: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);    /* 16 → 24 px */

  /* ── Forma ─────────────────────────────────────────────────────────────────── */
  --jc-radio-s: 2px;        /* botones, campos, etiquetas */
  --jc-radio-m: 4px;        /* tarjetas y avisos */
  --jc-radio-l: 8px;        /* imágenes y diálogos */
  --jc-borde: 1px;
  --jc-borde-foco: 2px;
  --jc-desfase-foco: 2px;
  --jc-alto-control: 3rem;         /* 48 px: botones y campos */
  --jc-alto-control-chico: 2.5rem; /* 40 px: solo en barras densas */
  --jc-sombra-1: 0 1px 2px rgb(32 39 45 / 0.08);
  --jc-sombra-2: 0 12px 32px rgb(32 39 45 / 0.14);   /* menús y diálogos, nada más */

  /* ── Movimiento: breve y sin rebote ───────────────────────────────────────── */
  --jc-duracion-corta: 120ms;
  --jc-duracion: 200ms;
  --jc-curva: cubic-bezier(0.2, 0, 0, 1);

  /* ── Capas ─────────────────────────────────────────────────────────────────── */
  --jc-z-cabecera: 100;
  --jc-z-menu: 200;
  --jc-z-aviso: 300;
  --jc-z-dialogo: 400;

  /* ── Datos y diagramas ─────────────────────────────────────────────────────── */
  --jc-dato-1: var(--jc-petroleo);
  --jc-dato-2: var(--jc-grafito);
  --jc-dato-3: var(--jc-acero);
  --jc-dato-destacado: var(--jc-cobre);   /* una sola cosa por gráfica */
  --jc-dato-eje: var(--jc-acero-oscuro);
  --jc-dato-rejilla: var(--jc-linea);
  --jc-dato-secuencia-70: #6D8A92;        /* petróleo al 70 % sobre blanco · 3.46:1 */
  --jc-dato-secuencia-45: #9EB1B6;        /* petróleo al 45 % · solo áreas con contorno */
  --jc-dato-secuencia-25: #C6D1D2;        /* petróleo al 25 % · solo rangos de fondo */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --jc-duracion-corta: 0ms;
    --jc-duracion: 0ms;
  }
}