/* ==========================================================================
   tokens.css · Sistema de diseño de PlateScale (v3 · "Comanda")
   --------------------------------------------------------------------------
   Concepto: el ticket de cocina como lenguaje visual.
   La página es una barra de acero; la información llega impresa en papel
   térmico, como una comanda o un corte de caja. El sello rojo marca lo que
   importa (el corte cuadrado, el plato que pierde dinero, el plan elegido).

   Color
   - Acero:  fondo general, la barra de la cocina.
   - Papel:  papel térmico; toda la información "impresa".
   - Tinta:  la impresión sobre el papel.
   - Sello:  rojo de sello de goma; único acento.
   - Niebla: texto secundario sobre acero.

   Tipografía
   - IBM Plex Mono: texto, interfaz y tickets (la letra de la impresora).
   - Barlow Condensed: titulares y totales, como el encabezado de una comanda.
   ========================================================================== */
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  /* Color */
  --acero: #232627;
  --acero-2: #2c3031;        /* superficies sobre acero */
  --acero-3: #3b4041;        /* líneas sobre acero */
  --papel: #f7f7f4;
  --papel-2: #ecece7;        /* papel en sombra */
  --tinta: #161616;
  --tinta-2: #55585a;        /* texto secundario sobre papel (7:1) */
  --sello: #c4321c;
  --sello-2: #a82a17;        /* hover */
  --luz: #f4f4f0;            /* texto sobre acero */
  --niebla: #a9aeac;         /* secundario sobre acero (7:1) */
  --ok: #1e6e4a;

  /* Tipografía */
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-h2: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem);
  --fs-h1: clamp(3.2rem, 1.4rem + 5.6vw, 7rem);
  --fs-total: clamp(4rem, 2.4rem + 5vw, 7.5rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 5rem;  --s-9: 8rem;

  --wrap: 1280px;
  --gutter: clamp(16px, 5vw, 96px);
  --nav-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 320ms;
  --t-slow: 650ms;

  --focus: 0 0 0 2px var(--acero), 0 0 0 4px var(--luz);
  color-scheme: dark;
}