/* Replace token values later with final designer hex/colors/scale. */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f9f9f9;
  --color-text: #111111;
  --color-muted: #555555;
  --color-accent: #c04a32;
  --color-border: #e2e2e2;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-forest: #115a4c;
  --color-burgundy: #5b1e1e;
  --lbeige: #c98551;
  --beige: #a87544;
  --red: #b83318;
  --lgreen: #4e8478;
  --green: #0d5a4d;
  --dgreen: #00241a;
  --dgreen-rgb: 0, 36, 26;

  /* Typography */
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --line-height-base: 1.6;
  --type-small: clamp(16px, 3.6vw, 18px);
  --type-default: clamp(18px, 4vw, 22px);
  --type-large: clamp(30px, 5.2vw, 40px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius & shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* Z-index */
  --z-cookie: 9000;
  --z-modal: 9500;
  --z-agegate: 9999;

  /* Hero */

  /* Header sizing */
  --header-height: clamp(72px, 10vh, 12.5vh);
  --header-padding-x: clamp(16px, 3vw, 48px);
  --header-link-gap: clamp(14px, 2.2vw, 34px);
  --header-column-gap: clamp(16px, 3vw, 64px);
  --header-gutter-x: clamp(16px, 4vw, 64px);
  --logo-height-desktop: clamp(72px, 9vh, 140px);
  --nav-mobile-bg: #0b2a1a;
  --header-top-pad: 5px;
  --header-hide-threshold: 12px;
  --header-pad-y: clamp(8px, calc(var(--header-height) * 0.05), 20px);
  --header-controls-gap: clamp(10px, 1.6vw, 20px);
  --lang-font-size: clamp(12px, 1.6vw, 16px);
  --header-burger-size: clamp(22px, 2.4vw, 32px);
  --mobile-nav-panel-w: clamp(220px, 40vw, 420px);
  --mobile-nav-item-gap: 10px;
  --nav-bg-rgb: var(--dgreen-rgb);
  --nav-item-bg: #0b2a1a;
  --nav-item-bg-80: rgba(var(--nav-bg-rgb), 0.80);
  --nav-sep-bg: rgba(var(--nav-bg-rgb), 0.80);
  --nav-item-grad: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
  --nav-item-radius: 10px;
  --nav-item-pad-y: 14px;
  --nav-sep-opacity: 0.55;
  --color-amber-dark: #b07a2a;
  --mobile-nav-item-w: 90vw;
  --mobile-nav-item-pad-y: calc(14px * 1.2);
  --mobile-nav-gap: 3px;
  --mobile-nav-sep-opacity: 0.9;
  --mobile-nav-link-font-scale: 1.3;
  --mobile-nav-fade-start: 80%;
  --mobile-nav-fade-end: 100%;
  --flavours-pad-x: 5vw;
  --flavours-gap: clamp(10px, 2.6vh, 22px);
  --flavours-catch-size: clamp(29px, 9.6vw, 51px);
  --flavours-body-size: clamp(18px, 3.6vw, 22px);
  --flavours-text: #ffffff;
  --flavours-content-top-shift: clamp(8px, 1.5vh, 18px);
  --flavours-gap-lg: clamp(20px, 5.2vh, 44px);
  --font-sans: "Google Sans", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Libre Baskerville", Georgia, Baskerville, "Times New Roman", serif;
  --flavours-notes-panel-pad-x: 8vw;
  --flavours-notes-panel-pad-y: 7vh;
  --flavours-notes-panel-pad: 2%;
  --flavours-notes-text-color: rgba(20, 20, 20, 0.72);
  --flavours-notes-gap: clamp(18px, 3.2vh, 30px);
  --flavours-notes-font-size: var(--flavours-body-size);
  --cocktails-mix-bg: #4a0f18;
  --bg-waves-yellow: url("/assets/elements/bg-waves-yellow.png");
  --asset-white-filter: brightness(0) invert(1);
}