/*
 * Design tokens for the 2026 redesign (from the brickzone design system).
 * Everything else in assets/css/site/ uses these instead of raw values.
 */
:root {
  /* Text */
  --ink: #2a2a2a;
  --ink-2: #4a4a4a;
  --ink-3: #6a6a6a;
  --ink-4: #5a5a5a;

  /* Surfaces and lines */
  --page: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f9f9f9;   /* tiles and table heads on white */
  --image-bg: #f6f6f6;
  --line: #eaeaea;
  --line-strong: #dcdcdc;
  --line-soft: #f0f0f0;
  --placeholder-line: #b8b8b8;

  /* Brand */
  --brand: #e64946;       /* the red square in the logo, marks, bars */
  --cta: #cc3330;         /* buttons, links, prices that need to stand out */
  --red-tint: #fdecec;    /* season chip, "Aktuel nu" */
  --red-tint-2: #fef6f6;
  --red-tint-3: #fff8f7;  /* the cheapest offer's row */
  --red-on-dark: #ff8a87;

  /* Status */
  --green: #1e7b34;       /* in stock, good price */
  --green-tint: #e8f5ec;
  --lime: #30b914;        /* price level: low */
  --orange: #f2a516;      /* price level: average, sold out */
  --amber: #975a00;       /* warnings: Udgår snart, Begrænset */
  --amber-tint: #fff4e0;
  --hatch-dark: #8a8a8a;  /* removed from the shop */
  --hatch-light: #d4d4d4;
  --empty: #ececec;
  --empty-2: #e3e3e3;

  /* Dark surfaces (footer, last-chance band) */
  --dark: #2a2a2a;
  --dark-2: #3a3a3a;
  --dark-line: #3f3f3f;
  --on-dark: #ffffff;
  --on-dark-2: #c4c4c4;
  --on-dark-3: #a8a8a8;

  /* Type */
  --font-display: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
  --font-body: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Layout */
  --page-max: 1280px;
  --gutter: 32px;
  --tap: 44px;            /* minimum touch target */
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }
}