/* Tokens de ticketnai. Se enlazan en el <head> y se heredan al shadow DOM de
   cada componente. Tema claro por defecto, oscuro con data-theme="dark" o por
   preferencia del sistema. Ningún componente usa colores sueltos: solo tokens. */
:root {
  /* Roles base */
  --color-bg: #eceee8;
  --color-surface: #f8f9f5;
  --color-text: #1e2330;
  --color-text-muted: #5b6170;
  --color-divider: #ced2c7;
  --color-accent: #3b2ed0;
  --color-accent-ink: #ffffff;
  --color-stage: #dfe2d9;
  --color-sel: #e3e0ff;

  /* Estados */
  --color-ok: #1e7a46;
  --color-warn: #9a5a00;
  --color-bad: #b3261e;

  /* Consola de Puerta (siempre oscura) */
  --color-console: #151a26;
  --color-console-2: #1e2536;
  --color-console-ink: #f3f5f9;
  --color-console-dim: #9aa4ba;
  --color-go: #3ddc84;

  /* Tipos de entrada */
  --color-type-gen: #3b2ed0;
  --color-type-vip: #c9a227;
  --color-type-bks: #7c3aed;

  /* Liquid Glass y luz ambiental */
  --glass: rgb(255 255 255 / .58);
  --glass-brd: rgb(255 255 255 / .75);
  --glass-hi: rgb(255 255 255 / .9);
  --glass-sh: 0 12px 32px -14px rgb(30 35 48 / .28);
  --amb1: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --amb2: rgb(61 220 132 / .10);

  /* Tipografía */
  --font-heading: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-wallet: -apple-system, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;

  /* Espaciado, radios y sombras */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-md: 0 14px 34px -26px rgb(30 35 48 / .35);
  --shadow-pass: 0 18px 40px -18px rgb(0 0 0 / .45);
  --ease-out: cubic-bezier(.2, .85, .25, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-bg: #161922;
  --color-surface: #1f232d;
  --color-text: #e8ebe3;
  --color-text-muted: #9ba1ad;
  --color-divider: #323848;
  --color-accent: #8f86ff;
  --color-accent-ink: #14121f;
  --color-stage: #11131a;
  --color-sel: #2a2752;
  --color-ok: #5ccb8a;
  --color-warn: #e5a84b;
  --color-bad: #ff8a80;
  --color-console: #0d1018;
  --color-console-2: #171c29;
  --glass: rgb(38 43 56 / .55);
  --glass-brd: rgb(255 255 255 / .12);
  --glass-hi: rgb(255 255 255 / .16);
  --glass-sh: 0 14px 34px -14px rgb(0 0 0 / .7);
  --amb2: rgb(61 220 132 / .06);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #161922;
    --color-surface: #1f232d;
    --color-text: #e8ebe3;
    --color-text-muted: #9ba1ad;
    --color-divider: #323848;
    --color-accent: #8f86ff;
    --color-accent-ink: #14121f;
    --color-stage: #11131a;
    --color-sel: #2a2752;
    --color-ok: #5ccb8a;
    --color-warn: #e5a84b;
    --color-bad: #ff8a80;
    --color-console: #0d1018;
    --color-console-2: #171c29;
    --glass: rgb(38 43 56 / .55);
    --glass-brd: rgb(255 255 255 / .12);
    --glass-hi: rgb(255 255 255 / .16);
    --glass-sh: 0 14px 34px -14px rgb(0 0 0 / .7);
    --amb2: rgb(61 220 132 / .06);
    color-scheme: dark;
  }
}