/* Loja Pasta & Vino tokens. Source of truth: brand/tokens.json (keep in sync). */

@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-italic-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "League Spartan";
  src: url("../fonts/league-spartan-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand, sampled from the logo file and the facade */
  --giallo: #EEB52E;        /* the oval: Instagram avatar, printed menu, the sign by day */
  --verde: #2F3F26;         /* door and window frames */
  --tinta: #2E1E0D;         /* logo ink; all text on light */

  /* support */
  --parede: #ECE2C4;        /* facade wall by day, lifted out of the shade */
  --pomodoro: #AF4E2D;      /* tomato on the bruschetta; spicy tag, errors */

  /* neutrals, from the calcada and the lioz door frames */
  --carta: #FBF8F1;         /* the printed menu's paper; page background */
  --pedra: #D2CABB;         /* 1px rules on light */
  --pedra-forte: #8A8176;   /* form borders, 3:1 on carta */
  --basalto: #5E5852;       /* secondary text on light */
  --pedra-escura: #4A5A40;  /* 1px rules on verde */

  /* roles */
  --bg: var(--carta);
  --fg: var(--tinta);
  --fg-2: var(--basalto);
  --rule: var(--pedra);
  --accent: var(--giallo);
  --focus: var(--tinta);

  /* type */
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "League Spartan", "Futura", "Century Gothic", Arial, sans-serif;
  --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem);
  --t-h2: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-body: 1.125rem;       /* Alegreya runs small: 18px reads like 16px elsewhere */
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;     /* League Spartan capitals, the sign's PASTA / VINO */
  --track-label: 0.16em;
  --lh-body: 1.55;
  --lh-tight: 1.05;

  /* space: 4px base, steps widen as they climb */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1240px;
  --measure: 66ch;

  /* radius: square like the printed menu, oval like the sign */
  --r-0: 0;
  --r-1: 2px;               /* photos, inputs */
  --r-pill: 999px;          /* buttons and tags only: the oval of the sign */

  /* depth: none. Rules and colour blocks separate things. */

  /* motion */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in: cubic-bezier(.55, 0, .75, .2);
  --d-1: 140ms;             /* hover, press */
  --d-2: 220ms;             /* menus, tabs, underline */
  --d-draw: 900ms;          /* the oval drawing itself, once */
  --d-menu-in: 340ms;       /* mobile menu opens: drops out from under the bar */
  --d-menu-out: 200ms;      /* and closes the same way, faster */
  --d-menu-step: 30ms;      /* stagger between the menu rows */

  /* page open and scroll: slower than UI feedback, because they are read, not pressed */
  --e-reveal: cubic-bezier(.16, 1, .3, 1);   /* expo-out: long travel that lands softly */
  --e-wipe: cubic-bezier(.25, 1, .5, 1);     /* quart-out: the edge moves at once, then slows to a stop */
  --d-fade: 480ms;          /* opacity of anything that rises */
  --d-rise: 720ms;          /* text blocks rising into place */
  --d-words: 720ms;         /* each word of a page title, out of its own mask */
  --d-shutter: 900ms;       /* a photo rising inside its frame, like the shop's roller shutter */
  --d-settle: 1500ms;       /* the photo's slight zoom settling, under the shutter */
  --step: 70ms;             /* between things that arrive together */
  --rise: 18px;

  --nav-h: 68px;
  --tap: 44px;
}