/*
 * BoardGameDrop skin: the layer between the brand kit's tokens (tokens.css,
 * copied unchanged from docs/brands/boardgamedrop/final) and the shared
 * Lofvi component sheet (site.css). It names the kit's values under the
 * token names site.css reads, and keeps Lofvi's layout rhythm (gutters,
 * section spacing, grid gaps) so the page flow stays the same across the
 * network. Loaded after tokens.css and before site.css.
 */

:root {
  /* ── Surfaces ──────────────────────────────────────────────────────
     The page is warm paper; cards, product fields and offer rows are white.
     "Soft" surfaces (bands, footer, fields) sit one step off the page. */
  --paper-soft: #efece5;
  --paper-3: #e3e6ec;
  --ink-deep: #0b1226;
  --text-faint: var(--text-muted);
  --line-faint: #eceef2;
  --line-solid: var(--line);

  /* Category drawings sit on one cool fog field, so a category reads apart
     from the white product cards (Lofvi's pale sage, in this kit's colour). */
  --tile: #e8ebf1;
  --tile-hover: #dfe3eb;

  /* Lofvi's accent slots. Coral marks only what moved (a price drop, a deal,
     the lowest point), so the quiet accents of the shared sheet (ticks,
     selected states) are ink here; --sage-deep is ink text. */
  --sage: var(--ink);
  --sage-deep: var(--ink);

  /* ── Type ──────────────────────────────────────────────────────────
     Archivo for titles (the kit's --font-display, tokens.css), Inter for
     everything else; bgd.css sets the titles' width and tracking. */
  --font-editorial: var(--font-display);

  --text-hero: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --text-h1: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --text-h2-lg: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-title-sm: 1.5rem;
  --text-heading-sm: 1.375rem;
  --text-subtitle: 1.125rem;
  --text-body-lg: 1.0625rem;
  --text-meta: 0.84375rem;
  --text-label: 0.75rem;

  --tracking-snug: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.06em;

  /* ── Geometry and motion ─────────────────────────────────────────── */
  --shadow: var(--shadow-raised);
  --space-7: 28px;
  --space-14: 56px;
  --space-24: 96px;
  --container-max: 1440px;
  --touch: 44px;
  --dur-fast: 160ms;
  --dur: var(--duration);
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Rhythm (Lofvi's six steps, unchanged) ───────────────────────── */
  --gutter: var(--space-10);
  --header-y: var(--space-10);
  --header-y-end: var(--space-12);
  --section-y: var(--space-20);
  --group-gap: var(--space-20);
  --grid-gap-x: var(--space-5);
  --grid-gap-y: var(--space-10);
  --stack-xs: var(--space-2);
  --stack-sm: var(--space-3);
  --stack-md: var(--space-6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-soft: #121a30;
    --paper-3: #26314d;
    --ink-deep: #ffffff;
    --line-faint: #1d2844;
    --tile: #1d2844;
    --tile-hover: #222e4d;
  }
}

:root[data-theme="dark"] {
  --paper-soft: #121a30;
  --paper-3: #26314d;
  --ink-deep: #ffffff;
  --line-faint: #1d2844;
  --tile: #1d2844;
  --tile-hover: #222e4d;
}

@media (max-width: 1180px) {
  :root {
    --gutter: var(--space-8);
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--space-5);
    --header-y: var(--space-8);
    --header-y-end: var(--space-10);
    --section-y: var(--space-14);
    --group-gap: var(--space-14);
    --grid-gap-x: var(--space-4);
    --grid-gap-y: var(--space-8);
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: var(--space-4);
    --header-y: var(--space-6);
    --header-y-end: var(--space-8);
    --section-y: var(--space-12);
    --group-gap: var(--space-12);
    --grid-gap-x: var(--space-3);
    --grid-gap-y: var(--space-8);
  }
}