/* KindMX: tokens de diseño v2 (DESIGN.md §1 y bocetos en docs/bocetos). */
:root {
  /* Superficies */
  --night: #120c2b;
  --canvas: #f1f2f9;
  --paper: #ffffff;
  --paper-soft: #faf9fe;
  --line: #e3e1f0;
  --line-strong: #d9d5ea;
  --line-soft: #efedf7;
  --line-dashed: #b9b2d6;     /* botón punteado "Agregar otra cuenta" */
  --line-drop: #c9c2e8;       /* zona de subida */

  /* Texto */
  --ink: #1d1340;
  --body: #4b4466;
  --muted: #6b6585;
  --unit: #5b5378;            /* "MXN" junto al precio */
  --on-night: #ffffff;
  --on-night-muted: #c9c2e8;
  --on-night-soft: #e7e3f7;   /* texto secundario sobre --night o tarjetas */

  /* Acción */
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-ink: #5b21b6;
  --accent-soft: #ede5fd;
  --accent-line: #a78bfa;
  --accent-wash: #f6f2fe;     /* tarjeta-radio elegida */

  /* Estados */
  --ok: #15803d;   --ok-soft: #e8f6ee;
  --warn: #92400e; --warn-soft: #fdf3e2;
  --bad: #b42318;  --bad-soft: #fdecef;

  /* Rareza (fondos de tarjeta) */
  --r-common:    linear-gradient(180deg, #a3b1c6 0%, #6b7a93 55%, #3b4458 100%);
  --r-uncommon:  linear-gradient(180deg, #8ee05a 0%, #4fae25 55%, #24660f 100%);
  --r-rare:      linear-gradient(180deg, #4fb6ff 0%, #1b7fe0 55%, #0b4fa8 100%);
  --r-epic:      linear-gradient(180deg, #c27bff 0%, #8b3df0 55%, #4f1b9e 100%);
  --r-legendary: linear-gradient(180deg, #ffb35c 0%, #f07a1e 55%, #a3410b 100%);
  --r-icon:      linear-gradient(180deg, #5fe3e8 0%, #19a9b4 55%, #0b5f68 100%);
  --r-manual:    linear-gradient(180deg, #8b5cf6 0%, #6d28d9 55%, #3b1585 100%);
  --r-gold:      linear-gradient(180deg, #fbbf4a 0%, #e08a12 55%, #8a4b06 100%);
  --tile-shade: linear-gradient(to top, rgba(14,9,40,.88) 0%, rgba(14,9,40,.45) 30%, rgba(14,9,40,0) 52%);
  --tile-shade-m: linear-gradient(to top, rgba(14,9,40,.9) 0%, rgba(14,9,40,.45) 34%, rgba(14,9,40,0) 58%);
  --tile-strike: #d8d2f0;     /* V-Bucks anteriores tachados en la tarjeta */

  /* Velos y vidrio sobre --night */
  --scrim: rgba(18,12,43,.55);
  --scrim-strong: rgba(18,12,43,.6);
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.12);
  --glass-line: rgba(255,255,255,.28);
  --glass-line-2: rgba(255,255,255,.4);
  --tile-btn: rgba(255,255,255,.92);
  --tile-chip: rgba(255,255,255,.18);
  --banner-fade: linear-gradient(90deg, #120c2b 0%, rgba(18,12,43,.92) 38%, rgba(18,12,43,.25) 100%);
  --banner-fade-m: linear-gradient(180deg, rgba(18,12,43,.35) 0%, rgba(18,12,43,.95) 100%);
  --banner-pattern: repeating-linear-gradient(135deg, rgba(124,58,237,.20) 0px, rgba(124,58,237,.20) 2px, rgba(18,12,43,0) 2px, rgba(18,12,43,0) 14px);

  /* Sombras */
  --shadow-drawer: -24px 0 48px rgba(18,12,43,.25);
  --shadow-dialog: 0 24px 64px rgba(18,12,43,.35);
  --ring-cart: 0 0 0 3px var(--accent), 0 0 0 6px var(--accent-soft);

  /* Tipografía */
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-tight: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios */
  --r-pill: 999px; --r-tile: 14px; --r-card: 20px; --r-input: 12px; --r-dialog: 24px;
  --r-tile-m: 12px; --r-box: 16px;

  /* Layout */
  --max: 1280px; --gutter: 32px; --gutter-m: 16px;
  --ease: 180ms ease-out;
}