:root {
  --fg-purple: #6B3FA0;
  --fg-purple-light: #f4f3ff;
  --fg-purple-mid: #e8e6ff;
  --fg-text-dark: #1a1a2e;
  --fg-text-muted: #666;
  --fg-border: #e5e7eb;
  --fg-white: #ffffff;
  --fg-bg-page: #f9f8ff;
  --fg-font: 'Inter', sans-serif;
  --fg-text-xs: 11px;
  --fg-text-sm: 13px;
  --fg-text-base: 15px;
  --fg-text-lg: 18px;
  --fg-text-xl: 24px;
  --fg-text-2xl: 32px;
  --fg-text-3xl: 42px;
  --fg-max-width: 1200px;
  --fg-max-width-tool: 1400px;
  --fg-padding-x: 24px;
  --fg-radius-sm: 8px;
  --fg-radius-md: 12px;
  --fg-radius-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg-bg-page: #0f0f1a;
    --fg-white: #1a1a2e;
    --fg-text-dark: #f0f0f5;
    --fg-text-muted: #a0a0b8;
    --fg-border: #2e2e4a;
    --fg-purple-light: #1e1b3a;
    --fg-purple-mid: #2a2550;
  }
}

.ast-dark-scheme {
  --fg-bg-page: #0f0f1a;
  --fg-white: #1a1a2e;
  --fg-text-dark: #f0f0f5;
  --fg-text-muted: #a0a0b8;
  --fg-border: #2e2e4a;
  --fg-purple-light: #1e1b3a;
  --fg-purple-mid: #2a2550;
}

.fg-section {
  width: 100%;
}

.fg-container {
  max-width: var(--fg-max-width);
  margin: 0 auto;
  padding: 0 var(--fg-padding-x);
}

.fg-container--tool {
  max-width: var(--fg-max-width-tool);
  margin: 0 auto;
  padding: 0 var(--fg-padding-x);
}

/* Remove Astra container constraints on pages that use fg-section */
.ast-container:has(.fg-section),
.site-content .ast-container:has(.fg-section),
.entry-content:has(.fg-section),
#primary:has(.fg-section) {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .fg-container,
  .fg-container--tool {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .fg-container,
  .fg-container--tool {
    padding: 0 16px;
  }
  :root {
    --fg-text-3xl: 28px;
    --fg-text-2xl: 24px;
    --fg-text-xl: 20px;
  }
}