/* ===== DESIGN TOKENS ===== */
:root {
  /* Colors — Primary */
  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-primary-dark: #e8734a;
  --color-primary-darker: #c2693d;
  --color-primary-darkest: #a8563a;
  --color-accent: #fbbf24;

  /* Colors — Neutrals */
  --color-text: #2d3436;
  --color-text-light: #555;
  --color-text-lighter: #666;
  --color-text-muted: #888;
  --color-text-faint: #999;
  --color-text-subtle: #aaa;
  --color-border: #f0ebe4;

  /* Colors — Backgrounds */
  --color-bg: #fffbf5;
  --color-bg-warm: #fef3e2;
  --color-bg-warm-light: #fff7ed;
  --color-bg-review: #fef8f3;
  --color-bg-white: #fff;

  /* Colors — Green (Why section, certifications) */
  --color-green: #8fae8b;
  --color-green-dark: #6d9a69;
  --color-green-bg: linear-gradient(165deg, #e8f0e6, #dce8da, #f0f6ef);

  /* Colors — Dark (Footer, Topbar) */
  --color-dark: #2c1e13;
  --color-dark-mid: #3a261a;
  --color-dark-text: #d4c5b5;
  --color-dark-text-muted: #a89888;
  --color-dark-text-faint: #7a6a5a;

  /* Typography */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-padding: 70px 24px 80px;
  --container-max: 1200px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.14);
  --shadow-primary: 0 4px 15px rgba(249, 115, 22, 0.3);

  /* Transitions */
  --transition-base: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.25s ease;
  --transition-slow: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}