/* ==========================================================================
   PRECISO · Design tokens
   Dirección: claro y luminoso. Dos momentos oscuros como acento, no como base.
   Disciplina de color: el amarillo es la marca; verde y coral SOLO aparecen
   cuando se está representando un dato de absentismo o de presentismo.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COLOR · Superficies claras (la base del sitio)
     ------------------------------------------------------------------ */
  --paper:      #FFFFFF;
  --paper-warm: #FDFAF2;   /* Crema derivada del amarillo de marca */
  --paper-soft: #F4F6FA;   /* Gris frío muy claro */
  --paper-blue: #E9F0FC;   /* Azul suave · solo para separar bloques de una misma serie */
  --rule:       #E7EBF2;
  --rule-strong:#CDD5E2;

  /* ------------------------------------------------------------------
     COLOR · Superficies oscuras (uso puntual)
     ------------------------------------------------------------------ */
  --ink:        #0F1729;
  --ink-deep:   #080D1A;
  --ink-raised: #1A2337;
  --hairline:   rgba(255, 255, 255, .10);
  --hairline-strong: rgba(255, 255, 255, .20);

  /* ------------------------------------------------------------------
     COLOR · Texto
     ------------------------------------------------------------------ */
  --on-light:       #0F1729;   /* Titulares */
  --on-light-soft:  #414C63;   /* Cuerpo · 8,9:1 sobre blanco */
  --on-light-faint: #68738A;   /* Secundario · 4,6:1 sobre blanco */

  --on-dark:        #FFFFFF;
  --on-dark-soft:   #B6C0D4;   /* 8,1:1 sobre --ink */
  --on-dark-faint:  #8592AB;   /* 5,0:1 sobre --ink */

  /* ------------------------------------------------------------------
     COLOR · Marca
     ------------------------------------------------------------------ */
  --brand:        #FBD45A;
  --brand-bright: #FFE58A;
  --brand-soft:   #FFF4CE;
  --brand-deep:   #C99A0E;   /* Legible sobre blanco · 4,6:1 */
  /* Texto sobre el amarillo de marca. Constante en ambos temas: el amarillo
     no cambia, así que su color de contraste tampoco puede cambiar. */
  --on-brand:     #0F1729;

  /* ------------------------------------------------------------------
     COLOR · Datos
     Verde = absentismo. Coral = presentismo. Nunca fuera de un dato.
     ------------------------------------------------------------------ */
  --abs:      #15B88C;   /* Relleno de gráficos */
  --abs-ink:  #0A7D5E;   /* Texto sobre claro · 4,7:1 */
  --abs-soft: #E6F7F1;

  --pre:      #FF7D5E;   /* Relleno de gráficos */
  --pre-ink:  #C1401F;   /* Texto sobre claro · 5,2:1 */
  --pre-soft: #FFEFEA;

  /* ------------------------------------------------------------------
     TIPOGRAFÍA
     ------------------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Maven Pro', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-mega:    clamp(2.75rem, 6vw, 5rem);
  --fs-h2:      clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h3:      clamp(1.1875rem, 1.5vw, 1.4375rem);
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-mega:    1.02;
  --lh-heading: 1.14;
  --lh-body:    1.65;

  --ls-mega:    -0.035em;
  --ls-heading: -0.02em;
  --ls-eyebrow:  0.16em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --measure:      34rem;
  --measure-wide: 44rem;

  /* ------------------------------------------------------------------
     ESPACIADO
     ------------------------------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 2.5rem;   --sp-8: 3rem;     --sp-9: 4rem;
  --sp-10: 5rem;    --sp-11: 7rem;    --sp-12: 9rem;

  --section-y:       clamp(4.5rem, 8vw, 8rem);
  --section-y-tight: clamp(2.5rem, 4vw, 3.5rem);

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container:        76rem;
  --container-narrow: 56rem;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------------
     RADIOS
     ------------------------------------------------------------------ */
  --r-sm: 0.5rem;  --r-md: 0.875rem;  --r-lg: 1.25rem;
  --r-xl: 1.75rem; --r-2xl: 2.25rem;  --r-full: 62.4375rem;

  /* ------------------------------------------------------------------
     ELEVACIÓN
     Muy contenida: bordes finos antes que sombras.
     ------------------------------------------------------------------ */
  --shadow-sm:   0 1px 2px rgba(15, 23, 41, .05);
  --shadow-card: 0 18px 40px -26px rgba(15, 23, 41, .30);
  --shadow-lift: 0 32px 64px -28px rgba(15, 23, 41, .38);

  /* ------------------------------------------------------------------
     MOVIMIENTO
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur:      .32s;
  --dur-slow: .7s;

  --focus-ring: 3px solid var(--on-light);
  --focus-offset: 3px;
}