/* ── Shared design tokens ──────────────────────────────────────────────────── */
:root {
  /* Color palette */
  --color-primary:       #2c3e50;
  --color-primary-light: #34495e;
  --color-accent:        #3498db;
  --color-accent-hover:  #2980b9;
  --color-success:       #27ae60;
  --color-success-hover: #219a52;
  --color-warning:       #e67e22;
  --color-danger:        #e74c3c;
  --color-danger-hover:  #c0392b;
  --color-secondary:     #95a5a6;
  --color-secondary-hover: #7f8c8d;
  --color-link:          #0066cc;

  /* Neutrals */
  --color-white:         #ffffff;
  --color-bg:            #f5f5f5;
  --color-bg-alt:        #fafafa;
  --color-text:          #333333;
  --color-text-light:    #555555;
  --color-text-muted:    #888888;
  --color-muted:         #6b7280;
  --color-border:        #cccccc;
  --color-border-light:  #eeeeee;
  --color-border-hover:  #ddd;

  /* Semantic status colors (email icons, calendar, inline indicators) */
  --color-status-sent:     var(--color-success);       /* #27ae60 */
  --color-status-overdue:  #c0392b;
  --color-status-pending:  #f39c12;

  /* Status badge colors */
  --badge-paid-bg:       #d4edda;
  --badge-paid-fg:       #155724;
  --badge-partial-bg:    #fff3cd;
  --badge-partial-fg:    #856404;
  --badge-open-bg:       #e2e3e5;
  --badge-open-fg:       #383d41;
  --badge-overdue-bg:    #f8d7da;
  --badge-overdue-fg:    #721c24;
  --badge-canceled-bg:   #f5c6cb;
  --badge-canceled-fg:   #721c24;
  --badge-own-use-bg:    #d1ecf1;
  --badge-own-use-fg:    #0c5460;
  --badge-blocked-bg:    #d6d8db;
  --badge-blocked-fg:    #383d41;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs:  0.75em;
  --font-size-sm:  0.85em;
  --font-size-base: 0.9em;
  --font-size-md:  0.95em;
  --font-size-lg:  1.1em;
  --font-size-xl:  1.2em;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 10px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.3);
}