/* ══════════════════════════════════════════════════════════════════════════
   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:  #f8f6fb;
  --a-ground-3:  #f0ecf6;
  --a-rule:      #e8e4ef;
  --a-rule-2:    #a49bb2;   /* 3,1:1 sobre blanco: es el borde de los controles */

  /* ── Tinta ───────────────────────────────────────────────────────── */
  /* Neutros con un punto de violeta, para que el gris no se lea como gris
     de plantilla sino como el gris de esta marca. */
  --a-ink:       #16121f;
  --a-ink-2:     #453d55;
  --a-ink-3:     #6a6179;   /* 5,2:1 sobre blanco */

  /* ── Marca ─────────────────────────────────────────────────────────
     Muestreados del logotipo, no inventados. El violeta es el unico de los
     tres que se puede usar como texto: da 5,5:1 sobre blanco. El magenta
     (3,1:1) y el rosa son decorativos y nunca llevan texto encima.        */
  --a-violeta:   #9900ff;
  --a-magenta:   #ff00ff;
  --a-rosa:      #ff66ff;
  --a-brand:     var(--a-violeta);
  --a-brand-ink: #8400dd;
  --a-brand-soft: #f4e8ff;

  /* 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 ──────────────────────────────────────────────────── */
  /* En un Mac o un iPhone esto es literalmente la tipografia de Apple. En
     Windows y Android cae en Inter Tight, que es la mas cercana que se puede
     servir: misma caja estrecha y el mismo aire de titular apretado. */
  --a-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", Inter, system-ui, sans-serif;
  --a-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-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:    #0e0a14;
    --a-ground-2:  #161020;
    --a-ground-3:  #1f1730;
    --a-rule:      #2a2139;
    --a-rule-2:    #463a5c;
    --a-ink:       #f2eef8;
    --a-ink-2:     #c8bfd6;
    --a-ink-3:     #9a8fae;
    --a-brand:     #c07bff;
    --a-brand-ink: #d9a8ff;
    --a-brand-soft:#2a1140;
    --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:    #0e0a14;
  --a-ground-2:  #161020;
  --a-ground-3:  #1f1730;
  --a-rule:      #2a2139;
  --a-rule-2:    #463a5c;
  --a-ink:       #f2eef8;
  --a-ink-2:     #c8bfd6;
  --a-ink-3:     #9a8fae;
  --a-brand:     #c07bff;
  --a-brand-ink: #d9a8ff;
  --a-brand-soft:#2a1140;
  --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;
}