/* ============================================================
   MINERIA DS · tokens (a11y revision)
   Diseñado para alto contraste y baja visión.

   Todos los pares texto/fondo cumplen WCAG AAA (≥7:1) para
   texto normal. Los tonos secundarios (ink-mute, ink-soft) se
   oscurecieron para que dejen de ser un "gris decorativo" y
   se vuelvan legibles. Reglas y bordes se reforzaron para que
   personas con baja visión perciban dónde termina un campo.

   Importable desde cualquier proyecto:
     <link rel="stylesheet" href="/projects/<id>/tokens.css" />
   ============================================================ */
:root {
  /* ============================================================
     COLOR · Cantera (neutral / piedra)
     Se mantiene la escala pero los tonos medios se oscurecen
     porque eran los que generaban texto bajo contraste.
     ============================================================ */
  --cantera-50:  #f7f3ec;
  --cantera-100: #ece4d2;
  --cantera-200: #d6c8a8;
  --cantera-300: #a89572;
  --cantera-400: #5e4f35;
  --cantera-500: #4a3d28;
  --cantera-600: #36291a;
  --cantera-700: #251a0e;
  --cantera-800: #160f06;
  --cantera-900: #0a0703;

  /* ============================================================
     COLOR · Vino (acción primaria)
     ============================================================ */
  --vino-50:  #f8e6e6;
  --vino-100: #ebbcbc;
  --vino-300: #b04848;
  --vino-500: #6e1f1f;
  --vino-600: #531616;
  --vino-700: #3a0d0d;

  /* ============================================================
     COLOR · Oro (acento)
     ============================================================ */
  --oro-100: #f4e6b3;
  --oro-300: #c89826;
  --oro-500: #8a6310;
  --oro-700: #573e08;

  /* ============================================================
     COLOR · Tinta (azul académico, enlaces)
     ============================================================ */
  --tinta-100: #d8e1f0;
  --tinta-500: #142a52;
  --tinta-700: #0a1832;

  /* ============================================================
     ESTADOS SEMÁNTICOS (alto contraste)
     ============================================================ */
  --success-bg:   #d4e8d4;
  --success-fg:   #0d3a0d;
  --warning-bg:   #f7e5b8;
  --warning-fg:   #4a3500;
  --error-bg:     #f4d2d2;
  --error-fg:     #5a0a0a;
  --info-bg:      #d8e1f0;
  --info-fg:      #0a1832;

  /* ============================================================
     SUPERFICIES / ALIASES SEMÁNTICOS
     ============================================================ */
  --bg:           #e7ddc6;
  --bg-elev:      #ffffff;
  --bg-sunken:    #d6c8a8;

  --ink:          var(--cantera-900);
  --ink-soft:     var(--cantera-700);
  --ink-mute:     var(--cantera-500);
  --ink-faint:    var(--cantera-400);

  --rule:         var(--cantera-500);
  --rule-strong:  var(--cantera-700);
  --rule-input:   var(--ink);

  --color-primary:        var(--vino-600);
  --color-primary-hover:  var(--vino-700);
  --color-primary-tint:   var(--vino-50);
  --color-accent:         var(--oro-500);
  --color-link:           var(--tinta-500);

  /* ============================================================
     FOCO VISIBLE
     ============================================================ */
  --focus-ring-color:  var(--vino-600);
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-ring:        0 0 0 var(--focus-ring-offset) var(--bg),
                       0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* ============================================================
     ESPACIADO (base 4)
     ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* ============================================================
     SOMBRAS
     ============================================================ */
  --sh-sm: 0 1px 2px rgba(10,7,3,.12), 0 0 0 1px rgba(10,7,3,.10);
  --sh-md: 0 4px 14px rgba(10,7,3,.14), 0 0 0 1px rgba(10,7,3,.12);
  --sh-lg: 0 14px 38px rgba(10,7,3,.18), 0 0 0 1px rgba(10,7,3,.14);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container: 1280px;
  --container-narrow: 880px;
}

/* ============================================================
   MODO ALTO CONTRASTE FORZADO
   Activable con data-contrast="max" en <html>.
   ============================================================ */
[data-contrast="max"] {
  --bg:          #ffffff;
  --bg-elev:     #ffffff;
  --ink:         #000000;
  --ink-soft:    #000000;
  --ink-mute:    #1a1a1a;
  --rule:        #000000;
  --rule-strong: #000000;
  --color-primary: #4a0000;
  --color-link:    #00164a;
}

/* ============================================================
   RESPETO A PREFERENCIAS DEL SO
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --bg:          #ffffff;
    --ink:         #000000;
    --ink-soft:    #000000;
    --ink-mute:    #1a1a1a;
    --rule:        var(--cantera-700);
    --rule-strong: #000000;
  }
}