/* ==========================================================================
   Sistema de diseño · Cowork V21
   Tokens de color, tipografía, forma y elevación.

   Cómo se usa
   1. Escalas cromáticas: cada color de marca tiene cinco niveles
        -claro     fondos muy suaves y superficies de baja intensidad
        -suave     contenedores, tarjetas, bordes de acento y elementos secundarios
        (base)     el color original de la paleta
        -profundo  estados activos, hover, elementos destacados y texto de marca
        -oscuro    detalles de máxima intensidad y profundidad
   2. Tokens semánticos (--superficie-*, --texto-*, --borde-*, --accion-*):
      son los que deben usar los componentes. Si hay que ajustar la marca,
      se cambia aquí y se propaga a todo el sitio.
   3. Criterio: el Verde Petróleo es el hilo conductor. Celeste complementa.
      Lima y amarillo son acentos puntuales. Fondos blancos y gris claro.

   Contraste (WCAG 2.1 AA) verificado:
   · Blanco sobre petróleo base 5.2:1 · sobre petróleo profundo 7.4:1
   · Grafito sobre lima, amarillo y celeste base > 5.8:1
   · --texto-secundario > 4.5:1 sobre blanco, gris claro y todos los -claro
   · Celeste base sobre blanco = 3:1: solo en titulares grandes o decoración;
     para texto usar --celeste-profundo (4.65:1).
   ========================================================================== */

:root {
  /* --- Escalas cromáticas ------------------------------------------------- */

  /* Verde Petróleo · principal de marca (la base no se modifica) */
  --petroleo-claro: #e6f4f4;
  --petroleo-suave: #b6dadc;
  --petroleo: #007a7b;
  --petroleo-profundo: #005f66;
  --petroleo-oscuro: #003f47;

  /* Celeste · secundario, complemento */
  --celeste-claro: #e7f5fa;
  --celeste-suave: #b7e3ef;
  --celeste: #17a2c4;
  --celeste-profundo: #0d7f9a;
  --celeste-oscuro: #0b5b6f;

  /* Verde Lima · complementario, acento puntual */
  --lima-claro: #eaf7e0;
  --lima-suave: #cde8a9;
  --lima: #92c24a;
  --lima-profundo: #6da93a;
  --lima-oscuro: #4e7f2a;

  /* Amarillo · acento puntual */
  --amarillo-claro: #fff8e1;
  --amarillo-suave: #f9e091;
  --amarillo: #f4c21c;
  --amarillo-profundo: #d9a515;
  --amarillo-oscuro: #b68910;

  /* Neutros */
  --grafito: #1a1a1a;
  --gris: #6c7480;
  --gris-claro: #f5f7f7;
  --gris-suave: #e2e7e8;     /* líneas y divisores */
  --gris-medio: #8c949e;     /* bordes de controles: 3:1 sobre blanco */
  --gris-profundo: #525a65;  /* texto secundario accesible */
  --blanco: #ffffff;

  /* --- Tokens semánticos ------------------------------------------------- */

  /* Superficies */
  --superficie: var(--blanco);
  --superficie-pagina: var(--gris-claro);
  --superficie-marca: var(--petroleo-claro);
  --superficie-marca-intensa: var(--petroleo);
  --superficie-profunda: var(--petroleo-oscuro);

  /* Texto */
  --texto: var(--grafito);
  --texto-secundario: var(--gris-profundo);
  --texto-auxiliar: var(--gris);        /* solo sobre blanco */
  --texto-marca: var(--petroleo-profundo);
  --texto-invertido: var(--blanco);

  /* Bordes */
  --borde: var(--gris-suave);
  --borde-control: var(--gris-medio);
  --borde-marca: var(--petroleo-suave);

  /* Acción principal (botones, selección, elementos activos) */
  --accion: var(--petroleo);
  --accion-hover: var(--petroleo-profundo);
  --accion-activa: var(--petroleo-oscuro);
  --accion-tenue: var(--petroleo-claro);
  --accion-texto: var(--blanco);
  --deshabilitado-fondo: var(--gris-suave);
  --deshabilitado-texto: var(--gris);

  /* Foco: anillo petróleo sobre fondos claros, amarillo sobre fondos de marca */
  --foco: var(--petroleo);
  --foco-sobre-oscuro: var(--amarillo);
  --foco-anillo: 0 0 0 4px rgba(0, 122, 123, 0.18);

  /* Estados de formulario (la marca no usa rojo: error en amarillo + grafito) */
  --estado-ok: var(--lima-oscuro);
  --estado-ok-fondo: var(--lima-claro);
  --estado-error-fondo: var(--amarillo-claro);
  --estado-error-borde: var(--amarillo-profundo);

  /* Texto sobre superficies de marca intensas */
  --texto-invertido-suave: rgba(255, 255, 255, 0.94);  /* ≥ 4.5:1 sobre petróleo */
  --linea-invertida: rgba(255, 255, 255, 0.18);
  --borde-invertido: rgba(255, 255, 255, 0.55);
  --superficie-invertida-hover: rgba(255, 255, 255, 0.12);
  --superficie-invertida-activa: rgba(255, 255, 255, 0.2);

  /* --- Tipografía ------------------------------------------------------- */
  --fuente-titulo: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Mulish", "Avenir", "Segoe UI", system-ui, sans-serif;

  --t-micro: 0.75rem;                                 /* 12px */
  --t-chico: 0.875rem;                                /* 14px */
  --t-cuerpo: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); /* 16-17px */
  --t-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  --t-h1: clamp(2.125rem, 1.15rem + 2.8vw, 5rem);
  --t-gigante: clamp(3rem, 1.5rem + 7.2vw, 9.5rem);

  /* --- Espacio y forma --------------------------------------------------- */
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
  --ancho: 1280px;
  --seccion: clamp(3.5rem, 2.4rem + 5vw, 7.5rem);
  --radio-s: 12px;
  --radio-m: 16px;
  --radio-l: 24px;
  --radio-seccion: clamp(24px, 3vw, 44px);

  /* --- Elevación: sombras muy ligeras, teñidas con petróleo oscuro ------- */
  --sombra-suave: 0 1px 2px rgba(0, 63, 71, 0.05), 0 6px 18px -12px rgba(0, 63, 71, 0.18);
  --sombra: 0 1px 2px rgba(0, 63, 71, 0.05), 0 14px 32px -20px rgba(0, 63, 71, 0.24);
  --sombra-elevada: 0 2px 4px rgba(0, 63, 71, 0.05), 0 20px 40px -24px rgba(0, 63, 71, 0.3);
  --sombra-sobre-marca: 0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 36px -22px rgba(0, 0, 0, 0.5);
  --velo: rgba(0, 63, 71, 0.55);   /* fondo de diálogos */

  --alto-header: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Pantallas muy grandes: la página crece con el monitor en vez de quedar
   como una columna perdida al centro. */
@media (min-width: 1920px) {
  :root { --ancho: 1560px; }
}

@media (min-width: 2560px) {
  :root { --ancho: 2040px; }
}