/* ============================================
   Design Tokens — Generated from tokens.json
   ============================================ */
:root {
  /* --- Primitive Colors --- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f6f7f9;
  --color-gray-200: #e9ebed;
  --color-gray-300: #d1d5dc;
  --color-gray-400: #99a1af;
  --color-gray-500: #4a5565;
  --color-gray-700: #33333b;
  --color-gray-800: #2f2f36;
  --color-gray-850: #252931;
  --color-gray-900: #1a1d24;
  --color-gray-950: #151519;
  --color-yellow-500: #feb913;

  /* --- Semantic Colors --- */
  --color-primary: #feb913;
  --color-primary-dark: #1a1d24;
  --color-secondary: #33333b;
  --color-bg: #ffffff;
  --color-bg-light: #f6f7f9;
  --color-bg-dark: #1a1d24;
  --color-bg-dark-alt: #33333b;
  --color-bg-dark-footer: #2f2f36;
  --color-bg-dark-accent: #252931;
  --color-text-heading: #1a1d24;
  --color-text-body: #4a5565;
  --color-text-light: #f9fafb;
  --color-text-muted: #99a1af;
  --color-text-placeholder: rgba(74, 85, 101, 0.5);
  --color-border: #d1d5dc;
  --color-border-hover: #e9ebed;
  --color-accent: #feb913;

  /* --- Typography --- */
  --font-family: 'Inter', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 17px;
  --font-size-2xl: 18px;
  --font-size-3xl: 26px;
  --font-size-4xl: 36px;
  --font-size-5xl: 52px;

  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;

  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.375;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.75;

  /* --- Spacing --- */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 28px;
  --spacing-3xl: 32px;
  --spacing-4xl: 37px;
  --spacing-5xl: 50px;
  --spacing-6xl: 61px;
  --spacing-section: 80px;
  --spacing-section-catalog: 40px;
  --spacing-section-catalog-list: 20px 0 100px;

  /* --- Border Radius --- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-full: 50%;

  /* --- Container --- */
  --container-max-width: 1280px;
  --container-padding: 0 20px;

  /* --- Shadows --- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* --- Transitions --- */
  --transition-default: 0.3s ease;
  --transition-fast: 0.15s ease;
}