/* ------------------------------------------------------------------
   PANAL UNO · TOKENS
   Fuente única de verdad del sistema visual.
   Si algo se ve distinto en dos pantallas, es porque no usó estos tokens.
   Versión 0.1 · octubre 2026 · sin curaduría de diseño todavía
------------------------------------------------------------------ */

:root{
  /* --- COLOR ------------------------------------------------------
     Proporción de uso sugerida en superficies claras:
     58% papel · 24% superficie · 12% grafito · 4% verde · 2% miel   */

  --pu-grafito:        #15171C;  /* texto principal en claro, fondo en oscuro */
  --pu-papel:          #F2F0EA;  /* fondo principal en claro, texto en oscuro */
  --pu-superficie:     #E7E4DC;  /* tarjetas y bloques sobre papel */
  --pu-superficie-osc: #1C1F26;  /* tarjetas y bloques sobre grafito */
  --pu-borde:          #D6D2C8;
  --pu-borde-osc:      #2A2E36;

  /* Acción. El verde profundo es para fondo claro, el claro para fondo oscuro.
     No invertirlos: el profundo sobre grafito no llega al contraste mínimo. */
  --pu-verde:          #0E6B5C;  /* 5,6:1 sobre papel */
  --pu-verde-claro:    #4FBFA5;  /* 8,0:1 sobre grafito */

  /* Miel. Regla: no decora. Aparece solo cuando algo se cumplió.
     Nunca texto sobre papel: no llega al contraste. */
  --pu-miel:           #FFB81C;  /* 10,4:1 con grafito encima */

  /* Estructura y estados */
  --pu-pared:          #8A8F98;  /* líneas, celdas vacías. Nunca texto. */
  --pu-ok:             #1B7A4B;  /* validado */
  --pu-falta:          #C8352B;  /* error, faltante, pendiente vencido */

  /* Texto secundario. Uno por fondo. */
  --pu-suave:          #4A4E57;  /* 7,3:1 sobre papel */
  --pu-suave-osc:      #B9BCC4;  /* 9,4:1 sobre grafito */

  /* --- TIPOGRAFÍA -------------------------------------------------
     Archivo para todo. Plex Mono solo para datos, estados y etiquetas:
     KIT ENVIADO · 22/30 · VALIDADO. Nunca en párrafos.                */

  --pu-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --pu-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --pu-size-display: 72px;  --pu-lh-display: .95;
  --pu-size-titulo:  48px;  --pu-lh-titulo:  1.05;
  --pu-size-sub:     32px;  --pu-lh-sub:     1.15;
  --pu-size-texto:   20px;  --pu-lh-texto:   1.5;
  --pu-size-chico:   16px;  --pu-lh-chico:   1.45;
  --pu-size-label:   14px;  --pu-lh-label:   1.3;

  --pu-peso-titulo: 900;
  --pu-peso-fuerte: 800;
  --pu-peso-medio:  500;
  --pu-peso-texto:  400;

  --pu-track-titulo: -.03em;  /* títulos siempre apretados */
  --pu-track-label:  .1em;    /* etiquetas en mayúscula siempre abiertas */

  /* --- ESPACIADO · escala de 4 ------------------------------------ */
  --pu-1: 8px;  --pu-2: 16px; --pu-3: 24px;
  --pu-4: 32px; --pu-5: 48px; --pu-6: 64px; --pu-7: 96px;

  /* --- BORDES ------------------------------------------------------
     6 en controles, 8 en tarjetas, 0 en tablas. Sin sombras:
     la jerarquía la da el color de fondo.                            */
  --pu-radio-control: 6px;
  --pu-radio-tarjeta: 8px;
  --pu-radio-pill:    999px;
  --pu-trazo:         1.5px;  /* bordes de controles */
  --pu-trazo-icono:   2px;    /* íconos: terminaciones rectas, sin relleno */

  /* --- CONTROLES --------------------------------------------------- */
  --pu-alto-control: 56px;
}

/* Modo oscuro: solo redefine tokens. Ningún componente debe usar
   un color literal ni definir color dentro de este bloque. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pu-fondo: var(--pu-grafito);
    --pu-texto: var(--pu-papel);
    --pu-tarjeta: var(--pu-superficie-osc);
    --pu-linea: var(--pu-borde-osc);
    --pu-accion: var(--pu-verde-claro);
    --pu-texto-suave: var(--pu-suave-osc);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --pu-fondo: var(--pu-grafito);
  --pu-texto: var(--pu-papel);
  --pu-tarjeta: var(--pu-superficie-osc);
  --pu-linea: var(--pu-borde-osc);
  --pu-accion: var(--pu-verde-claro);
  --pu-texto-suave: var(--pu-suave-osc);
  color-scheme: dark;
}
/* Valores claros por defecto */
:root{
  --pu-fondo: var(--pu-papel);
  --pu-texto: var(--pu-grafito);
  --pu-tarjeta: var(--pu-superficie);
  --pu-linea: var(--pu-borde);
  --pu-accion: var(--pu-verde);
  --pu-texto-suave: var(--pu-suave);
}

/* ------------------------------------------------------------------
   REGLAS QUE NO SON NEGOCIABLES
   1. Todo texto cumple 4,5:1 contra su fondo.
   2. El color nunca va solo: siempre acompañado del dato escrito.
      Una celda miel sin "22/30" al lado no comunica nada.
   3. Un solo recurso gráfico por pantalla. Si hay grilla hexagonal,
      no hay textura de vértices.
   4. El panal sí, las abejas no. Sin abejas, obreras ni enjambres,
      ni en ilustración ni en texto.
------------------------------------------------------------------ */