/* DummyFill Pro — Design Tokens */

:root {
  /* Colors */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8FAFC;
  --color-surface-light: #FAFAFA;
  --color-surface-dark: #0A0A0A;
  --color-surface-dark-card: #1A1A1A;
  --color-primary: #4A9BD9;
  --color-primary-dark: #3A87C2;
  --color-primary-light: #E8F4FD;
  --color-secondary: #2D3A6B;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-destructive: #DC2626;
  --color-border-light: #E5E7EB;
  --color-feature-card-bg: #F9FAFB;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 80px;

  /* Typography */
  --text-body: 1rem;
  --text-label: 0.875rem;
  --text-heading: 1.75rem;
  --text-section-title: 2.25rem;
  --text-display: 3.5rem;
  --weight-regular: 400;
  --weight-extrabold: 800;
  --line-height-body: 1.6;
  --line-height-label: 1.4;
  --line-height-heading: 1.25;
  --line-height-display: 1.1;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

@media (max-width: 768px) {
  :root {
    --text-display: 2.25rem;
    --text-section-title: 1.75rem;
    --text-heading: 1.25rem;
    --space-section: 56px;
    --space-4xl: 64px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-display: 1.75rem;
    --text-section-title: 1.5rem;
    --space-section: 40px;
    --space-4xl: 48px;
  }
}