:root {
  --df-white: #ffffff;
  --df-off-white: #f7f6f4;
  --df-surface: #f0eeea;
  --df-charcoal: #1a1c1e;
  --df-charcoal-soft: #2c2f33;
  --df-muted: #6b6f76;
  --df-border: #e4e1db;

  --df-crimson: #b91c1c;
  --df-crimson-hover: #991b1b;
  --df-gold: #c9a227;
  --df-gold-soft: #e8d48b;
  --df-green: #3d7a4a;
  --df-green-soft: #e8f2ea;

  --df-success: #2f6f4e;
  --df-error: #a33b3b;

  --df-hero-overlay: rgba(26, 28, 30, 0.48);
  --df-glass: rgba(255, 255, 255, 0.78);

  --df-font-fa: "Vazirmatn", Tahoma, sans-serif;
  --df-font-en: "Manrope", "Vazirmatn", sans-serif;

  --df-display: clamp(2.25rem, 5vw, 3.75rem);
  --df-h1: clamp(1.75rem, 3vw, 2.25rem);
  --df-h2: clamp(1.375rem, 2.4vw, 1.75rem);
  --df-h3: 1.25rem;
  --df-body: 1.0625rem;
  --df-small: 0.875rem;
  --df-label: 0.75rem;

  --df-radius-sm: 8px;
  --df-radius-md: 16px;
  --df-radius-lg: 24px;

  --df-shadow-sm: 0 4px 20px rgba(26, 28, 30, 0.06);
  --df-shadow-md: 0 12px 40px rgba(26, 28, 30, 0.08);
  --df-shadow-hover: 0 16px 48px rgba(26, 28, 30, 0.12);

  --df-container: 1480px;
  --df-container-pad: 1.25rem;
  --df-measure: 680px;
  --df-header-h: 118px;

  --df-space-section: clamp(4rem, 8vw, 7.5rem);
  --df-space-section-sm: clamp(3.5rem, 6vw, 5rem);
}