/* ============================================================
   SINCRO - Dirección "Precisión"
   Tokens de marca. Usar siempre var(--x), nunca el hex suelto.

   Contrastes medidos con la fórmula WCAG 2.1, no estimados.
   Cada valor lleva su ratio contra el fondo donde se usa.
   ============================================================ */

:root {
  /* ---------- superficie ---------- */
  --paper:        #FFFFFF;   /* fondo base */
  --mist:         #F4F5F7;   /* secciones alternadas, tarjetas */
  --line:         #E2E4E8;   /* bordes y divisores */
  --line-strong:  #D5D8DD;   /* bordes de controles */

  /* ---------- texto ---------- */
  /* Antes era #0A0A0A. Se suavizó: el negro puro aplana la profundidad
     y es uno de los tells de diseño generado. 18,04:1 sobre blanco, AAA. */
  --ink:          #16161A;

  /* Párrafos y cuerpo. 6,25:1 sobre blanco, 5,73:1 sobre niebla. AA. */
  --ink-muted:    #5B6169;

  /* Metadatos, etiquetas, pies de foto, texto de apoyo.
     5,29:1 sobre blanco y 4,85:1 sobre niebla. AA en ambos fondos.
     OJO: el #8A9099 que se usó en las primeras láminas da 3,22:1 y NO
     alcanza para texto menor a 18px. No volver a usarlo para etiquetas. */
  --ink-subtle:   #666C76;

  /* ---------- acento ---------- */
  /* Único color de la marca. 8,65:1 sobre blanco, AAA.
     Un solo elemento acentuado por pantalla. */
  --accent:       #1B2ED8;
  --accent-hover: #14219E;
  /* Texto que va ENCIMA del acento. En claro el blanco da 8,65:1; en oscuro
     el acento se aclara y el blanco cae a 3,54:1, asi que ahi va tinta. */
  --on-accent:    #FFFFFF;

  /* ---------- fichas de logo ----------
     NO se redefinen en oscuro a proposito: el arte de cada logo es fijo.
     El lettering de JLT es claro y necesita fondo oscuro siempre; el de
     Kaya es oscuro y necesita fondo claro siempre. Si estos dos colores
     siguieran al tema, uno de los dos logos desapareceria. */
  --chip-dark:    #17171C;
  --chip-light:   #FFFFFF;
  --r-icon:       12px;

  /* ---------- estados ---------- */
  --ok:           #1B6B47;
  --warn:         #8A6209;
  --error:        #A32318;

  /* ---------- tipografía ---------- */
  --font:         'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- espaciado ---------- */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 40px;  --s7: 64px;  --s8: 96px;  --s9: 160px;

  /* ---------- radios ---------- */
  /* Un solo sistema en toda la página: controles en píldora, superficies suaves. */
  --r-pill:       999px;
  --r-surface:    16px;
  --r-input:      8px;

  /* ---------- elevación ---------- */
  /* Sombras teñidas con el azul de la tinta, nunca negro puro. */
  --e1: 0 1px 2px rgba(22, 22, 26, 0.04);
  --e2: 0 8px 24px rgba(22, 22, 26, 0.08);
  --e3: 0 26px 60px rgba(22, 22, 26, 0.12);

  /* ---------- movimiento ---------- */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:    180ms;   /* hover, foco */
  --dur-move:     460ms;   /* entradas, cambios de layout */
}

/* Modo oscuro: sólo se redefinen los tokens, nunca los componentes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0E0E11;
    --mist:         #16161A;
    --line:         #26262C;
    --line-strong:  #33333B;
    --ink:          #F2F2F4;
    --ink-muted:    #A8ADB6;
    --ink-subtle:   #868C96;
    /* El azul original se apaga sobre fondo oscuro: se aclara para mantener
       la misma jerarquía que tiene en claro. */
    --accent:       #6E7BFF;
    --accent-hover: #8A94FF;
    --on-accent:    #0E0E11;
    --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e2: 0 8px 24px rgba(0, 0, 0, 0.5);
    --e3: 0 26px 60px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --paper:        #0E0E11;
  --mist:         #16161A;
  --line:         #26262C;
  --line-strong:  #33333B;
  --ink:          #F2F2F4;
  --ink-muted:    #A8ADB6;
  --ink-subtle:   #868C96;
  --accent:       #6E7BFF;
  --accent-hover: #8A94FF;
  --on-accent:    #0E0E11;
  --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --e3: 0 26px 60px rgba(0, 0, 0, 0.6);
}

/* Todo movimiento se desactiva si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}