/* ══════════════════════════════════════════════════════════════════════════
   AUGMENTA · Tokens de marca
   ──────────────────────────────────────────────────────────────────────────
   La única definición de color, tipografía y ritmo de toda la suite. Treinta
   aplicaciones leen este fichero; cambiarlo aquí las cambia todas.

   Cada aplicación aporta exactamente una variable propia, --app-accent, y con
   eso se distingue. Todo lo demás lo pone la plataforma: es lo que hace que
   Pong y un conversor de unidades se reconozcan como hermanos.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficies ─────────────────────────────────────────────────────
     Neutros con sesgo azul. Un gris puro se lee como no elegido.        */
  --a-ground:    #ffffff;
  --a-ground-2:  #f5f7fc;
  --a-ground-3:  #eaeff8;
  --a-rule:      #e2e7f1;
  --a-rule-2:    #949eb5;   /* 3,1:1 sobre blanco: es el borde de los controles */

  /* ── Tinta ───────────────────────────────────────────────────────── */
  --a-ink:       #141c2e;
  --a-ink-2:     #3a4560;
  --a-ink-3:     #5c6884;   /* 5,6:1 sobre blanco */

  /* ── Marca ───────────────────────────────────────────────────────── */
  --a-brand:     #2c5cf5;
  --a-brand-ink: #1c42c4;
  --a-brand-soft: #e8eeff;

  /* Acento de la aplicación. Cada una lo sobreescribe; éste es el de la
     propia plataforma. */
  --app-accent:      var(--a-brand);
  /* El acento se parte en tres papeles porque uno solo no puede cumplir a la
     vez "llama la atencion" y "se lee". Un verde menta vale de relleno y es
     ilegible como texto: 2,16:1. */
  --app-accent-ink:  var(--a-brand-ink);
  --app-on-accent:   #ffffff;
  --app-accent-soft: var(--a-brand-soft);

  /* ── Semántica ───────────────────────────────────────────────────── */
  --a-ok:        #0a7d5a;
  --a-ok-soft:   #e2f6ef;
  --a-warn:      #a8560c;
  --a-warn-soft: #fdf0e3;
  --a-bad:       #c01d63;
  --a-bad-soft:  #fdeaf2;

  /* ── Tipografía ──────────────────────────────────────────────────── */
  --a-display: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
  --a-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ── Ritmo ───────────────────────────────────────────────────────── */
  --a-r-sm: .5rem;
  --a-r-md: .875rem;
  --a-r-lg: 1.25rem;
  --a-r-xl: 1.75rem;

  --a-shadow-1: 0 1px 2px rgb(20 28 46 / .05), 0 2px 8px -4px rgb(20 28 46 / .12);
  --a-shadow-2: 0 1px 2px rgb(20 28 46 / .06), 0 18px 40px -24px rgb(20 28 46 / .38);
  --a-shadow-3: 0 2px 4px rgb(20 28 46 / .06), 0 40px 80px -40px rgb(20 28 46 / .45);

  --a-ease:     cubic-bezier(.22, 1, .36, 1);
  --a-ease-out: cubic-bezier(.34, 1.26, .64, 1);

  color-scheme: light;
}

/* El sistema en oscuro sin que nadie haya elegido nada. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-ground:    #0b111f;
    --a-ground-2:  #111a2c;
    --a-ground-3:  #18233b;
    --a-rule:      #212c47;
    --a-rule-2:    #313f63;
    --a-ink:       #eaeff9;
    --a-ink-2:     #bcc6dc;
    --a-ink-3:     #8b97b4;
    --a-brand:     #6c92ff;
    --a-brand-ink: #a4bcff;
    --a-brand-soft:#152245;
    --a-ok:        #34cf9c;
    --a-ok-soft:   #0b2a22;
    --a-warn:      #eda264;
    --a-warn-soft: #2b1c0e;
    --a-bad:       #ff77ac;
    --a-bad-soft:  #2c1220;
    --a-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px -4px rgb(0 0 0 / .5);
    --a-shadow-2: 0 1px 2px rgb(0 0 0 / .35), 0 18px 40px -24px rgb(0 0 0 / .75);
    --a-shadow-3: 0 2px 4px rgb(0 0 0 / .4), 0 40px 80px -40px rgb(0 0 0 / .85);
    color-scheme: dark;
  }
}

/* Y con elección explícita, que gana en las dos direcciones. */
:root[data-theme="dark"] {
  --a-ground:    #0b111f;
  --a-ground-2:  #111a2c;
  --a-ground-3:  #18233b;
  --a-rule:      #212c47;
  --a-rule-2:    #313f63;
  --a-ink:       #eaeff9;
  --a-ink-2:     #bcc6dc;
  --a-ink-3:     #8b97b4;
  --a-brand:     #6c92ff;
  --a-brand-ink: #a4bcff;
  --a-brand-soft:#152245;
  --a-ok:        #34cf9c;
  --a-ok-soft:   #0b2a22;
  --a-warn:      #eda264;
  --a-warn-soft: #2b1c0e;
  --a-bad:       #ff77ac;
  --a-bad-soft:  #2c1220;
  --a-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px -4px rgb(0 0 0 / .5);
  --a-shadow-2: 0 1px 2px rgb(0 0 0 / .35), 0 18px 40px -24px rgb(0 0 0 / .75);
  --a-shadow-3: 0 2px 4px rgb(0 0 0 / .4), 0 40px 80px -40px rgb(0 0 0 / .85);
  color-scheme: dark;
}