/*
 * The Lofvi base components (site.css, categories.css, account.css,
 * designers.css) read a few token names the ToySetFox kit does not define.
 * This file maps them onto the kit (tokens.css, copied unchanged from
 * docs/brands/toysetfox/final) and adds the base's rhythm tokens, so the
 * page structure stays the Lofvi one and only the skin changes.
 */

:root {
  /* Display face: Bricolage Grotesque from the kit. */
  --font-editorial: var(--font-display);
  /* Body: Figtree from the kit (tokens.css). */

  /* The base's accent names -> the fox. Text in orange always uses ember. */
  --sage: var(--fox);
  --sage-deep: var(--ember);
  /* Category drawings sit on oat; product illustrations on white cards. */
  --tile: var(--paper-soft);
  --tile-hover: var(--paper-2);

  --ink-deep: var(--ink);
  --paper-3: var(--line-strong);
  --text-faint: var(--text-muted);
  --line-faint: var(--line);
  --line-solid: var(--line);

  --text-hero: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --text-h2-lg: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
  --text-title-sm: 1.75rem;
  --text-heading-sm: 1.625rem;
  --text-subtitle: 1.25rem;
  --text-meta: 0.84375rem;
  --text-label: 0.75rem;
  --tracking-wide: 0.02em;

  --space-7: 28px;
  --space-14: 56px;
  --dur-slow: 560ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Rhythm of the base: six semantic steps, compressed on small screens. */
  --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-12);
  --stack-xs: var(--space-2);
  --stack-sm: var(--space-3);
  --stack-md: var(--space-6);
}

@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-10);
  }
}

@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);
  }
}