/* Finco Admin · tokens
 * Marca de la web de IMPAK 10 FIGHT (web-impak10/css/tokens.css) en versión clara:
 * fondo hueso cálido, cabecera negra de marca, acento dorado, Anton + Geist + Geist Mono.
 */

:root {
  color-scheme: light;

  /* ── Superficies ─────────────────────────────────────────────────── */
  --color-paper:    oklch(97.5% 0.006 85);  /* fondo de la app: hueso cálido */
  --color-paper-2:  oklch(100% 0 0);        /* tarjetas, filas, campos */
  --color-paper-3:  oklch(94.5% 0.010 85);  /* rellenos suaves */
  --color-rule:     oklch(89% 0.012 85);
  --color-neutral:  oklch(50% 0.018 80);    /* texto secundario */
  --color-muted:    oklch(38% 0.018 80);
  --color-ink:      oklch(21% 0.015 80);    /* texto */

  /* ── Marca ───────────────────────────────────────────────────────── */
  --color-marca:        oklch(17% 0.014 80);  /* negro cálido del cartel: cabecera y tarjeta destacada */
  --color-sobre-marca:  oklch(95% 0.010 90);
  --color-accent:       oklch(80% 0.145 88);  /* dorado: fondos de botón, marcas */
  --color-sobre-accent: oklch(18% 0.015 80);  /* texto sobre dorado */
  --color-accent-texto: oklch(50% 0.115 80);  /* dorado bronce: texto dorado sobre claro */
  --color-accent-suave: oklch(80% 0.145 88 / 0.18);
  --color-focus:        oklch(70% 0.150 85);
  --glow: radial-gradient(ellipse 90% 28% at 50% -6%, oklch(86% 0.08 85 / 0.5), transparent 70%);

  /* ── Estados de la cuota ─────────────────────────────────────────── */
  --color-ok:          oklch(50% 0.13 150);
  --color-ok-suave:    oklch(72% 0.14 150 / 0.16);
  --color-ok-borde:    oklch(72% 0.14 150 / 0.55);
  --color-aviso:       var(--color-accent-texto);
  --color-aviso-barra: var(--color-accent);
  --color-aviso-suave: var(--color-accent-suave);
  --color-mal:         oklch(54% 0.19 30);   /* rojo tigre */
  --color-mal-suave:   oklch(62% 0.19 30 / 0.11);
  --color-mal-borde:   oklch(62% 0.19 30 / 0.45);
  --color-whatsapp:    oklch(50% 0.14 150);

  --sombra:     0 1px 2px oklch(30% 0.02 80 / 0.06), 0 2px 10px oklch(30% 0.02 80 / 0.05);
  --sombra-alta: 0 10px 30px oklch(25% 0.02 80 / 0.22);

  /* ── Tipografía ──────────────────────────────────────────────────── */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;

  /* ── Espacio · 4 pt ──────────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --gutter: 16px;

  /* ── Movimiento · Sport · sharp ──────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 90ms;
  --dur-short: 160ms;
  --dur-long:  300ms;

  /* ── Bordes ──────────────────────────────────────────────────────── */
  --rule-hair: 1px solid var(--color-rule);
  --radius:    6px;

  /* ── Alturas fijas ───────────────────────────────────────────────── */
  --alto-cabecera: 56px;
  --alto-pestanas: 64px;
  --seguro-abajo:  env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
}