/*
  Structural design tokens for the shop template.

  The brand palette and the typefaces are not here: they differ per store and
  arrive in the generated `css/brand.css`, which every page links first. What
  remains is everything a store does not choose — neutrals, shadows and layout.
*/

:root {
  /* Neutrals used by borders, cards and page chrome */
  --white: #ffffff;
  --line: rgba(11, 40, 88, 0.12);
  --line-soft: rgba(11, 40, 88, 0.07);

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(11, 40, 88, 0.08);
  --shadow-featured: 0 24px 60px rgba(11, 40, 88, 0.18), 0 0 0 1px rgba(23, 122, 120, 0.28);
  --shadow-soft: 0 4px 16px rgba(11, 40, 88, 0.06);

  /* Layout: container width and gutters shared by every page */
  --container: 72rem;
  --gutter: 1rem;
  --gutter-lg: 1.5rem;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--gutter-lg);
  }
}