/* SOLS design tokens. Keep aligned with the palette in inc/storefront-config.php. */
:root {
  --sols-bg: #F6F7F9;
  --sols-surface: #FFFFFF;
  --sols-image: #F2F3F5;
  --sols-text: #171717;
  --sols-muted: #667085;
  --sols-line: #E7E9EE;
  --sols-accent: #F97316;
  --sols-accent-soft: #FFF1E8;
  --sols-accent-text: #C2410C;
  --sols-cta: #171717;
  --sols-cta-hover: #000000;

  --sols-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sols-r-sm: 8px;
  --sols-r-md: 12px;
  --sols-r-lg: 16px;
  --sols-r-xl: 20px;
  --sols-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --sols-shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 24px rgba(16, 24, 40, 0.08);

  --sols-container: 1280px;
  --sols-gutter: clamp(16px, 3vw, 32px);
  --sols-section: clamp(40px, 6vw, 72px);

  /* Legacy names still read by base theme modules. */
  --color-bg: var(--sols-bg);
  --color-background: var(--sols-bg);
  --color-surface: var(--sols-surface);
  --color-text: var(--sols-text);
  --color-muted: var(--sols-muted);
  --color-line: var(--sols-line);
  --color-border: var(--sols-line);
  --color-accent: var(--sols-accent);
  --color-accent-dark: var(--sols-accent-text);
  --color-sale: var(--sols-accent-text);
  --color-cta: var(--sols-cta);
  --font-heading: var(--sols-font);
  --font-body: var(--sols-font);
  --storefront-gutter: var(--sols-gutter);
  --container: var(--sols-container);
  --radius: var(--sols-r-md);
  --radius-large: var(--sols-r-lg);
  --focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.35);
}