@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Source+Sans+3:wght@400;600&display=swap");

/* Tacos La Bala design tokens. Every colour, type size, spacing step and motion value on the site reads from here. */
:root{
  /* colour: tortilla cream, logo red, dark roast, gold keyline */
  --canvas:#f4e9d8;          /* oklch(0.93 0.025 80) */
  --canvas-deep:#e9dcc6;     /* one step down for quiet sections */
  --accent:#a61616;          /* oklch(0.465 0.177 27.7), sampled from the logo */
  --accent-deep:#7d0f0f;     /* hover / pressed */
  --gold:#e5a721;            /* logo keyline, hairlines and small accents only */
  --n900:#241612;            /* oklch(0.2 0.02 40) */
  --n700:oklch(0.35 0.02 45);
  --n500:oklch(0.5 0.015 45);
  --n300:oklch(0.66 0.012 60);
  --n200:oklch(0.8 0.01 70);
  --n100:oklch(0.89 0.012 75);

  /* type: ratio 1.333, base 17 */
  --font-display:'Alfa Slab One',Rockwell,'Roboto Slab',serif;
  --font-body:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --t0:17px; --t1:21px; --t2:28px; --t3:38px; --t4:50px; --t5:67px; --t6:90px; --t7:120px;
  --t-hero:clamp(44px, 7.2vw, 104px);
  --t-title:clamp(38px, 5.2vw, 72px);
  --lh-tight:0.95; --lh-heading:1.05; --lh-body:1.5;
  --track-caps:0.14em;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
  --page-pad:clamp(20px, 5vw, 80px);
  --measure:32em;
  --frame:4px;
  --rule:2px; --rule-heavy:3px;
  --shadow-offset:0px;

  /* motion: ease-out quint everywhere */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --d-feedback:120ms; --d-state:250ms; --d-layout:400ms; --d-entrance:650ms; --d-exit:500ms;

  /* responsive tokens, phone first */
  --hero-cols:1fr;
  --hero-h:82svh;
  --hero-bleed:0px;
  --split-cols:1fr;
  --split-cols-wide:1fr;
  --callbar-display:grid;
  --callbar-pad:80px;
  --menu-cols:1fr;
  --gallery-min:160px;
  --nav-col:1 / -1;
}
@media (min-width:760px){
  :root{
    --hero-cols:7fr 3fr;
    --hero-h:88svh;
    --split-cols:3fr 7fr;
    --split-cols-wide:7fr 3fr;
    --callbar-display:none;
    --callbar-pad:0px;
    --menu-cols:1fr 1fr;
    --gallery-min:240px;
    --nav-col:2;
  }
}
@media (prefers-reduced-motion:reduce){
  :root{ --d-feedback:0ms; --d-state:0ms; --d-layout:0ms; --d-entrance:0ms; --d-exit:0ms; }
}

/* body resets */
html,body{margin:0;background:var(--canvas);color:var(--n900);font-family:var(--font-body);font-weight:400;font-size:var(--t0);line-height:var(--lh-body);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
a:hover{color:var(--accent-deep)}
img{display:block;max-width:100%}