/* ============================================================
   VARIABLES.CSS
   Design tokens for the whole site: colors, type, spacing,
   radius, shadow. Change a value here and it updates
   everywhere — never hardcode a color in a page file.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  /* Signature green — used sparingly: primary buttons, active
     nav state, confirmed/positive status. Not used as a
     background color anywhere large. */
  --color-brand:        #1F7A4D;
  --color-brand-dark:   #155C3A;
  --color-brand-light:  #E7F3EC; /* tint for badges/active backgrounds */

  /* ---------- Neutrals (page surfaces & text) ---------- */
  --color-bg:           #F6F7F5; /* page background */
  --color-surface:      #FFFFFF; /* cards, panels, modals */
  --color-surface-alt:  #FAFBF9; /* table stripes, subtle panels */

  --color-text:         #1E2722; /* primary text */
  --color-text-muted:   #5C685F; /* secondary text, labels */
  --color-text-faint:   #8B958A; /* placeholders, hints */
  --color-text-on-brand:#FFFFFF;

  --color-border:        #E2E5E0;
  --color-border-strong: #CBD0C7;

  /* ---------- Status colors ---------- */
  --color-success:       #1F7A4D;
  --color-success-light: #E7F3EC;
  --color-warning:       #B7791F;
  --color-warning-light: #FBF1DE;
  --color-danger:        #B3261E;
  --color-danger-light:  #FBEAE9;
  --color-info:          #2B5C8A;
  --color-info-light:    #E9F0F7;

  /* ---------- Typography ---------- */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;   /* 12px — captions, table meta */
  --fs-sm:   0.875rem;  /* 14px — body small, table cells */
  --fs-base: 0.9375rem; /* 15px — default body */
  --fs-md:   1rem;      /* 16px */
  --fs-lg:   1.25rem;   /* 20px — card titles */
  --fs-xl:   1.5rem;    /* 24px — page titles */
  --fs-2xl:  2rem;      /* 32px — big stat numbers */

  /* ---------- Spacing scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* ---------- Radius & shadow ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 30, 24, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 30, 24, 0.08);

  /* ---------- Layout ---------- */
  --sidebar-width: 232px;
  --topbar-height: 64px;
}