/* =====================================================================
   Parsec Soft · tokens de marca (C · Órbita) · v1.0 · 2026-11-05 · Rey
   ---------------------------------------------------------------------
   - Modo claro por omisión; oscuro con prefers-color-scheme o con
     data-tema="oscuro" en <html> o en cualquier sección.
   - .banda-negra = sección siempre negra (inicio, pie, Open Graph).
     ES EL ÚNICO LUGAR DONDE EXISTE EL LIMA.
   - Contrastes medidos (WCAG 2.1) en herramientas/contrastes-final.json.
   - Fuentes autoalojadas (OFL). Ajusta la ruta si copias el archivo.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/Archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fuentes/JetBrainsMono-variable.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- paleta base (no usar directo en componentes; usar los semánticos) ---- */
  --ps-negro: #0A0A0B;
  --ps-carbon: #18181B;
  --ps-grafito: #27272A;
  --ps-gris-borde-oscuro: #71717A;
  --ps-gris-medio: #5E5E66;
  --ps-gris-borde: #8A8A93;
  --ps-gris-claro: #A1A1AA;
  --ps-humo: #D4D4D8;
  --ps-linea: #E4E4E7;
  --ps-niebla: #F4F4F5;
  --ps-blanco: #FFFFFF;
  --ps-lima: #C5F04A;          /* SOLO sobre negro o carbón */
  --ps-lima-hondo: #A9D62E;    /* hover del botón lima (texto negro 11.63:1) */
  --ps-error-claro: #B42318;   /* 6.57:1 sobre blanco · 5.98:1 niebla */
  --ps-error-oscuro: #FF8A80;  /* 8.67:1 sobre negro · 7.76:1 carbón */
  --ps-exito-claro: #1F6B3A;   /* 6.52:1 sobre blanco */
  --ps-exito-oscuro: #7EE2A0;  /* 12.51:1 sobre negro */

  /* ---- tipografía ---- */
  --ps-fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ps-fuente-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ps-peso-titulo: 800;
  --ps-peso-fuerte: 650;
  --ps-peso-texto: 400;
  --ps-tracking-titulo: -0.035em;
  --ps-tracking-display: -0.05em;
  --ps-t-display: clamp(3rem, 8vw, 7.5rem);   /* 48 → 120 px */
  --ps-t-h1: clamp(2.25rem, 5vw, 4rem);       /* 36 → 64 px */
  --ps-t-h2: clamp(1.75rem, 3vw, 2.5rem);     /* 28 → 40 px */
  --ps-t-h3: 1.375rem;                         /* 22 px */
  --ps-t-cuerpo: 1.0625rem;                    /* 17 px */
  --ps-t-grande: 1.25rem;                      /* 20 px */
  --ps-t-chico: 0.875rem;                      /* 14 px */
  --ps-t-etiqueta: 0.8125rem;                  /* 13 px, mono */
  --ps-interlineado: 1.55;

  /* ---- espacio, radios, sombras ---- */
  --ps-e-1: 4px;  --ps-e-2: 8px;  --ps-e-3: 12px; --ps-e-4: 16px;
  --ps-e-5: 24px; --ps-e-6: 32px; --ps-e-7: 48px; --ps-e-8: 64px; --ps-e-9: 96px;
  --ps-ancho: 1200px;
  --ps-radio-chico: 6px;
  --ps-radio: 12px;
  --ps-radio-grande: 20px;
  --ps-radio-pildora: 999px;      /* botones */
  --ps-sombra: 0 1px 2px rgb(10 10 11 / .06), 0 8px 24px rgb(10 10 11 / .06);
  --ps-transicion: 160ms cubic-bezier(.2, .7, .2, 1);

  /* ---- semánticos · MODO CLARO ---- */
  color-scheme: light;
  --ps-fondo: var(--ps-blanco);
  --ps-superficie: var(--ps-niebla);
  --ps-superficie-alta: var(--ps-blanco);
  --ps-texto: var(--ps-negro);              /* 19.79:1 */
  --ps-texto-suave: var(--ps-gris-medio);   /* 6.42:1 blanco · 5.84:1 niebla */
  --ps-linea-color: var(--ps-linea);        /* decorativa */
  --ps-borde-campo: var(--ps-gris-borde);   /* 3.42:1 (UI) */
  --ps-acento: var(--ps-negro);             /* en claro el acento ES el negro */
  --ps-enlace: var(--ps-negro);             /* subrayado siempre */
  --ps-boton-fondo: var(--ps-negro);
  --ps-boton-texto: var(--ps-blanco);       /* 19.79:1 */
  --ps-boton-hover: var(--ps-grafito);
  --ps-boton2-borde: var(--ps-negro);
  --ps-boton2-texto: var(--ps-negro);
  --ps-foco: var(--ps-negro);
  --ps-punto: var(--ps-negro);              /* punto final de títulos y del isotipo */
  --ps-error: var(--ps-error-claro);
  --ps-exito: var(--ps-exito-claro);
  --ps-logo: url("../logos/parsec-soft-horizontal.svg");
}

/* ---- semánticos · MODO OSCURO ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --ps-fondo: var(--ps-negro);
    --ps-superficie: var(--ps-carbon);
    --ps-superficie-alta: var(--ps-carbon);
    --ps-texto: var(--ps-blanco);             /* 19.79:1 */
    --ps-texto-suave: var(--ps-gris-claro);   /* 7.72:1 negro · 6.91:1 carbón */
    --ps-linea-color: var(--ps-grafito);
    --ps-borde-campo: var(--ps-gris-borde-oscuro); /* 4.09:1 */
    --ps-acento: var(--ps-lima);
    --ps-enlace: var(--ps-blanco);
    --ps-boton-fondo: var(--ps-lima);
    --ps-boton-texto: var(--ps-negro);        /* 15.02:1 */
    --ps-boton-hover: var(--ps-lima-hondo);
    --ps-boton2-borde: var(--ps-gris-borde-oscuro);
    --ps-boton2-texto: var(--ps-blanco);
    --ps-foco: var(--ps-lima);
    --ps-punto: var(--ps-lima);
    --ps-error: var(--ps-error-oscuro);
    --ps-exito: var(--ps-exito-oscuro);
    --ps-logo: url("../logos/parsec-soft-horizontal-negativo.svg");
  }
}

[data-tema="oscuro"], .banda-negra {
  color-scheme: dark;
  --ps-fondo: var(--ps-negro);
  --ps-superficie: var(--ps-carbon);
  --ps-superficie-alta: var(--ps-carbon);
  --ps-texto: var(--ps-blanco);
  --ps-texto-suave: var(--ps-gris-claro);
  --ps-linea-color: var(--ps-grafito);
  --ps-borde-campo: var(--ps-gris-borde-oscuro);
  --ps-acento: var(--ps-lima);
  --ps-enlace: var(--ps-blanco);
  --ps-boton-fondo: var(--ps-lima);
  --ps-boton-texto: var(--ps-negro);
  --ps-boton-hover: var(--ps-lima-hondo);
  --ps-boton2-borde: var(--ps-gris-borde-oscuro);
  --ps-boton2-texto: var(--ps-blanco);
  --ps-foco: var(--ps-lima);
  --ps-punto: var(--ps-lima);
  --ps-error: var(--ps-error-oscuro);
  --ps-exito: var(--ps-exito-oscuro);
  --ps-logo: url("../logos/parsec-soft-horizontal-negativo.svg");
}

[data-tema="claro"] {
  color-scheme: light;
  --ps-fondo: var(--ps-blanco);
  --ps-superficie: var(--ps-niebla);
  --ps-superficie-alta: var(--ps-blanco);
  --ps-texto: var(--ps-negro);
  --ps-texto-suave: var(--ps-gris-medio);
  --ps-linea-color: var(--ps-linea);
  --ps-borde-campo: var(--ps-gris-borde);
  --ps-acento: var(--ps-negro);
  --ps-enlace: var(--ps-negro);
  --ps-boton-fondo: var(--ps-negro);
  --ps-boton-texto: var(--ps-blanco);
  --ps-boton-hover: var(--ps-grafito);
  --ps-boton2-borde: var(--ps-negro);
  --ps-boton2-texto: var(--ps-negro);
  --ps-foco: var(--ps-negro);
  --ps-punto: var(--ps-negro);
  --ps-error: var(--ps-error-claro);
  --ps-exito: var(--ps-exito-claro);
  --ps-logo: url("../logos/parsec-soft-horizontal.svg");
}

/* ---- base mínima (opcional) ---- */
.ps-base {
  background: var(--ps-fondo);
  color: var(--ps-texto);
  font: var(--ps-peso-texto) var(--ps-t-cuerpo)/var(--ps-interlineado) var(--ps-fuente);
  -webkit-font-smoothing: antialiased;
}
.ps-base :focus-visible { outline: 3px solid var(--ps-foco); outline-offset: 3px; border-radius: 4px; }
.ps-punto { color: var(--ps-punto); }   /* «Software que llega lejos<span class="ps-punto">.</span>» */
@media (prefers-reduced-motion: reduce) { :root { --ps-transicion: 0ms; } }