/*
 * Design-token compatibility layer.
 * The Shopify theme's sections/pages reference CSS custom properties
 * (--accent, --surface, --border, --text, --space-*, --radius-*, etc.).
 * These are the light-scheme values from the original theme.css :root,
 * so all ported markup (homepage sections + bespoke pages) renders with
 * the brand's design tokens. Values mirror the brand palette already in
 * theme.json (accent #0A0A0A, accent-2 #0048FF).
 */
:root {
  /* section backgrounds */
  --section-bg: #F5F5F5;
  /* color */
  --accent: #0A0A0A;
  --accent-light: rgba(10, 10, 10, 0.05);
  --accent-2: #0048FF;
  --accent-2-light: rgba(0, 72, 255, 0.08);
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --surface: #F8F8F8;
  --surface-hover: #F0F0F0;
  --border: #E5E5E5;
  --border-strong: #D4D4D4;
  --text: #0A0A0A;
  --text-secondary: #404040;
  --muted: #737373;
  --primary: #0A0A0A;
  --primary-hover: #262626;
  --overlay: rgba(0, 0, 0, 0.5);
  --success: #16A34A;
  --error: #E3163B;
  --badge-sale: #E3163B;
  --badge-hot: #EDB900;
  --badge-new: #0048FF;
  --badge-bestseller: #0048FF;
  /* type */
  --font-primary: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.1);
  /* transition */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  /* P2-6: touch target minimum */
  --theme-button-min-height: 44px;
}