/**
 * 01-tokens.css — Sistema de diseño: color, tipografía y radios.
 *
 * Ningún componente define un color literal. Todo pasa por estas variables,
 * que es lo que permite cambiar la marca completa tocando un solo archivo y
 * lo que hace que el tema oscuro no sea una inversión automática sino una
 * paleta propia.
 *
 * PALETA DE MARCA TECNOSUPER
 * Los valores salen de la plantilla corporativa (extraídos de
 * "COMITE 22 JUL.pptx", esquema de color de las diapositivas):
 *
 *   #792EDE  morado vivo        #5A3A9E  morado medio
 *   #4B1A8C  morado profundo    #9A7BC8  morado suave
 *   #C7ADEF  lila               #B79BE6  lila claro
 *   #E9DEFA  tinte              #F4EFFC  tinte claro
 *   #2A2140  tinta              #6E6784  gris morado
 *   #2A0E54  morado noche       #1F9E6E  verde
 *   #C0392B  rojo               #D9822B  ámbar
 *
 * AJUSTE DE CONTRASTE. Los verdes, rojos y ámbares de marca están calibrados
 * para rellenos de diapositiva, no para texto: sobre blanco quedan entre 3,4:1
 * y 4,3:1, por debajo del mínimo legible. Para TEXTO usamos versiones
 * oscurecidas de esos mismos tonos (--pos, --neg, --amb ≥ 4,5:1); los valores
 * de marca originales sobreviven en los rellenos suaves (--posSoft, etc.).
 * Ese es el único punto donde nos apartamos del PPT, y es a propósito.
 *
 * EL ACENTO ES EL MORADO SUAVE. #5A3A9E en claro y #B79BE6 en oscuro llevan la
 * estructura. El #792EDE vivo se reserva para acciones primarias y foco, donde
 * un tono más saturado sí ayuda. El ámbar no es decorativo: marca únicamente la
 * semana en curso. El verde y el rojo son semánticos (ingreso / salida) y por
 * eso el acento nunca puede ser ninguno de los dos.
 */

:root {
  /* — Superficies — */
  --bg:        #F5F1FB;
  --surf:      #FFFFFF;
  --surf2:     #EDE6F8;
  --surf3:     #E1D6F3;
  --surf-hist: #EEEAF4;   /* semanas congeladas: desaturado a propósito */

  /* — Bordes — */
  --line:  #DED3F0;
  --line2: #C3B2E2;
  --line3: #A895CE;

  /* — Texto — */
  --tx:  #2A2140;
  --tx2: #4E4568;
  --tx3: #6E6784;

  /* — Acento de marca — */
  --acc:     #5A3A9E;
  --acc2:    #792EDE;
  --accTx:   #FFFFFF;
  --accSoft: #E9DEFA;
  --accLine: #C7ADEF;

  /* — Ámbar: exclusivo de la semana en curso — */
  --amb:     #A85F12;
  --ambSoft: #FBEEDA;
  --ambLine: #E0AE6B;

  /* — Semánticos de flujo — */
  --pos:     #136A4A;
  --posSoft: #DFF3EA;
  --neg:     #A32B22;
  --negSoft: #FBEDEC;

  --focus: #792EDE;
  --shadow: 0 1px 2px rgba(42, 33, 64, .07), 0 8px 24px -12px rgba(42, 33, 64, .28);

  /* — Tipografía —
   * Sin webfonts: la CSP de los Artifacts bloquea los CDN de fuentes y una
   * fuente que no carga se degrada peor que una pila del sistema bien elegida.
   * Consolas da a las cifras el aire de cinta de caja que buscamos. */
  --f-ui:  ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui,
           -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-num: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono",
           "DejaVu Sans Mono", monospace;

  --r: 5px;
}

/* ── Tema oscuro ──────────────────────────────────────────────────────────
 * Pasos propios sobre un negro morado (#140E20, derivado del #2A0E54 de
 * marca), no una inversión. El acento sube a #B79BE6 porque el #5A3A9E no
 * alcanza contraste sobre fondo oscuro.
 *
 * Se declara dos veces a propósito: el @media recoge la preferencia del
 * sistema y el selector de atributo recoge el interruptor de la aplicación,
 * que debe poder ganarle al sistema en ambas direcciones. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #140E20;
    --surf:      #1D1630;
    --surf2:     #261D3D;
    --surf3:     #31264C;
    --surf-hist: #191327;

    --line:  #33284D;
    --line2: #453764;
    --line3: #5C4B80;

    --tx:  #EDE7F8;
    --tx2: #BDB2D6;
    --tx3: #948AAE;

    --acc:     #B79BE6;
    --acc2:    #C7ADEF;
    --accTx:   #180F28;
    --accSoft: #2A1F45;
    --accLine: #4B3A78;

    --amb:     #E5A44E;
    --ambSoft: #2E2313;
    --ambLine: #6B4F22;

    --pos:     #4ECB96;
    --posSoft: #12281F;
    --neg:     #F0808C;
    --negSoft: #2E171A;

    --focus: #C7ADEF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -12px rgba(0, 0, 0, .75);
  }
}

:root[data-theme="dark"] {
  --bg:        #140E20;
  --surf:      #1D1630;
  --surf2:     #261D3D;
  --surf3:     #31264C;
  --surf-hist: #191327;

  --line:  #33284D;
  --line2: #453764;
  --line3: #5C4B80;

  --tx:  #EDE7F8;
  --tx2: #BDB2D6;
  --tx3: #948AAE;

  --acc:     #B79BE6;
  --acc2:    #C7ADEF;
  --accTx:   #180F28;
  --accSoft: #2A1F45;
  --accLine: #4B3A78;

  --amb:     #E5A44E;
  --ambSoft: #2E2313;
  --ambLine: #6B4F22;

  --pos:     #4ECB96;
  --posSoft: #12281F;
  --neg:     #F0808C;
  --negSoft: #2E171A;

  --focus: #C7ADEF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -12px rgba(0, 0, 0, .75);
}

:root[data-theme="light"] {
  --bg:        #F5F1FB;
  --surf:      #FFFFFF;
  --surf2:     #EDE6F8;
  --surf3:     #E1D6F3;
  --surf-hist: #EEEAF4;

  --line:  #DED3F0;
  --line2: #C3B2E2;
  --line3: #A895CE;

  --tx:  #2A2140;
  --tx2: #4E4568;
  --tx3: #6E6784;

  --acc:     #5A3A9E;
  --acc2:    #792EDE;
  --accTx:   #FFFFFF;
  --accSoft: #E9DEFA;
  --accLine: #C7ADEF;

  --amb:     #A85F12;
  --ambSoft: #FBEEDA;
  --ambLine: #E0AE6B;

  --pos:     #136A4A;
  --posSoft: #DFF3EA;
  --neg:     #A32B22;
  --negSoft: #FBEDEC;

  --focus: #792EDE;
  --shadow: 0 1px 2px rgba(42, 33, 64, .07), 0 8px 24px -12px rgba(42, 33, 64, .28);
}