/* ============================================================
   Tequila Mama Taqueria — design tokens
   Ported from the Claude Design project's _ds token files
   (colors / typography / fonts / spacing / base), with two
   substitutions noted inline where the source font files could
   not be extracted from the design project.
   ============================================================ */

/* -- Web fonts ------------------------------------------------
   Inria Sans (body/UI) and Yellowtail (script accent) load from
   Google; Rauda Slab Solid + Solid Unicase are self-hosted from
   the brand kit. The other six Rauda cuts are unused by the site.
   SUBSTITUTION: the brand's 'Beautiful Lovina' script could not be
   pulled out of the design project (it exceeds the transfer cap),
   so --font-script falls back to Yellowtail. Drop the real .ttf
   into assets/fonts/ and swap the @font-face to restore it.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Yellowtail&display=swap');

@font-face {
  font-family: 'Rauda Slab Solid';
  src: url('fonts/RaudaSlabSolid.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rauda Slab Solid Unicase';
  src: url('fonts/RaudaSlabSolidUnicase.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  /* -- Core brand (sampled from the logo, monogram and hero art) -- */
  --tmt-red: #F61E25;          /* Chile Red — primary, the script logo */
  --tmt-red-deep: #C8151B;     /* hover / pressed red */
  --tmt-red-ink: #8E0F14;      /* darkest red, text on cream */

  --tmt-teal: #1BA5B5;         /* Agua Teal — secondary, TMT badge */
  --tmt-teal-deep: #147E8B;
  --tmt-teal-ink: #0C5A64;

  --tmt-yellow: #FDCA0A;       /* Sol — accent, the sunburst */
  --tmt-yellow-light: #FDD322;
  --tmt-yellow-deep: #E3A600;

  --tmt-navy: #26348C;
  --tmt-navy-deep: #1B2568;
  --tmt-purple: #5B2A86;

  /* -- Warm neutrals -- */
  --tmt-ink: #211D1A;
  --tmt-charcoal: #3A3430;
  --tmt-stone: #6B635C;
  --tmt-sand: #B8ADA2;
  --tmt-cream: #FFFFFF;
  --tmt-cream-deep: #F0EEEC;
  --tmt-white: #FFFFFF;

  --tmt-success: #2E9E5B;
  --tmt-warning: var(--tmt-yellow-deep);
  --tmt-danger: var(--tmt-red);

  /* -- Semantic aliases -- */
  --color-brand: var(--tmt-yellow);
  --color-brand-contrast: var(--tmt-ink);
  --color-accent: var(--tmt-teal);
  --color-highlight: var(--tmt-red);

  --text-strong: var(--tmt-ink);
  --text-body: var(--tmt-charcoal);
  --text-muted: var(--tmt-stone);
  --text-on-brand: var(--tmt-ink);
  --text-on-dark: var(--tmt-cream);
  --text-link: var(--tmt-teal-deep);
  --text-link-hover: var(--tmt-red);

  --surface-page: var(--tmt-cream);
  --surface-card: var(--tmt-white);
  --surface-sunken: var(--tmt-cream-deep);
  --surface-dark: var(--tmt-ink);
  --surface-brand: var(--tmt-yellow);
  --surface-accent: var(--tmt-teal);
  --surface-highlight: var(--tmt-red);

  --border-subtle: var(--tmt-cream-deep);
  --border-default: var(--tmt-sand);
  --border-strong: var(--tmt-ink);

  /* -- Families -- */
  --font-rauda-solid: 'Rauda Slab Solid', 'Alfa Slab One', serif;
  --font-rauda-solid-unicase: 'Rauda Slab Solid Unicase', 'Alfa Slab One', serif;
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;
  --font-inria: 'Inria Sans', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-rauda-solid);
  --font-slab: var(--font-rauda-solid);
  --font-body: var(--font-inria);
  --font-condensed: var(--font-inria);
  --role-display-font: var(--font-rauda-solid);
  --role-heading-font: var(--font-rauda-solid);
  --role-body-font: var(--font-inria);
  --role-eyebrow-font: var(--font-inria);

  /* -- Type scale -- */
  --text-2xs: 0.6875rem; --text-xs: 0.75rem;  --text-sm: 0.875rem;
  --text-base: 1rem;     --text-lg: 1.125rem; --text-xl: 1.375rem;
  --text-2xl: 1.75rem;   --text-3xl: 2.25rem; --text-4xl: 3rem;
  --text-5xl: 4rem;      --text-6xl: 5.5rem;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-bold: 700;    --weight-black: 800;

  --leading-tight: 0.95; --leading-snug: 1.15;
  --leading-normal: 1.5; --leading-relaxed: 1.7;

  --tracking-tight: -0.01em; --tracking-normal: 0;
  --tracking-wide: 0.04em;   --tracking-wider: 0.12em;

  /* -- Spacing -- */
  --space-0: 0;      --space-1: 0.25rem; --space-2: 0.5rem;
  --space-3: 0.75rem;--space-4: 1rem;    --space-5: 1.5rem;
  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem; --space-9: 6rem;

  /* -- Radii / borders -- */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-pill: 999px;
  --border-hair: 1px; --border-thin: 2px; --border-bold: 3px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px rgba(33, 29, 26, 0.10);
  --shadow-md: 0 6px 16px rgba(33, 29, 26, 0.12);
  --shadow-lg: 0 18px 40px rgba(33, 29, 26, 0.16);
  --shadow-sticker: 4px 4px 0 rgba(33, 29, 26, 0.9);
  --shadow-sticker-teal: 4px 4px 0 var(--tmt-teal);
  --shadow-sticker-red: 4px 4px 0 var(--tmt-red);

  /* -- Layout / motion -- */
  --container-sm: 640px; --container-md: 960px;
  --container-lg: 1200px; --container-xl: 1360px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

/* ------------------------------------------------------------
   Base element styles
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

::selection { background: var(--tmt-yellow); color: var(--tmt-ink); }
img { max-width: 100%; display: block; }

/* Brand helpers reused by the interior page templates */
.tmt-eyebrow {
  font-family: var(--font-inria); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm); color: var(--color-accent);
}
.tmt-display {
  font-family: var(--font-display); text-transform: uppercase;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.tmt-surface-sun {
  background-color: var(--tmt-yellow);
  background-image: url('fondo_amarillento.webp');
  background-size: cover; background-position: center;
}
.tmt-surface-monogram {
  background-color: var(--tmt-white);
  background-image: url('fondo_tequilamama.webp');
  background-size: 520px auto; background-repeat: repeat;
}

/* ------------------------------------------------------------
   Compatibility layer
   The interior-page stylesheets (menupage.css, pages.css, menu.css) were
   inherited from the Starlight restaurant stack and reference a --tm-* palette.
   Map those onto the Tequila Mama tokens so every page reads as one brand.
   ------------------------------------------------------------ */
:root {
  --tm-royal:   var(--tmt-teal-ink);   /* section headers / structural accents */
  --tm-orange:  var(--tmt-yellow);     /* primary CTA fill */
  --tm-crimson: var(--tmt-red);        /* prices, urgency */
  --tm-cream:   var(--tmt-cream-deep); /* sunken surfaces */
  --tm-gold:    var(--tmt-yellow);
  --tm-sky:     var(--tmt-teal);
  --tm-ink:     var(--tmt-ink);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-inria);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }

/* Keyframes the interior templates still animate against */
@keyframes tm-kenburns { from { transform: scale(1.02) } to { transform: scale(1.12) translate(-1.5%, -1%) } }
@keyframes tm-marquee  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}