/* Fonts, self-hosted (latin subset); paths are relative to /assets/css/ */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/yellowtail-latin.woff2") format("woff2"); }

/* BREWJOY design tokens
   Palette sampled from the Lager/Strong bottle and can labels.
   Rule of thumb: bright teal is a surface, never a text colour on light;
   text on teal is navy. Copper belongs to Strong only. */

:root {
  /* Brand (raw, from packaging) */
  --bj-navy: #0A2742;        /* lager label field */
  --bj-teal: #1AA29B;        /* label teal */
  --bj-teal-deep: #0F6F6A;   /* teal for text/links on light (5.5:1) */
  --bj-yellow: #F8CE48;      /* diagonal band */
  --bj-copper: #743824;      /* strong label field */
  --bj-amber: #B07D46;       /* bottle glass */
  --bj-ice: #F4F7F6;         /* label white */
  --bj-white: #FFFFFF;
  --bj-slate: #4A5D6E;       /* secondary text on light (6.3:1) */

  /* Purpose */
  --color-bg: var(--bj-ice);
  --color-surface: var(--bj-white);
  --color-text: var(--bj-navy);
  --color-text-muted: var(--bj-slate);
  --color-link: var(--bj-teal-deep);
  --color-accent: var(--bj-yellow);
  --color-brand: var(--bj-teal);
  --color-on-brand: var(--bj-navy);
  --color-inverse-bg: var(--bj-navy);
  --color-inverse-text: var(--bj-ice);
  --color-line: rgba(10, 39, 66, 0.14);
  --color-line-strong: rgba(10, 39, 66, 0.32);
  --color-focus: var(--bj-teal-deep);
  --color-error: #B3261E;
  --color-success: var(--bj-teal-deep);

  /* Product accents */
  --lager: var(--bj-navy);
  --strong: var(--bj-copper);

  /* Type */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Yellowtail", cursive;

  /* Fluid scale, major third (1.25) on a 17px body */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.3vw, 1.33rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.66rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --step-5: clamp(3.6rem, 2.4rem + 6vw, 8rem);
  --step-6: clamp(4.8rem, 2.6rem + 11vw, 15rem);

  --leading-tight: 0.88;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-display: 0.005em;
  --tracking-label: 0.18em;  /* the label's spaced "LAGER BEER", used once per product */
  --measure: 62ch;

  /* Spacing, 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 9rem;
  --section-y: clamp(var(--space-8), 10vw, var(--space-10));
  --gutter: clamp(1rem, 4vw, 3rem);
  --max-width: 1360px;

  /* Shape: crisp like a printed label */
  --radius-0: 0;
  --radius-control: 4px;
  --radius-pill: 999px;
  --radius-media: 14px;      /* photos and cards */
  --border-width: 1px;
  --stripe-angle: 28deg;     /* angle of the label's diagonal bands */

  /* Elevation (used sparingly) */
  --shadow-lift: 0 18px 40px -24px rgba(10, 39, 66, 0.45);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --dur-wipe: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-wipe: 0ms;
  }
}