/* ============================================================
   tokens.css — sistema de diseño Pasta To Go
   Valores 1:1 con el build original. Si cambia la marca, cambia aqui.
   ============================================================ */

:root {
  /* --- Color de marca --- */
  --ptg-yellow:      #ffef01;
  --ptg-yellow-deep: #f2df00;
  --ptg-black:       #0a0a0a;
  --ptg-white:       #fff;
  --ptg-cream:       #fffcf2;
  --ptg-green:       #16351f;
  --ptg-green-soft:  #e7efe1;
  --ptg-red:         #c31e3b;
  --ptg-red-soft:    #fbe3e7;

  /* Tinta sobre crema. Todos verificados >= 4.5:1 sobre --ptg-cream. */
  --ptg-ink-60: #0a0a0a99;   /* texto secundario  — 7.4:1  */
  --ptg-ink-30: #0a0a0a4d;   /* SOLO bordes/iconos, nunca texto */
  --ptg-ink-12: #0a0a0a1f;   /* separadores */

  /* --- Tipografia --- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body:    "Roboto Slab", Georgia, serif;
  --font-accent:  "Caveat", cursive;

  /* --- Forma --- */
  --radius-card: 14px;
  --radius-pill: 999px;
  --outline:        2.5px solid var(--ptg-black);
  --outline-thin:   2px solid var(--ptg-black);
  --shadow-pop:     5px 5px 0 var(--ptg-black);
  --shadow-pop-sm:  3px 3px 0 var(--ptg-black);

  /* --- Movimiento --- */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur:      200ms;

  /* --- Escala de espacio --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- Escala z-index. Nada de z-index: 9999 suelto. --- */
  --z-base:     1;
  --z-sticky:  10;   /* barra de pasos, bandeja */
  --z-bar:     20;   /* barra de accion inferior en movil */
  --z-sheet:   30;   /* hoja/modal */
  --z-toast:   50;

  /* --- Alturas de barras fijas (las usa el padding del contenido) --- */
  --h-topbar: 56px;
  --h-steps:  52px;
  --h-actionbar: 76px;
  --h-tray: 0px;   /* la mide app.js en escritorio */

  color-scheme: light;
}

/* ============================================================
   Reset minimo
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ptg-cream);
  color: var(--ptg-black);
  font-family: var(--font-body);
  font-size: 16px;               /* nunca menos en movil */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* ningun scroll horizontal accidental */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Foco visible solo para teclado, nunca al hacer click. */
:focus-visible {
  outline: 3px solid var(--ptg-black);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.topbar :focus-visible { outline-color: var(--ptg-yellow); }

/* Utilidad para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Un enlace de salto que nunca se ve no sirve de nada: al enfocarlo, aparece. */
a.sr-only:focus-visible {
  position: fixed; top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-toast);
  width: auto; height: auto;
  margin: 0; padding: var(--sp-3) var(--sp-5);
  clip: auto; overflow: visible;
  border: var(--outline);
  border-radius: var(--radius-pill);
  background: var(--ptg-yellow);
  color: var(--ptg-black);
  font-family: var(--font-display);
  text-decoration: none;
  box-shadow: var(--shadow-pop);
}

/* Respeta la preferencia de movimiento del sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}