:root {
  --ag-primary: #266c5e;
  --ag-primary-rgb: 38,108,94;
  --ag-growth: #8fc98d;
  --ag-forest: #173f37;
  --ag-forest-deep: #0f2f29;
  --ag-sage: #eaf4eb;
  --ag-sage-2: #f1f7f1;
  --ag-canvas: #fafbf7;
  --ag-warm: #f5f4ed;
  --ag-white: #ffffff;
  --ag-text: #17231f;
  --ag-muted: #66736d;
  --ag-muted-light: #aebdb6;
  --ag-border: rgba(23,63,55,.10);
  --ag-border-dark: rgba(255,255,255,.12);

  --ag-font: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;

  --ag-container: 1280px;
  --ag-container-wide: 1380px;

  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-7: 32px;
  --ag-space-8: 40px;
  --ag-space-9: 48px;
  --ag-space-10: 64px;
  --ag-space-11: 80px;
  --ag-space-12: 96px;
  --ag-space-13: 120px;

  --ag-radius-sm: 8px;
  --ag-radius-btn: 12px;
  --ag-radius-card: 18px;
  --ag-radius-media: 24px;

  --ag-shadow-soft: 0 2px 4px rgba(15,47,41,.02), 0 14px 36px rgba(15,47,41,.07);
  --ag-shadow-header: 0 12px 34px rgba(15,47,41,.07);

  --ag-motion-fast: 180ms;
  --ag-motion-ui: 240ms;
  --ag-motion-card: 380ms;
  --ag-motion-reveal: 700ms;
  --ag-motion-editorial: 1000ms;
  --ag-ease-premium: cubic-bezier(.16,1,.3,1);

  --ag-z-base: 0;
  --ag-z-decoration: 1;
  --ag-z-content: 10;
  --ag-z-floating: 30;
  --ag-z-header: 100;
  --ag-z-dropdown: 300;
  --ag-z-modal: 500;
}