@charset "UTF-8";
/* ==========================================================================
   EL BURGUÉS — tokens.css
   Los VALORES del sistema, nada más. Ninguna clase vive acá: las clases que
   realizan estos valores están en base.css.

   Fuentes canónicas de estos números:
     · Brand Book v15 (posicionamiento, logo, color, tipo, iconos, patrón, voz)
     · Sistema de color extendido v1 (códigos por medio, ratios WCAG)
     · Sistema de iconos v1 (grid, stroke, tamaños)
     · Caja · documento final 2026 y Precinto v2 (opacidades de aplicación real)

   Todo valor marcado DERIVADO no está en los documentos: es una lectura de
   trabajo, mínima, para que una pieza pueda componerse sin inventar CSS.
   Cualquier valor sin esa marca es literal del sistema.
   ========================================================================== */

:root {

  /* ── 1 · COLOR ─────────────────────────────────────────────────────────
     Cuatro colores. Cero excepciones. Proporción fija 60·25·10·5.
     No existen grises, cremas ni complementarios en el sistema: el negro
     a media opacidad se ve gris pero conceptualmente sigue siendo negro.
     Estos cuatro hex son la única fuente — no se repiten en ningún otro
     archivo ni se citan en prosa: se refiere el token por su nombre.       */

  --negro:    #212121;   /* 60% · Tierra. Fondos, tipografía, estructura, empaque.
                            Nunca #000000: es plano y cierra la imagen.        */
  --amarillo: #FFC200;   /* 25% · Pulso. Bloques hero, promos, badges, identidad. */
  --blanco:   #FFFFFF;   /* 10% · Respiro. Tipo sobre oscuro, fondos editoriales.
                            Blanco puro: ni crema, ni hueso, ni "blanco cálido". */
  --coral:    #FF5D31;   /*  5% · Chispa. Solo precios, CTAs y highlights.
                            Nunca fondo dominante. Nunca sustituye al amarillo. */

  /* Triplete RGB (Sistema de color extendido v1) para componer rgba(). */
  --negro-rgb:    33, 33, 33;
  --amarillo-rgb: 255, 194, 0;
  --blanco-rgb:   255, 255, 255;
  --coral-rgb:    255, 93, 49;

  /* Proporción del sistema: cota de superficie por color en cada pieza.
     Si una pieza tiene más amarillo que negro, está rota.                  */
  --prop-negro:    60%;
  --prop-amarillo: 25%;
  --prop-blanco:   10%;
  --prop-coral:     5%;
  --coral-area-max: 10%;  /* Don't del brand book: coral nunca supera el 10%
                             del área visual, ni como badge ni como bloque.  */

  /* Combinaciones aprobadas — las únicas cinco (fondo · tipo · ratio WCAG):
       1. MARCA     amarillo sobre negro   12.07:1  AA · AAA
       2. PRODUCTO  blanco  sobre negro    17.74:1  AA · AAA
       3. PROMO     negro   sobre amarillo 12.07:1  AA · AAA
       4. EDITORIAL negro   sobre blanco   15.34:1  AA · AAA
       5. ACENTO    coral   sobre negro     5.07:1  AA · AAA Large
                    (solo precio o CTA)
     Coral sobre blanco existe como acento pero rinde 3.03:1 → AA Large:
     solo en tamaño grande, nunca para texto corrido.
     Prohibidas: blanco/amarillo, coral/amarillo, amarillo/coral,
     amarillo/blanco, coral como fondo, cualquier gris.
     Única restricción de adyacencia del sistema: coral y amarillo nunca van
     pegados — siempre un buffer de negro o de blanco entre ambos.          */


  /* ── 2 · TIPOGRAFÍA ────────────────────────────────────────────────────
     Cuatro niveles con roles cerrados. DM Sans aparece en carpetas del
     proyecto pero el brand book no la usa: no se declara acá.              */

  --wordmark: "Blighia", serif;   /* sin fuentes de marca de respaldo: si Blighia no carga, el fallo se ve */
      /* EXCLUSIVAMENTE la palabra "EL BURGUÉS". La pieza canónica es el SVG
         del wordmark (logos/eb_wordmark*.svg); esta familia es para el caso
         raro de wordmark en texto vivo. Solo horizontal, nunca apilado.    */
  --display:  "Bebas Neue", Impact, "Arial Narrow", sans-serif;
      /* Nombres de burgers, headlines, frases grandes. El protagonista.    */
  --body:     "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* EXTENSIÓN — no está en el brand book v15, que declara 4 niveles sobre 3
     familias. Se suma como la voz del DATO (precio, badge, línea meta, kicker)
     porque Inter Regular no le da presencia a una cifra y porque una mono da
     cifras tabulares: la columna de precios de la carta alinea sola.
     Aprobada por el usuario el 2026-08-11. */
  --dato: "IBM Plex Mono", ui-monospace, monospace;
      /* Inter Regular: descripciones, precios, textos largos. Y en versales
         espaciadas (ver --tracking-util), el nivel UTILIDAD: categorías,
         etiquetas, datos técnicos.                                         */

  --tracking-wordmark: 0.002em;
      /* El brand book especifica "Tracking +2" sin unidad. Se lee en la
         unidad estándar de Adobe/Figma para tracking: 2/1000 em.
         PENDIENTE de confirmar con el equipo de marca si se quiso decir 2px. */
  --tracking-util: 0.12em;   /* DERIVADO: "Inter Caps espaciadas" no trae cifra. */

  --leading-stacked-min: 0.85;
  --leading-stacked-max: 0.95;
  --leading-stacked:     0.90;  /* punto medio exacto del rango declarado */
  --leading-display:     1;     /* DERIVADO: Bebas es condensada de caja alta;
                                   el leading apretado canónico lo aporta
                                   la técnica .stacked, no el nivel display. */
  --leading-body:        1.35;  /* DERIVADO: el sistema no fija interlínea de body. */


  /* ── 3 · ESCALA TIPOGRÁFICA ────────────────────────────────────────────
     En pt, tal como la declara el brand book (1pt = 1.333px si necesitas px).
     El sistema NO define una escala modular: define dos rangos y un ratio.  */

  --ghost-min:  120pt;
  --ghost-max:  200pt;
  --ghost-size: 160pt;   /* punto medio exacto del rango declarado */

  --display-min:  48pt;
  --display-max:  72pt;
  --display-size: 60pt;  /* punto medio exacto del rango declarado */

  --ratio-dominante: 4;  /* headline : descripción, mínimo 4:1 en tipo dominante */
  --corte-min: 20%;      /* sangrado del headline fuera del margen */
  --corte-max: 30%;      /* tope: más que esto y deja de leerse */
  --corte:     20%;      /* valor de trabajo, extremo conservador del rango */


  /* ── 4 · FORMA Y ESPACIO ───────────────────────────────────────────────
     El sistema es plano: sin bordes redondeados decorativos, sin sombras,
     sin degradados, sin outlines de tipo, sin texturas superpuestas.       */

  --radio:  0;
  --sombra: none;

  /* Iconos — Sistema de iconos v1 */
  --icon-grid:    24px;    /* viewBox 0 0 24 24, compartido por los 28 glifos */
  --icon-stroke:  1.75;    /* uniforme en todo el set, no se modifica por icono */
  --icon-cap:     round;   /* caps y joins redondos */
  --icon-inline:  16px;
  --icon-nav:     20px;
  --icon-base:    24px;
  --icon-card:    32px;
  --icon-hero:    48px;
  --icon-min:     14px;    /* mínimo absoluto: debajo el stroke se vuelve inestable */
  --icon-respiro:  8px;    /* respiro mínimo alrededor cuando se combina con tipo */

  /* Logo — tamaños mínimos por pieza (digital · impreso) */
  --min-simbolo:      24px;   --min-simbolo-impreso:   8mm;
  --min-sello:        28px;   --min-sello-impreso:    10mm;
  --min-wordmark:     12px;   --min-wordmark-impreso:  5mm;
  --respiro-logo:      0.5;   /* zona de respiro = ½ de la propia dimensión de
                                 la pieza. Nada puede invadirla.             */
  --sello-size:       96px;   /* DERIVADO: el sistema solo fija el mínimo (28px).
                                 96px es el watermark de trabajo sobre lienzo
                                 de 1080 px de ancho.                        */

  /* Patrón topográfico */
  --patron-tile-empaque:   100mm;
  --patron-tile-editorial: 200mm;
  --patron-stroke-min:    0.45mm;
  --patron-stroke-max:    0.60mm;

  /* Espacio — DERIVADO. El sistema declara un solo número de espacio
     (respiro de icono = 8px); esta escala son sus múltiplos. No es canónica. */
  --e1:  8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e6: 48px;
  --e8: 64px;
  --margen: var(--e8);   /* DERIVADO: margen de composición del lienzo social. */

  /* Zonas seguras — física del CANAL, no decisión de la pieza. Por defecto no
     hay ninguna (un impreso no tiene UI encima); cada lienzo declara la suya.
     Las respetan .firma y .sello, que son lo que se va al borde. */
  --zona-segura-alta: 0px;
  --zona-segura-baja: 0px;

  /* Lienzos sociales — px reales de export */
  --lienzo-story-w:    1080px;  --lienzo-story-h:    1920px;  /* 9:16 */
  --lienzo-feed-w:     1080px;  --lienzo-feed-h:     1350px;  /* 4:5  */
  --lienzo-cuadrado-w: 1080px;  --lienzo-cuadrado-h: 1080px;  /* 1:1  */


  /* ── 5 · OPACIDADES DEL SISTEMA ────────────────────────────────────────
     Son valores nombrados del sistema, no decisiones de pieza.            */

  /* Ghost type: el texto fantasma no se lee, se siente. */
  --op-ghost-min: 0.04;
  --op-ghost-max: 0.08;
  --op-ghost:     0.06;   /* punto medio exacto del rango declarado */
  --op-ghost-tope: 0.10;  /* Don't: por encima de esto compite con el headline */

  /* Sello circular como watermark (siempre esquina superior derecha). */
  --op-sello-foto-min: 0.30;
  --op-sello-foto-max: 0.50;
  --op-sello-foto:     0.40;   /* punto medio exacto del rango declarado */
  --op-sello-solido:   1;      /* sobre color sólido, 100% */

  /* Patrón topográfico, una opacidad por variante cromática. */
  --op-patron-amarillo-negro-min: 0.20;
  --op-patron-amarillo-negro-max: 0.30;
  --op-patron-amarillo-negro:     0.22;  /* valor real de la caja exterior */
  --op-patron-negro-amarillo-min: 0.85;
  --op-patron-negro-amarillo-max: 1.00;
  --op-patron-negro-amarillo:     0.90;  /* dentro del rango declarado */
  --op-patron-negro-blanco-min:   0.80;
  --op-patron-negro-blanco-max:   0.90;
  --op-patron-negro-blanco:       0.85;  /* punto medio exacto del rango */
  /* Nunca patrón al 100% sobre negro: se vuelve ruidoso.                  */

  /* Info secundaria sobre patrón (ala derecha de la caja: blanco al 88%). */
  --op-info-sobre-patron: 0.88;


  /* ── 6 · ÁTOMOS Y MOLDES ───────────────────────────────────────────────
     La escala de los átomos (la unidad mínima reutilizable) y de los moldes
     de pieza. Ningún documento fuente declara estos tamaños: el sistema solo
     declara dos rangos (ghost 120-200pt, display 48-72pt), un ratio (4:1) y
     un único número de espacio (respiro de icono, 8px). Por eso todo lo de
     abajo es DERIVADO salvo donde se cita la ley que lo fija.

     Un solo dial de escala. Los átomos no traen un tamaño propio: traen su
     RATIO contra --display-size, y base.css hace el calc() en el elemento.
     Así una pieza que redefine --display-size en su molde reescala todo el
     conjunto sin tocar un solo font-size, y las relaciones se mantienen.
     Es el mismo patrón que el sistema ya usaba con --ratio-dominante.

     Tiene que ser un ratio, no un tamaño ya calculado: verificado en Edge
     headless — un token declarado en :root como calc(var(--display-size)/N)
     resuelve el var() UNA vez, en :root, y hereda ese resultado ya fijo;
     redefinir --display-size más abajo no lo mueve. Con el ratio, en cambio,
     el calc() vive en el elemento y sí ve la redefinición.

     Única excepción, y es a propósito: --cifra-size está anclado al tope del
     rango display que declara el sistema, no al dial. Si reescalas el molde,
     la cifra no te sigue; ahí se redefine a mano.                          */

  --ratio-kicker: 5;
      /* DERIVADO · 12pt a escala default. La etiqueta que abre la
         composición: siempre por debajo del descriptor, nunca compite.     */

  --ratio-precio: 3;
      /* DERIVADO · 20pt a escala default — por encima del piso de coral
         sobre blanco (--coral-blanco-min), que es la única cota que el
         sistema sí declara para un precio de acento.                        */

  --ratio-meta: 6;
      /* DERIVADO · 10pt a escala default. Lo más chico del sistema.        */

  --ratio-item: 2;
      /* DERIVADO · 30pt a escala default. Nombre de producto cuando vive en
         una lista (carta) o en una ficha: ahí NO es headline, así que no
         entra en la técnica de tipo dominante ni le aplica el 4:1. Cuando el
         nombre sí es el headline de la pieza, se usa .dominante.
         El descriptor no tiene ratio propio: usa --ratio-dominante, porque
         su tamaño ES la ley del 4:1.                                        */

  --cifra-size: var(--display-max);
      /* 72pt: el extremo alto del rango display declarado. No se inventa una
         escala nueva para el numeral — por encima de 120pt ya es el rango
         del ghost type, que es otra técnica y va al 4-8% de opacidad.       */

  --coral-blanco-min: 18pt;
      /* Piso de tamaño de coral sobre blanco: 3.03:1 → AA Large, solo
         ≥18pt regular (o ≥14pt bold). No es DERIVADO: lo declara el sistema
         de color. Para texto corrido sobre blanco, siempre negro.           */

  /* Wordmark como firma de pieza (sobre negro el sello no existe). El ratio
     sale del viewBox real del SVG (0 0 800 130); el ancho de trabajo es
     DERIVADO, igual que --sello-size, y nunca baja del mínimo de 12px.      */
  --wordmark-ratio: 0.1681;   /* 111 / 660.31 — caja real de los glifos, medida con la fuente cargada */
  --firma-w: 220px;   /* DERIVADO: ancho de trabajo sobre lienzo de 1080px. */
  --firma-h: calc(var(--firma-w) * var(--wordmark-ratio));


  /* ── 7 · MOVIMIENTO ────────────────────────────────────────────────────
     TODO este bloque es DERIVADO. Ningún documento fuente de El Burgués
     declara movimiento: ni el Brand Book v15, ni el Sistema de color
     extendido v1, ni el Sistema de iconos v1, ni la Caja o el Precinto traen
     duraciones, easings, transiciones ni animaciones aprobadas. Lo de abajo
     es una lectura de trabajo derivada de dos cosas que sí están declaradas:

       · El sistema visual es plano — sin sombras, sin degradados, sin bordes
         redondeados decorativos. Si nada flota quieto, nada puede flotar
         moviéndose: no hay elevación, no hay zoom, no hay rebote.
       · La voz es seca — frases cortas que pesan, punto donde otros pondrían
         coma. Traducido: corte antes que transición, entrada breve y firme.

     Pendiente de aprobación de la marca. Espejado en brand.json → motion.  */

  --dur-corte:  0ms;    /* DERIVADO · el default del sistema: cambiar de estado
                           sin transición. Ante la duda, se corta.           */
  --dur-1:    120ms;    /* DERIVADO · micro-interacción: hover, focus, badge. */
  --dur-2:    180ms;    /* DERIVADO · entrada de un elemento suelto.          */
  --dur-3:    240ms;    /* DERIVADO · entrada de un bloque mayor. TOPE: no hay
                           duración más larga en el sistema.                  */

  --ease-seco:  cubic-bezier(.2, 0, 0, 1);
      /* DERIVADO · arranca rápido y frena en seco, sin colita. Ningún easing
         del sistema sale del rango 0-1 en Y: el rebote está prohibido.      */
  --ease-plano: linear;
      /* DERIVADO · para opacidad pura: sin curva, no hay qué amortiguar.    */

  --rise: var(--e1);    /* DERIVADO · 8px. Único desplazamiento de entrada,
                           siempre en Y y hacia arriba. El número no es libre:
                           es el respiro de icono, el único valor de espacio
                           que el sistema declara de verdad.                  */
  --stagger: 40ms;      /* DERIVADO · retardo entre hermanos de una secuencia. */
  --lift: 0;            /* DERIVADO · no hay elevación en hover: sin sombra,
                           nada puede levantarse. El hover responde en color.  */
}