/* Tokens del sitio público de Punto a Punto. Ningún color se escribe a mano fuera de este archivo.
   La paleta cruda (bloque 1) es IDÉNTICA a la de intranet/dist/assets/css/tokens.css: una prueba lo exige.
   Contraste AA anotado y verificado por compartido/tests/marca.test.js. */

:root {
  /* ── 1. Paleta cruda · Punto a Punto (homogenizada con puntoapunto.com.py, aprobada 2026-10-24) ── */
  --black:#000000; --white:#FFFFFF;
  --charcoal:#333333;
  --slate:#212529;
  --graphite:#4D4D4D;
  --steel:#8C8C8C;
  --silver:#717171;
  --pearl:#CED4DA;
  --pearl-light:#E9ECEF;
  --pearl-tint:#F8F9FA;
  --naranja:#F16821;
  --naranja-hondo:#C24E0E;
  --naranja-oscuro:#A9440E;
  --naranja-suave:#FDEEE6;
  --logo-naranja:#EB7A01; --logo-ambar:#F7B300;

  /* Solo del sitio: el extremo claro de las bandas, el éxito del buscador y el modo oscuro. */
  --naranja-banda-fin:#C65216;   /* blanco encima 4,55:1 */
  --verde-exito:#2E7D32;         /* 5,13:1 sobre blanco */
  --verde-exito-claro:#81C784;   /* 8,84:1 sobre --noche-900 */
  --noche-900:#16181B;
  --noche-800:#1E2125;
  --noche-700:#25292E;
  --noche-600:#343A40;
  --noche-acento:#2B1C12;
  --niebla-100:#F1F3F5;
  --niebla-400:#ADB5BD;

  /* ── 2. Capa semántica ── */
  --surface-page: var(--white);
  --surface: var(--white);
  --surface-alt: var(--pearl-tint);
  --surface-accent-soft: var(--naranja-suave);
  --surface-inverse: var(--naranja-hondo);        /* botón primario · blanco 4,78:1 */
  --surface-inverse-hover: var(--naranja-oscuro); /* blanco 5,97:1 */
  --banda-inicio: var(--naranja-oscuro);          /* bandas naranja · blanco 5,97:1 */
  --banda-medio: var(--naranja-hondo);            /* blanco 4,78:1 */
  --banda-fin: var(--naranja-banda-fin);          /* blanco 4,55:1 (el extremo más claro) */
  --text-primary: var(--charcoal);                /* 12,63:1 */
  --text-muted: var(--graphite);                  /* 8,45:1 page · 8,02:1 alt */
  --text-accent: var(--naranja-oscuro);           /* 5,97:1 page · 5,66:1 alt · 5,27:1 accent-soft */
  --text-on-inverse: var(--white);
  --text-ventaja: var(--verde-exito);             /* 5,13:1 */
  --brand-mark: var(--naranja);                   /* íconos, decoración y cifras grandes (3,11:1 ≥ 3:1) */
  --border: var(--pearl-light);
  --border-accent: var(--naranja);
  --focus-ring: var(--naranja-hondo);             /* 4,78:1 */
  --focus-ring-on-inverse: var(--white);
  --overlay-on-inverse: rgba(255, 255, 255, 0.1);
  --border-on-inverse: rgba(255, 255, 255, 0.4);
  --overlay-scrim: rgba(0, 0, 0, 0.16);
  --cobertura-relleno: var(--naranja);
  --cobertura-borde: var(--naranja-hondo);
  --boton-claro-fondo: var(--white);              /* botón claro sobre las bandas, igual en ambos modos */
  --boton-claro-texto: var(--naranja-hondo);      /* 4,78:1 */
  --input-fondo: var(--white);                    /* los campos van claros también en modo oscuro */
  --input-texto: var(--charcoal);                 /* 12,63:1 */
  --deco-brillo: rgba(255, 255, 255, 0.14);       /* decoración de las bandas, sin texto encima */
  --deco-sombra: rgba(0, 0, 0, 0.18);
  --deco-puntos: rgba(255, 255, 255, 0.9);
  --mascara: #000;                                /* canal alfa de mask-image, no es un color visible */
  --sombra-rgb: 0, 0, 0;

  /* ── Tipografía: Poppins, servida desde el sitio (assets/vendor/poppins) ── */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-1: 0.75rem;
  --fs-2: 0.875rem;
  --fs-3: 1rem;
  --fs-4: 1.125rem;
  --fs-5: clamp(1.5rem, 3.2vw, 2.1rem);
  --fs-6: clamp(1.7rem, 3.6vw, 2.4rem);
  --fs-7: clamp(2.1rem, 5.2vw, 3.5rem);

  /* ── Espacio, radios, sombras, capas ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(var(--sombra-rgb), 0.04), 0 8px 28px rgba(var(--sombra-rgb), 0.07);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.18);
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --maxw: 1140px;
  --control-h: 44px;
  --logo-h: 34px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: var(--noche-900);
    --surface: var(--noche-800);
    --surface-alt: var(--noche-700);
    --surface-accent-soft: var(--noche-acento);
    --text-primary: var(--niebla-100);         /* 15,99:1 */
    --text-muted: var(--niebla-400);           /* 8,57:1 page · 7,05:1 alt */
    --text-accent: var(--naranja);             /* 5,71:1 page · 4,70:1 alt */
    --text-ventaja: var(--verde-exito-claro);  /* 8,84:1 */
    --brand-mark: var(--naranja);
    --border: var(--noche-600);
    --focus-ring: var(--naranja);
    --sombra-rgb: 0, 0, 0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-page: var(--noche-900);
  --surface: var(--noche-800);
  --surface-alt: var(--noche-700);
  --surface-accent-soft: var(--noche-acento);
  --text-primary: var(--niebla-100);
  --text-muted: var(--niebla-400);
  --text-accent: var(--naranja);
  --text-ventaja: var(--verde-exito-claro);
  --brand-mark: var(--naranja);
  --border: var(--noche-600);
  --focus-ring: var(--naranja);
  --sombra-rgb: 0, 0, 0;
  color-scheme: dark;
}