:root {
  --af-color-primary: #0caf82;
  --af-color-primary-hover: #078f6c;
  --af-color-primary-active: #06775c;
  --af-color-primary-soft: #e8f8f3;
  --af-color-primary-softer: #f4fcf9;
  --af-color-navy: #17283f;
  --af-color-navy-soft: #26384f;
  --af-color-text: #17243a;
  --af-color-text-secondary: #5f6e82;
  --af-color-muted: #8290a2;
  --af-color-success: #07966f;
  --af-color-success-soft: #e3f8f0;
  --af-color-warning: #c87900;
  --af-color-warning-soft: #fff2dc;
  --af-color-danger: #d93645;
  --af-color-danger-soft: #ffeaed;
  --af-color-info: #2478bf;
  --af-color-info-soft: #e8f3ff;
  --af-color-surface: #ffffff;
  --af-color-surface-alt: #f7f9fb;
  --af-color-background: #f4f6f8;
  --af-color-border: #e1e7ed;
  --af-color-border-strong: #ced7e0;
  --af-radius-sm: 8px;
  --af-radius-md: 11px;
  --af-radius-lg: 15px;
  --af-radius-xl: 20px;
  --af-radius-pill: 999px;
  --af-shadow-sm: 0 5px 18px rgba(25, 44, 63, 0.06);
  --af-shadow-md: 0 14px 42px rgba(22, 39, 57, 0.12);
  --af-shadow-lg: 0 28px 90px rgba(16, 35, 59, 0.22);
  --af-space-1: 4px;
  --af-space-2: 8px;
  --af-space-3: 12px;
  --af-space-4: 16px;
  --af-space-5: 20px;
  --af-space-6: 24px;
  --af-space-7: 32px;
  --af-space-8: 40px;
  --af-font-xs: 0.6875rem;
  --af-font-sm: 0.75rem;
  --af-font-md: 0.875rem;
  --af-font-lg: 1rem;
  --af-font-xl: 1.25rem;
  --af-font-page: clamp(1.5rem, 2vw, 1.75rem);
  --af-line-compact: 1.2;
  --af-line-body: 1.5;
  --af-control-height-sm: 36px;
  --af-control-height-md: 44px;
  --af-control-height-lg: 50px;
  --af-page-max: 1440px;
  --af-page-padding: clamp(20px, 2.2vw, 32px);
  --af-transition: 150ms ease;
  --af-focus-ring: 0 0 0 3px rgba(12, 175, 130, 0.2);
}