/* ---------------------------------------------------------------------
 * Tokens del Design System — Radar TCG
 * Doble tema: oscuro (default) y claro. Toggle via [data-theme="light"]
 * --------------------------------------------------------------------- */
:root {
  /* === Tipografía === (con carácter — evita el "Inter" genérico de IA) */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* === Escala tipográfica ARQUITECTÓNICA ===
     Contraste dramático (hasta ~8:1) — el rasgo nº1 que separa "premium" de
     "frontend IA". El display GRITA; el cuerpo es íntimo. */
  --fs-display: clamp(58px, 9vw, 124px);   /* héroes, precio rey, año ancla */
  --fs-h1:      clamp(40px, 5.4vw, 78px);
  --fs-h2:      clamp(28px, 3.6vw, 46px);
  --fs-h3:      22px;
  /* Escala de CUERPO (audit 12-jun: no existía — había 15 px-steps ad-hoc y la
     información de decisión vivía a 11px). Tres niveles de LECTURA: nada que
     deba leerse baja de --fs-caption; por debajo solo etiquetas de una palabra. */
  --fs-body:    15px;     /* prosa principal: explicaciones, lore, analista */
  --fs-note:    13.5px;   /* notas con contenido: caveats, desgloses, ayudas */
  --fs-caption: 12.5px;   /* mínimo legible: meta, disclaimers, frescura */
  --tracking-tight:   -.03em;
  --tracking-tighter: -.055em;

  /* === Brand Pokémon (no cambia con tema) === */
  --poke-red:    #EE1515;
  --poke-red-d:  #B81212;
  --poke-gold:   #FFCB05;
  --poke-gold-d: #E0AF00;
  --poke-blue:   #3D7DC8;
  --poke-ink:    #1A1A1C;

  /* === FIRMA DE MARCA — dirección "Bloomberg elegante" ===
     El arcoíris ya NO es la firma del chrome (era el tell nº1 de "look IA"):
     titulares, bordes y botones usan un metálico cálido CONTENIDO (hueso→latón).
     El iridiscente AUTÉNTICO se RESERVA al canto de la carta (--iridescent):
     el brillo se gana, no se reparte. */
  --lustre-foil: linear-gradient(180deg, #F6F2FB 0%, #E7C15A 135%);
  --lustre-foil-soft: linear-gradient(180deg,
    rgba(246,242,251,.7), rgba(231,193,90,.55));
  /* Iridiscente real — EXCLUSIVO del foil de la carta (nunca en chrome/titulares) */
  --iridescent: linear-gradient(115deg,
    #E7C15A 0%, #E07AB0 30%, #9B7BFF 55%, #4FD0E6 78%, #8CF0A8 100%);
  --ember: #C98A3A;   /* acento cálido contenido */
  /* Latón (brass): acento metálico del chrome — titulares, filetes, CTAs.
     Cálido y contenido; NUNCA arcoíris. El iridiscente queda para la carta. */
  --brass:    #C9A86A;
  --brass-d:  #9C7F4E;
  --brass-l:  #E4C98C;
  /* Sombras de marca NEUTRAS (sin halos de color: los glows delataban "IA") */
  --glow-gold: 0 10px 34px rgba(0,0,0,.45);
  --glow-foil: 0 14px 44px rgba(0,0,0,.55);

  /* === Tipos de energía (no cambian) === */
  --type-fire:      #E64646;
  --type-water:     #3D7DC8;
  --type-grass:     #3FA66B;
  --type-lightning: #F4C20D;
  --type-psychic:   #B45CCB;
  --type-fighting:  #C7461A;
  --type-dark:      #3A3540;
  --type-metal:     #8C9BA5;
  --type-dragon:    #C9A227;
  --type-fairy:     #E673A3;
  --type-colorless: #C9C9C9;

  /* === Rarezas === */
  --rar-common:    #7B8497;
  --rar-uncommon:  #4A9D5F;
  --rar-rare:      #C9A227;
  --rar-double:    #B79451;
  --rar-ultra:     #5B7DCC;
  --rar-illus:     #C77AB8;
  --rar-sir:       #E04E8C;
  --rar-hyper:     #D2A03B;
  --rar-acespec:   #38B7AB;

  /* === Estados financieros === */
  --up:         #10B981;
  --up-d:       #047857;
  --down:       #EF4444;
  --down-d:     #991B1B;
  --warn:       #F59E0B;

  /* === Espaciado === */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* === Radius === */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* === Layout === */
  --nav-h: 64px;
  --container: 1400px;
  --container-narrow: 1100px;

  /* === Motion === */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .15s; --t-mid: .3s; --t-slow: .6s;
}

/* ─────────────────────────────────────────────────────────────────────
 * TEMA OSCURO (default)
 * ───────────────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"] {
  /* Near-black CÁLIDO tipo terminal (tinta sobre obsidiana, no azul-violeta frío).
     Lectura de "libro de cuentas iluminado": el dato manda, el fondo se aparta. */
  --bg-deep:    #060605;
  --bg-base:    #0A0908;
  --bg-raised:  #131110;
  --bg-elev:    #1A1714;
  --bg-overlay: rgba(8,7,6,.93);

  --border:        #2A241C;   /* filete hairline cálido (regla de ledger) */
  --border-h:      #3A3128;
  --border-strong: #574A3A;

  --text:      #F6F2FB;
  --text-2:    #CFC6DC;
  --text-3:    #948AA8;
  /* mute: subido de #645A78 (~3:1, fallaba AA en los disclaimers/frescura donde
     más se usaba) a un gris que pasa 4.5:1 sobre --bg-base y --bg-elev. */
  --text-mute: #837A95;
  /* Alias usados por componentes (antes eran tokens FANTASMA que caían a herencia) */
  --text-1:   var(--text);
  --text-dim: var(--text-3);
  --red:      var(--down);

  --up-bg:      rgba(16,185,129,.14);
  --down-bg:    rgba(239,68,68,.14);
  --warn-bg:    rgba(245,158,11,.14);

  /* Sombras neutras y crispadas (sin tinte de color: profundidad, no glow) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 6px 18px rgba(0,0,0,.55);
  --shadow-3: 0 18px 44px rgba(0,0,0,.66);
}

/* ─────────────────────────────────────────────────────────────────────
 * TEMA CLARO
 * ───────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg-deep:    #E4E9F2;
  --bg-base:    #F4F6FB;
  --bg-raised:  #FFFFFF;
  --bg-elev:    #F0F3F9;
  --bg-overlay: rgba(255,255,255,.92);

  --border:        #D4DAE8;   /* algo más marcado: el hairline a #DEE3EE casi no se veía */
  --border-h:      #B5BFD3;
  --border-strong: #8B99B6;   /* ~2.6:1 vs blanco: separador fuerte legible */

  --text:      #14181F;
  --text-2:    #3A4358;
  /* AA sobre claro: #6B7896 daba ~4.0-4.4:1 (fallaba 4.5 en texto normal: meta,
     captions, ejes). Bajado a un gris que pasa 4.5:1 en todas las superficies. */
  --text-3:    #586480;
  /* mute claro: #98A3BC daba ~2.6:1 y #7A86A1 ~3.3:1 — ambos ilegibles en
     disclaimers/frescura. A #566280 pasa 4.5:1 (texto normal) sobre claro. */
  --text-mute: #566280;

  /* Semánticos AA en CLARO: las versiones neón (#10B981/#EF4444/#F59E0B) dan
     2-3.5:1 como TEXTO sobre blanco (ilegibles en .port-stat, badges, tablas
     fiscales, movers…). Se oscurecen SOLO en claro a tonos que pasan AA y siguen
     leyéndose como verde/rojo/ámbar (los fondos *-bg y los glows no cambian). */
  --up:         #047857;
  --down:       #C81E1E;
  --warn:       #9A4D06;

  --up-bg:      rgba(16,185,129,.18);
  --down-bg:    rgba(239,68,68,.18);
  --warn-bg:    rgba(245,158,11,.18);

  --shadow-1: 0 1px 2px rgba(20,24,31,.08);
  --shadow-2: 0 4px 14px rgba(20,24,31,.12);
  --shadow-3: 0 12px 32px rgba(20,24,31,.18);
}

/* ─────────────────────────────────────────────────────────────────────
 * TEMA CLARO — contraste de ACENTOS-como-texto (oro/latón)
 * El oro de marca (--poke-gold) y el latón (--brass/--brass-l) deben seguir
 * BRILLANTES como relleno (botones, cintas, bordes, puntos, anillo de foco):
 * por eso NO se tocan esos tokens. Pero como COLOR DE TEXTO sobre claro dan
 * 1.3-2.3:1 (ilegibles). Aquí se recolorean SOLO los usos de texto a un oro/
 * latón oscuros que pasan AA, sin afectar a los rellenos.
 * ───────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --gold-ink:  #7A5E00;   /* oro legible como texto (≥5:1 sobre claro) */
  --brass-ink: #6E5830;   /* latón legible como texto (≥5.5:1 sobre claro) */
}
/* Oro-como-texto → oro tinta (los bordes/fondos/puntos oro NO entran aquí) */
:root[data-theme="light"] .tkr__item:hover,
:root[data-theme="light"] .hero__pivot-tag,
:root[data-theme="light"] .hero__claims a,
:root[data-theme="light"] .pricing-card--pro .pricing-card__name,
:root[data-theme="light"] .pricing-card__founding,
:root[data-theme="light"] .freshness.is-stale,
:root[data-theme="light"] .set-hero__subtitle,
:root[data-theme="light"] .lore__body h4,
:root[data-theme="light"] .lore-illustrators h4,
:root[data-theme="light"] .legal-body a,
:root[data-theme="light"] .chase__price,
:root[data-theme="light"] .port-stat__value--locked,
:root[data-theme="light"] .port-stat__pro,
:root[data-theme="light"] .set-potential.is-mid .set-potential__num,
:root[data-theme="light"] .rot-card--warm .rot-card__score-n,
:root[data-theme="light"] .tier-row__stat--win,
:root[data-theme="light"] .cmp-champions-cta__arrow,
:root[data-theme="light"] .staple__share b,
:root[data-theme="light"] .badge--gold,
:root[data-theme="light"] .fiscal-wash,
:root[data-theme="light"] .nav__account.is-pro .nav__account-plan,
:root[data-theme="light"] .account__plan.is-pro,
:root[data-theme="light"] .account__upsell h4,
:root[data-theme="light"] .pro-lock__title {
  color: var(--gold-ink);
}
/* Latón-como-texto → latón tinta (los bordes latón en hover NO entran aquí) */
:root[data-theme="light"] .chip--active,
:root[data-theme="light"] .badge--brass,
:root[data-theme="light"] .artist-card__metrics .m--val b,
:root[data-theme="light"] .detail__artist,
:root[data-theme="light"] .artist-set__count,
:root[data-theme="light"] .deck__cost-val,
:root[data-theme="light"] .deck-card__price,
:root[data-theme="light"] .staple__price,
:root[data-theme="light"] .boxc__stat span,
:root[data-theme="light"] .rot-card__legal--out {
  color: var(--brass-ink);
}

/* Transición suave al cambiar de tema */
body, .nav, .card-tile, .feature, .set-card, .modal, .toolbar, .kpi,
.chart-wrap, .chart-kpis, .input, .select, .btn, .badge, .chip {
  transition: background-color var(--t-mid), border-color var(--t-mid),
              color var(--t-mid), box-shadow var(--t-mid);
}