/* Bistro Pergola - tokens + base. Palette derived from their real world:
   menu-board black + citron headers, facade script red, SUP yellow, lake,
   pines, sun-bleached stucco. Contract: _lead-pergola/_spec/DESIGN.md */

:root {
  /* Sticky header height, a real constant so the hero can subtract it and the
     two together fill exactly one viewport. Taller on mobile: the 44px menu
     button sets the floor there, the wordmark does on desktop. */
  --nav-h: 65px;
  --paper: #F7F1E3;
  --paper-deep: #EFE5CE;
  --ink: #20211B;
  --ink-soft: #5A5B4F;
  --board: #16170F;
  --board-text: #F4F4E6;
  --board-mut: #BDBEA6;
  --citron: #EDEF3C;
  --slunce: #F0B429;
  --slunce-deep: #D99C12;
  --cerven: #C2402F;
  --hladina: #8FBFCF;
  --hloubka: #23596B;
  --dno: #102830;
  --dno-text: #EDF4F0;
  --boro: #40603C;
  --terakota: #C96F4A;
  --paper-card: #FFFDF7;
  --water-text: #F2F7F5;
  --ink-rgb: 32, 33, 27;
  --paper-rgb: 247, 241, 227;
  --citron-rgb: 237, 239, 60;
  --cerven-rgb: 194, 64, 47;
  --boro-rgb: 64, 96, 60;
  --board-text-rgb: 244, 244, 230;
  --dno-text-rgb: 237, 244, 240;
  --water-text-rgb: 242, 247, 245;
  --hair: rgba(var(--ink-rgb), .14);
  --radius: 14px;
  --shadow: 0 18px 40px -18px rgba(var(--ink-rgb), .35);
  --font-display: 'Archivo', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Segoe UI', Tahoma, sans-serif;
  --font-chalk: 'Mynerve', 'Segoe Script', cursive;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }

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

a { color: inherit; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--slunce);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(var(--ink-rgb), .55);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  :root { --nav-h: 73px; }
}