/* Dine Nation: design tokens (names follow the Figma variables; values from docs/homepage-spec.md). */

/* Fonts: one family per role, each covering Latin + Cyrillic + Greek, so EN / RU / EL pages render identically (no per-language companions).
   - Songer Condensed ExtraBold (supplied, /font) for all display text: headings, numbers, stickers, bubbles, stamp. Its cap height matches
     Mango Grotesque of the Figma file (0.71 vs 0.70) but it is ~50% wider, hence size-adjust 90%; line metrics are overridden to the
     values the Figma line boxes were drawn with (0.75 / 0.21) so headings keep their vertical position. One weight serves 600 and 700.
   - Manrope (Google Fonts, variable 200-800, OFL; latin / cyrillic / greek subsets, v20) for running text, replaces Poppins:
     geometric, same x-height (0.54) and ~3% taller caps; ~8% narrower, so lines are a little shorter than in the Figma file.
     No italic exists in the family: the browser slants it (font-synthesis). Line metrics are Poppins' so line boxes stay as designed. */
@font-face { font-family: "Songer"; src: url("../fonts/Songer-ExtraBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; size-adjust: 90%; ascent-override: 83.333%; descent-override: 23.333%; line-gap-override: 0%; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; ascent-override: 105%; descent-override: 35%; line-gap-override: 10%; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-cyrillic.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; ascent-override: 105%; descent-override: 35%; line-gap-override: 10%; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-greek.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: block; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E, U+0390-03A1, U+03A3-03FF; ascent-override: 105%; descent-override: 35%; line-gap-override: 10%; }

/* Fallbacks scaled to the metrics of the web fonts, so that if a font is ever late the layout does not jump.
   (Measured with fontTools: Songer avg advance 0.38em at 90% / ascent 0.75 / descent 0.21 after the overrides; Manrope 0.47em / 1.05 / 0.35.) */
@font-face { font-family: "Songer Fallback"; src: local("Impact"), local("Arial Narrow"), local("Arial Nova Condensed"); size-adjust: 86%; ascent-override: 87%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 94%; ascent-override: 112%; descent-override: 37%; line-gap-override: 10.6%; }

:root {
  /* Colours */
  --typography-primary: #2b2e35;
  --typography-secondary: #ffffff;
  --typography-tertiary: #ffcc00;
  --typography-quarternary: #9ea9b2;
  --background-primary: #ffffff;
  --background-secondary: #191919;
  --button-primary: #ffcc00;
  --elements-primary: #ffcc00;
  --elements-secondary: #00a22b;
  --elements-tertiary: #ffa1d5;
  --elements-quarternary: #2b2e35;
  --elements-lines: #bcc1c5;
  --overlay-shadow: rgba(0, 0, 0, 0.6);
  /* Interaction colours: from the UI-kit page of Dine-website.fig (hover variants, error text) */
  --button-hover: #ffae00;
  --elements-hover: #676c79;
  --alerts-error: #ff2f2f;
  --transition: 0.15s ease;

  /* Fonts */
  --font-display: "Songer", "Songer Fallback", "Arial Narrow", Impact, sans-serif;
  --font-sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sticker: var(--font-display);

  /* Type scale (desktop values from Figma) */
  --fs-h1: 100px;
  --fs-h2: 80px;
  --fs-stat: 62px;
  --fs-title: 46px;
  --fs-footer-title: 42px;
  --fs-item: 40px;
  --fs-text: 18px;
  --fs-text-sm: 16px;
  --fs-text-xs: 14px;
  --ls-text: 0;   /* Figma: -0.02em for Poppins; Manrope is narrower and needs none */

  /* Layout */
  --container: 1200px;
  --container-footer: 1200px;
  --content-offset: 329px;
  --content-width: 971px;
  --gutter: 20px;
  --section-space: 160px;

  /* Controls */
  --control-height: 56px;
  --radius: 8px;
  --border-width: 1px;
  --button-pad-x: 36px;
  --shadow-popup: 0 4px 6.15px rgba(0, 0, 0, 0.15);
}