:root {

  /* ── Brand ── */
  --clr-brand:      #059669;  /* emerald-600 — primary / CTA */
  --clr-brand-dark: #047857;  /* emerald-700 — hover / pressed */
  --clr-brand-dim:  #D1FAE5;  /* emerald-100 — tint / highlight bg */
  --clr-brand-tint: #ECFDF5;  /* emerald-50  — subtle fill / icon bg */

  /* ── Text ── */
  --clr-text:     #111827;    /* gray-900 — headings, primary */
  --clr-text-2:   #6B7280;    /* gray-500 — body, secondary */
  --clr-text-3:   #9CA3AF;    /* gray-400 — muted, placeholder */
  --clr-text-inv: #FFFFFF;    /* on dark/brand backgrounds */

  /* ── Surfaces ── */
  --clr-bg:      #FFFFFF;     /* base page background */
  --clr-bg-alt:  #F9FAFB;     /* alternate section background */
  --clr-surface: #F3F4F6;     /* card fill, input background */

  /* ── Borders ── */
  --clr-border: #E5E7EB;      /* gray-200 — default border / divider */

  /* ── Status ── */
  --clr-danger:  #EF4444;     /* red-500 — error, overdue */
  --clr-warning: #F59E0B;     /* amber-500 — warning, due soon */


  /* ── Typography ── */
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Font weights */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;


  /* ── Spacing ── */
  --sp-1:  0.25rem;    /*  4px */
  --sp-2:  0.5rem;     /*  8px */
  --sp-3:  0.75rem;    /* 12px */
  --sp-4:  1rem;       /* 16px */
  --sp-5:  1.25rem;    /* 20px */
  --sp-6:  1.5rem;     /* 24px */
  --sp-8:  2rem;       /* 32px */
  --sp-10: 2.5rem;     /* 40px */
  --sp-12: 3rem;       /* 48px */
  --sp-16: 4rem;       /* 64px */
  --sp-20: 5rem;       /* 80px */
  --sp-24: 6rem;       /* 96px */


  /* ── Border Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;    /* pill */


  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);


  /* ── Layout ── */
  --max-w:      1100px;   /* wide content / site max */
  --max-w-text: 680px;    /* prose / centered text blocks */


  /* ── Transitions ── */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;
}