/**
 * Dabi theme — self-hosted fonts + design tokens (brand book skin).
 * // TODO: звірити з брендбуком
 */

/* --------------------------------------------------------------------------
   Non Bureau — brand grotesque (400 Regular / 500 Medium / 600 SemiBold / 700 Bold)
   Extended cuts live in assets/fonts/non-bureau/ for future display use.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Non Bureau";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/non-bureau/NonBureau-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Non Bureau";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/non-bureau/NonBureau-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Non Bureau";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/non-bureau/NonBureau-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Non Bureau";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/non-bureau/NonBureau-Bold.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /*
   * Shop UI: --paper + --ink + --coral (prices / story / спец-CTA).
   * Brand core (--brown/--blue/--cream + secondary) stays for brand-moments,
   * logo moments, About, packaging CTA — almost unused in product grids.
   */
  --brown: #3A2318;
  --blue: #29A9E1;
  --cream: #ECEAD9;

  /* Primary shop accent */
  --coral: #F0623C;
  --coral-soft: #FBE4D6;

  /* Secondary expressive (category tiles / moments only) */
  --lime: #D4E85C;
  --pink: #F3C5D7;
  --yellow: #E9E31D;
  --orange: #F59B1E;
  --rust: #C05A11;

  /* Roles — restrained shop */
  --paper: #FFFFFF;
  --surface: #F6F4EC; /* calm under product photos — not a loud field */
  --surface-2: #FBFAF7;
  --ink: #1C1815;
  --ink-2: #6E645C;
  --ink-3: #A8A398; /* decor / struck only */
  --hairline: #E7E3DA;
  --on-brown: #ECEAD9;
  --on-blue: #3A2318;
  --price: var(--coral); /* format «N грн»; ≥ fs-body + weight 600 */

  /* Compat */
  --ink-inverse: var(--paper); /* text on ink fills (shop) */
  --accent: var(--ink);
  --sale: var(--price);

  /* Type — Non Bureau; logo is SVG, not a font */
  --font-sans: "Non Bureau", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  --fs-h1: clamp(2rem, 1.3rem + 2.9vw, 4rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --lh-tight: 1.08;
  --lh-head: 1.15;
  --lh-body: 1.6;
  --tracking-label: 0.08em;
  --tracking-product: 0.04em;

  /* Spacing — 8pt scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);

  --section-y: clamp(2.5rem, 1.2rem + 3.6vw, 5.4rem);
  --block-y: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
  --stack-y: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
  --pad-card: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --pad-panel: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);

  /* Layout */
  --container-max: 2100px;
  --container-text: 720px;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 3rem);
  --header-h: 3.5rem;

  /* Radius — cards/photos 8–10; buttons/pills/pagination = pill */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border: 1px solid var(--hairline);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 4.25rem;
  }
}