/* ============================================================
   TOKENS — única fuente de verdad del diseño.
   Contraste verificado sobre --s1/--s2/--s3: tx ≥ 14:1, tx-2 ≥ 8:1, tx-3 ≥ 5:1.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Superficies (de más profundo a más elevado) */
  --bg: #0a0b0e;
  --s1: #111318;
  --s2: #171a20;
  --s3: #1e222a;
  --s4: #272c36;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --scrim: rgba(4, 5, 8, 0.66);

  /* Texto */
  --tx: #f4f5f7;
  --tx-2: #bcc0c9;
  --tx-3: #8f94a1;

  /* Marca */
  --accent: #f5a623;
  --accent-hi: #ffbb4d;
  --accent-ink: #1c1102;
  --accent-soft: rgba(245, 166, 35, 0.14);
  --accent-line: rgba(245, 166, 35, 0.45);

  /* Semánticos */
  --info: #5aa2ff;
  --ok: #3ccf8e;
  --bad: #ff6b4a;
  --violet: #b58cff;
  --teal: #35d0c0;
  --pink: #f26aa6;
  --info-soft: rgba(90, 162, 255, 0.15);
  --ok-soft: rgba(60, 207, 142, 0.15);
  --bad-soft: rgba(255, 107, 74, 0.15);
  --violet-soft: rgba(181, 140, 255, 0.15);
  --teal-soft: rgba(53, 208, 192, 0.15);
  --pink-soft: rgba(242, 106, 166, 0.15);
  --gray-soft: rgba(143, 148, 161, 0.16);

  /* Tipografía */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.75rem;   /* 12 — solo metadatos secundarios */
  --t-sm: 0.875rem;  /* 14 */
  --t-md: 1rem;      /* 16 — cuerpo */
  --t-lg: 1.125rem;  /* 18 */
  --t-xl: 1.375rem;  /* 22 */
  --t-2xl: 1.75rem;  /* 28 */

  /* Espaciado (base 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Forma y elevación */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* Movimiento — solo transform/opacity/color */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;

  /* Layout */
  --nav-h: 64px;
  --side-w: 248px;
  --topbar-h: 56px;
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}