/* Birra Tirana design tokens
   Brand typefaces: Romic Std (display, original brand font) + Open Sans (body, original site font).
   Colours come from the bottle, the label and the beer itself. */

@font-face { font-family: "Romic Std"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/RomicStd-Light.woff2") format("woff2"), url("../fonts/RomicStd-Light.otf") format("opentype"); }
@font-face { font-family: "Romic Std"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/RomicStd-Bold.woff2") format("woff2"), url("../fonts/RomicStd-Bold.otf") format("opentype"); }

:root {
  /* Colour: bottle glass greens */
  --bt-green-950: #04210f;   /* cellar, deepest background */
  --bt-green-900: #062e18;
  --bt-green-800: #0a4f29;   /* bottle in shadow */
  --bt-green-700: #0c773b;   /* brand green, from the label */
  --bt-green-500: #2f9e5c;
  --bt-green-200: #b9dcc4;

  /* Colour: label gold and the beer */
  --bt-gold-500: #dfc157;    /* label gold */
  --bt-gold-300: #efdc98;
  --bt-gold-700: #8f7419;    /* gold for text on light grounds */
  --bt-amber-500: #d9a23a;   /* pilsner at 11 EBC */
  --bt-amber-700: #a8701c;

  /* Colour: foam and ink */
  --bt-foam-50: #f7f8f1;     /* foam white, page ground */
  --bt-foam-100: #eef0e4;
  --bt-ink-900: #0e1912;     /* text */
  --bt-ink-600: #47554b;     /* secondary text */
  --bt-line: #d8ddcf;

  /* Colour: product accents (used only on their own product) */
  --bt-kuqalashe-red: #c4202e;

  /* Semantic */
  --bg: var(--bt-foam-50);
  --fg: var(--bt-ink-900);
  --muted: var(--bt-ink-600);
  --accent: var(--bt-green-700);
  --on-dark: #f3f5ea;
  --on-dark-muted: #a9c3b0;

  /* Type */
  --font-display: "Romic Std", "Romic STD", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;
  --fs-12: .75rem;  --fs-14: .875rem; --fs-16: 1rem;    --fs-18: 1.125rem;
  --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem; --fs-48: 3rem;
  --fs-64: clamp(2.6rem, 6vw, 4rem);
  --fs-96: clamp(3.4rem, 9vw, 6rem);
  --fs-hero: clamp(5.5rem, 23vw, 22rem);
  --lh-tight: 1.02; --lh-head: 1.12; --lh-body: 1.65;
  --track-caps: .16em;

  /* Space: 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --content: 1240px;

  /* Shape */
  --r-label: 3px;   /* label corners, chips */
  --r-card: 14px;
  --r-pill: 999px;  /* pills, bottle caps */

  /* Depth */
  --shadow-card: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(0,0,0,.45);
  --glow-bottle: 0 0 120px rgba(223,193,87,.28);

  /* Motion */
  --ease-pour: cubic-bezier(.22, 1, .36, 1);     /* fast in, settles like a pour */
  --ease-foam: cubic-bezier(.34, 1.56, .64, 1);  /* small overshoot, a foam head rising */
  --t-fast: 160ms; --t-base: 320ms; --t-slow: 600ms; --t-scene: 1200ms;
}

/* Set by script from prefers-reduced-motion (the visitor can override it with the motion switch) */
html.reduce-motion { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-scene: 0ms; }