/* Design tokens: map 1:1 into Shopify theme settings later */
:root {
  /* Brand (Chairwale / Paramount logo red) */
  --brand-red: #E30613;
  --brand-red-dark: #B3000F;
  --brand-red-deep: #B3000F;
  --brand-red-light: #fde8ec;
  --brand-red-gradient: linear-gradient(135deg, #FF3B30 0%, #B3000F 100%);

  /* Compat aliases used across the site */
  --red: var(--brand-red);
  --red-dark: var(--brand-red-dark);
  --red-light: var(--brand-red-light);
  --red-gradient: var(--brand-red-gradient);

  --black: #111111;
  --dark: #1a1a1a;
  --dark-card: #222222;
  --grey-900: #333333;
  --grey-800: #3a3a3a;
  --grey-700: #4a4a4a;
  --grey-500: #6e6e6e;
  --grey-300: #cccccc;
  --grey-100: #f5f5f5;
  --grey-50: #fafafa;
  --white: #ffffff;
  --green: #25d366;
  --green-dark: #1da851;

  /* Typography: premium B2B (Shopify theme font-face swap ready) */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font: var(--font-body);

  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-w: 1280px;
  --header-height: 100px;
  --page-gutter: 1.5rem;

  /* Shopify section spacing scale */
  --space-section: clamp(3rem, 6vw, 5rem);
  --space-card: 1.25rem;
  --text-hero: clamp(2rem, 5vw, 3.25rem);
  --text-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --text-h3: clamp(1.05rem, 2vw, 1.25rem);
}