:root {
  --bf-brand-950: #071a33;
  --bf-brand-900: #0f2a56;
  --bf-brand-800: #173f7a;
  --bf-brand-700: #1d4ed8;
  --bf-brand-600: #2563eb;
  --bf-accent-500: #f6c344;
  --bf-accent-600: #e9ad20;

  --bf-page-bg-top: #eef8ff;
  --bf-page-bg-bottom: #d9edff;
  --bf-surface: #ffffff;
  --bf-surface-soft: #f7fbff;
  --bf-surface-muted: #eef5fb;
  --bf-text: #102a43;
  --bf-text-muted: #64748b;
  --bf-border: rgba(15, 42, 86, 0.14);
  --bf-border-strong: rgba(29, 78, 216, 0.28);
  --bf-focus: #f6c344;

  --bf-success: #15803d;
  --bf-warning: #b45309;
  --bf-danger: #b91c1c;
  --bf-info: #1d4ed8;

  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 20px;
  --bf-space-6: 24px;
  --bf-space-8: 32px;
  --bf-space-10: 40px;

  --bf-radius-control: 10px;
  --bf-radius-card: 16px;
  --bf-radius-hero: 20px;
  --bf-radius-pill: 999px;
  --bf-shadow-card: 0 10px 28px rgba(15, 42, 86, 0.08);
  --bf-shadow-raised: 0 16px 38px rgba(15, 42, 86, 0.13);
  --bf-control-height: 44px;
  --bf-tool-container: 1120px;
  --bf-guide-container: 1160px;
  --bf-community-container: 1160px;
  --bf-info-container: 1160px;

  --bf-title-tool: clamp(2rem, 4vw, 2.5rem);
  --bf-title-guide: clamp(2rem, 4vw, 2.75rem);
  --bf-title-guide-display: clamp(2.6rem, 5vw, 3.7rem);
  --bf-title-community: clamp(2rem, 4vw, 2.75rem);
  --bf-title-info: clamp(2rem, 4vw, 2.75rem);
  --bf-title-info-display: clamp(2.6rem, 5vw, 3.7rem);
  --bf-title-section: clamp(1.25rem, 2.4vw, 1.55rem);
  --bf-text-body: 1rem;
  --bf-line-body: 1.7;
}

body.dark-mode {
  --bf-page-bg-top: #0f172a;
  --bf-page-bg-bottom: #172554;
  --bf-surface: #1e293b;
  --bf-surface-soft: #172033;
  --bf-surface-muted: #243147;
  --bf-text: #e5edf8;
  --bf-text-muted: #a8b6cb;
  --bf-border: rgba(148, 163, 184, 0.24);
  --bf-border-strong: rgba(96, 165, 250, 0.42);
  --bf-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.24);
  --bf-shadow-raised: 0 18px 42px rgba(0, 0, 0, 0.34);
}