/* tokens.css — única fuente de verdad visual. Cambiá valores acá, no en styles.css */

/* Tinte por personaje: registrado para poder animarlo entre personajes */
@property --c-char { syntax: '<color>'; inherits: true; initial-value: #9600ff; }

:root {
  color-scheme: dark;

  /* Color */
  --c-bg: #07050d;              /* negro con tinte violeta */
  --c-text: #f3f0fa;
  --c-text-dim: #a9a3bc;        /* 8.3:1 sobre bg */
  --c-accent: #9600ff;          /* violeta de marca: no usar para texto chico */
  --c-accent-deep: #37008e;
  --c-accent-text: #c79bff;     /* violeta legible como texto */
  --c-pink: #ff0059;            /* solo detalles: índices, punteros, bordes */
  --grad-accent: linear-gradient(135deg, #9600ff 0%, #6a00e0 45%, #37008e 100%);
  --grad-line: linear-gradient(90deg, #9600ff 0%, rgba(150, 0, 255, 0) 70%);
  --c-panel: rgba(20, 12, 36, 0.72);
  --c-panel-solid: #150d26;
  --c-line: rgba(199, 155, 255, 0.18);
  --c-line-strong: rgba(242, 238, 255, 0.35);
  --c-glow: rgba(150, 0, 255, 0.35);
  --c-char: #9600ff;            /* cambia por personaje (ver abajo) */

  /* Tipografía */
  --f-title: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-hud: "Space Mono", ui-monospace, Menlo, monospace;

  /* Espaciado y formas */
  --gutter: 16px;
  --gap: 12px;
  --radius-sm: 8px;             /* chips, miniaturas */
  --radius-md: 12px;            /* fichas pequeñas */
  --radius-lg: 20px;            /* tarjetas y paneles */
  --radius-pill: 999px;         /* botones y chips de rol */
  --topbar-h: 48px;
  --bottombar-h: 56px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);       /* salida suave */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* salidas */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);    /* intro y CRT */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote corto al soltar un tap */
  --t-fast: 140ms;
  --t-med: 320ms;
  --t-slow: 640ms;
  --t-bar: 720ms;
  --stagger: 60ms;
}

/* Tinte de cada personaje (data-char en <html>) */
[data-char="creative"]   { --c-char: #9600ff; }
[data-char="editor"]     { --c-char: #6a00ff; }
[data-char="challenger"] { --c-char: #c400ff; }