:root {
  --site-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --site-bg-color: #f1f5f9;
  --site-text-color: #0f172a;
  --site-muted-text: color-mix(in srgb, var(--site-text-color) 96%, transparent);
  --site-link-color: #0a5568;
  --site-border-color: #cbd5e1;

  --site-hero-gradient-from: #083344;
  --site-hero-gradient-to: #164e63;
  --site-hero-gradient-text: #ecfeff;

  --site-hero-bg: #e2e8f0;
  --site-card-bg: #ffffff;

  --site-bg-header: #f8fafc;
  --site-text-header: #0f172a;

  --site-btn-primary-bg: #0a5568;
  --site-btn-primary-text: #ffffff;
  --site-btn-secondary-bg: transparent;
  --site-btn-secondary-border: #0a5568;
  --site-btn-secondary-text: #0a5568;

  
  --site-bg-color-surface: var(--site-bg-color);
  --site-hero-bg-surface: var(--site-hero-bg);
  --site-card-bg-surface: var(--site-card-bg);
  --site-bg-header-surface: var(--site-bg-header);
  --site-hero-gradient-from-surface: var(--site-hero-gradient-from);
  --site-hero-gradient-to-surface: var(--site-hero-gradient-to);
  --site-accent-bg-surface: var(--site-btn-primary-bg);
  
  --site-radius-sm: 2px;
  --site-radius-md: 4px;
  --site-radius-lg: 6px;
  --site-shadow-sm: 0 0 0 1px rgba(15,23,42,0.08);
  --site-shadow-md: 0 1px 2px rgba(15,23,42,0.10);
  --site-shadow-lg: 0 4px 8px rgba(15,23,42,0.12);

}
@media (prefers-color-scheme: dark) {
:root {
    --site-bg-color: #020617;
    --site-text-color: #f8fafc;
    --site-muted-text: color-mix(in srgb, var(--site-text-color) 96%, transparent);
    --site-link-color: #67e8f9;
    --site-border-color: #1e293b;

    --site-hero-gradient-from: #147f8f;
    --site-hero-gradient-to: #051f29;
    --site-hero-gradient-text: #ffffff;

    --site-hero-bg: #0f172a;
    --site-card-bg: #1e293b;

    --site-bg-header: #020617;
    --site-text-header: #f8fafc;

    --site-btn-primary-bg: #22d3ee;
    --site-btn-primary-text: #083344;
    --site-btn-secondary-bg: transparent;
    --site-btn-secondary-border: #22d3ee;
    --site-btn-secondary-text: #22d3ee;
  }
}
:root[data-theme='light'] {
  --site-bg-color: #f1f5f9;
  --site-text-color: #0f172a;
  --site-muted-text: color-mix(in srgb, var(--site-text-color) 96%, transparent);
  --site-link-color: #0a5568;
  --site-border-color: #cbd5e1;
  --site-hero-gradient-from: #083344;
  --site-hero-gradient-to: #164e63;
  --site-hero-gradient-text: #ecfeff;
  --site-hero-bg: #e2e8f0;
  --site-card-bg: #ffffff;
  --site-bg-header: #f8fafc;
  --site-text-header: #0f172a;
  --site-btn-primary-bg: #0a5568;
  --site-btn-primary-text: #ffffff;
  --site-btn-secondary-bg: transparent;
  --site-btn-secondary-border: #0a5568;
  --site-btn-secondary-text: #0a5568;
}
:root[data-theme='dark'] {
  --site-bg-color: #020617;
  --site-text-color: #f8fafc;
  --site-muted-text: color-mix(in srgb, var(--site-text-color) 96%, transparent);
  --site-link-color: #67e8f9;
  --site-border-color: #1e293b;

  --site-hero-gradient-from: #147f8f;
  --site-hero-gradient-to: #051f29;
  --site-hero-gradient-text: #ffffff;

  --site-hero-bg: #0f172a;
  --site-card-bg: #1e293b;

  --site-bg-header: #020617;
  --site-text-header: #f8fafc;

  --site-btn-primary-bg: #22d3ee;
  --site-btn-primary-text: #083344;
  --site-btn-secondary-bg: transparent;
  --site-btn-secondary-border: #22d3ee;
  --site-btn-secondary-text: #22d3ee;
}
:root {
  --site-space-0: 0;
  --site-space-1: 0.5rem;
  --site-space-2: 1rem;
  --site-space-3: 1.5rem;
  --site-space-4: 2rem;
  --site-space-5: 3rem;
}
:root {
  
  --site-surface-1: var(--site-bg-color-surface, var(--site-bg-color));
  --site-surface-2: var(--site-hero-bg-surface, var(--site-hero-bg));
  --site-surface-3: var(--site-card-bg-surface, var(--site-card-bg));

  
  --site-content-strong: var(--site-text-color);
  --site-content-muted: var(--site-muted-text);

  
  --site-brand: var(--site-btn-primary-bg);
  --site-brand-contrast: var(--site-btn-primary-text);
  --site-link: var(--site-link-color);
  --site-link-contrast: var(--site-bg-color);
  --site-border: var(--site-border-color);

  
}
@media (prefers-color-scheme: dark) {
:root {
    --site-content-muted: color-mix(in srgb, var(--site-text-color) 72%, var(--site-bg-color));
  }
}
:root[data-theme='dark'] {
  --site-content-muted: color-mix(in srgb, var(--site-text-color) 72%, var(--site-bg-color));
}
:root[data-theme='light'] {
  --site-content-muted: var(--site-muted-text);
}
:root { --site-accent: var(--site-brand); --site-accent-contrast: var(--site-brand-contrast); }