/* tokens.css: los ÚNICOS colores, sombras, radios, tipografía y tiempos de la página (Le 2026-11-06: "estética tyb y
   como gacha"). Base: el front TYB (`Desktop/codex/TYB-youth-gear-pack-scroll/styles.css` + `tyb-skin.css`), medido en
   `design-ledger/pagina-2026-11-06/4-claude-plan-p1-cascara.md`. Un color nuevo va acá y en ningún otro archivo
   (tests/test-ui-assets.mjs lo hace cumplir). Fuentes del sistema por ahora (Le): los nombres de TYB van primero, así si
   llegan los archivos se ven solas. */
:root {
  /* el tapete azul de corte (igual que en el Wardrobe: en escritorio la tarjeta flota sobre él) y el papel GRIS del
     Wardrobe (P1.5, Le 2026-11-06: "Gris del Wardrobe" = la paleta de Project AC, tyb-wardrobe.css:29-30) */
  --mat: #1451ad;
  --mat-deep: #12245a;
  --paper: #f4f5f6;
  --paper-hi: #fafbfb;
  --seg: #eceef0;
  --line: rgb(17 17 17 / 9%);
  --white: #ffffff;
  /* tinta (los botones negros grandes siguen con --ink-bg, la tinta suave de tyb-skin.css:29-32) */
  --ink: #111111;
  --text: #111111;
  --muted: #56564f;
  --muted-2: #7a7d82;
  --focus: #006d86;
  --focus-ring: rgb(0 109 134 / 14%);
  /* estados: el banner amarillo y la alerta del Wardrobe (tyb-wardrobe.css:430-434) */
  --ok: #1c7a3e;
  --ok-bg: #e4efe3;
  --warn: #5a4300;
  --warn-bg: #fff3b8;
  --bad: #8a1240;
  --bad-bg: #fff5f5;
  --bad-line: rgb(138 18 64 / 18%);
  --mine-bg: #fffbe8; /* lo mío en el log: más suave que el aviso, para no competir con él */
  /* la grilla de 1000 TYB (vivo: un gris frío que se separa del papel gris) */
  --cell-alive: #c4cad2;
  --cell-bomb: #f0b429;
  --cell-urgent: #d8432f;
  --cell-dead: #3b3a3f;
  --cell-gone: #b9a7d6;
  --cell-mine: #1451ad;
  /* el latido del "ahora" (el teal del punto vivo del Wardrobe, tyb-skin.css:92) */
  --live: #2bb6a3;
  --ping: rgb(43 182 163 / 55%);
  --ping-0: rgb(43 182 163 / 0%);
  /* los íconos del sprite (`icons.svg`) */
  --spark: #ffb020;
  --gold: #e3a81e;
  --hot: #e5533d;
  --suit: #2b3140;
  --skin: #f1d3b3;
  --raise: #ffffff;
  /* profundidad (zippies, tyb-skin.css) */
  --ink-bg: linear-gradient(#202325, #151718 55%);
  --ink-bg-hover: linear-gradient(#2a2d30, #1a1d1f 55%);
  --ink-sh: inset 0 1px #ffffff1f, 0 4px 10px -6px rgb(21 23 24 / 45%);
  --ink-sh-hover: inset 0 1px #ffffff26, 0 6px 14px -7px rgb(21 23 24 / 50%);
  --thumb-bg: linear-gradient(#2c2f31, #151718 62%);
  --thumb-sh: inset 0 1px #ffffff40, 0 4px 10px -4px rgb(21 23 24 / 60%);
  --lift: inset 0 1px 1px #fffffff2, 0 0 0 1px rgb(11 11 11 / 4%), 0 8px 18px -12px rgb(11 11 11 / 40%);
  --lift-hover: inset 0 1px 1px #ffffff, 0 0 0 1px rgb(11 11 11 / 6%), 0 14px 26px -14px rgb(11 11 11 / 45%);
  --chip-on-sh: inset 0 1px #ffffff26, 0 3px 6px -4px rgb(21 23 24 / 45%);
  --chip-hover-sh: inset 0 1px 1px #fffffff2, 0 0 0 1px rgb(11 11 11 / 3%), 0 3px 6px -4px rgb(11 11 11 / 35%);
  --row-sh: inset 0 1px 1px #ffffff, 0 0 0 1px var(--line);
  --banner-sh: 0 14px 28px -18px rgb(5 14 40 / 45%);
  --soft: inset 0 1px 1px #fffffff2, 0 0 0 1px rgb(11 11 11 / 3%);
  --field: inset 0 1px 2px rgb(11 11 11 / 7%), 0 0 0 1px rgb(11 11 11 / 5%);
  --card-sh: inset 0 1px 1px #ffffff, inset 0 -14px 24px -18px #ffffffb3, 0 0 0 1px rgb(11 11 11 / 5%),
    0 34px 64px -30px rgb(5 14 40 / 65%), 0 14px 26px -18px rgb(5 14 40 / 40%);
  --frame-sh: 0 0 0 1px rgb(255 255 255 / 10%), 0 30px 70px -30px rgb(8 20 50 / 70%), 0 12px 24px -16px rgb(8 20 50 / 45%);
  --scrim: rgb(10 20 45 / 55%);
  /* forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-list: 14px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-pill: 999px;
  /* tipografía */
  --font: "Plus Jakarta Sans", system-ui, "Segoe UI", "Hiragino Sans", "Noto Sans", "Apple SD Gothic Neo", "Microsoft YaHei", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* movimiento (styles.css:41-49) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-latch: cubic-bezier(.34, 1.45, .5, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1); /* el que más usa el Wardrobe (tyb-skin.css:23) */
  --dur-press: .2s;   /* botones (tyb-skin.css:133) */
  --dur-sel: .24s;
  --dur-tint: .25s;   /* el fondo de una hoja (tyb-skin.css:171) */
  --dur-latch: .28s;  /* el cerrojo del switch */
  --dur-swap: .32s;
  --dur-pop: .42s;    /* una hoja que entra (tyb-skin.css:184) */
  --dur-rise: .6s;    /* una tarjeta que entra (tyb-skin.css:59) */
  --dur-spin: .8s;    /* el spinner (tyb-wardrobe.css:424-426) */
  --dur-ping: 1.8s;   /* el punto vivo (tyb-skin.css:90) */
  color-scheme: light;
}
/* movimiento reducido: sin duraciones (los movimientos de hover y al apretar se anulan al final de components.css).
   El spinner sigue girando, pero lento: es la única señal de "cargando" */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0s; --dur-sel: 0s; --dur-tint: 0s; --dur-latch: 0s; --dur-swap: 0s; --dur-pop: 0s; --dur-rise: 0s; --dur-spin: 2.4s; }
}