/* ============================================================
   DONOR REPORTING DASHBOARD — Theme & Design Tokens
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary:        #2E7D32;
  --color-primary-dark:   #1B5E20;
  --color-primary-light:  #4CAF50;
  --color-primary-subtle: #E8F5E9;
  --color-executive:      #1A237E;
  --color-executive-light:#3949AB;
  --color-executive-subtle:#E8EAF6;
  --color-gold:           #F9A825;
  --color-gold-dark:      #F57F17;
  --color-gold-subtle:    #FFF8E1;

  /* Semantic Colors */
  --color-success:        #2E7D32;
  --color-success-bg:     #E8F5E9;
  --color-warning:        #E65100;
  --color-warning-bg:     #FFF3E0;
  --color-danger:         #C62828;
  --color-danger-bg:      #FFEBEE;
  --color-info:           #01579B;
  --color-info-bg:        #E1F5FE;

  /* Neutral */
  --color-white:          #FFFFFF;
  --color-bg:             #F4F6F9;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F8FAFB;
  --color-border:         #E0E6ED;
  --color-border-light:   #F0F4F8;
  --color-text-primary:   #1A2332;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #718096;
  --color-text-disabled:  #A0AEC0;

  /* Typography */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.6875rem;   /* 11px */
  --font-size-sm:         0.75rem;     /* 12px */
  --font-size-base:       0.875rem;    /* 14px */
  --font-size-md:         1rem;        /* 16px */
  --font-size-lg:         1.125rem;    /* 18px */
  --font-size-xl:         1.25rem;     /* 20px */
  --font-size-2xl:        1.5rem;      /* 24px */
  --font-size-3xl:        1.875rem;    /* 30px */
  --font-size-4xl:        2.25rem;     /* 36px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-kpi: 0 4px 20px rgba(46,125,50,.12), 0 2px 6px rgba(46,125,50,.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 400ms cubic-bezier(.34,1.56,.64,1);

  /* Z-index layers */
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-header:   50;

  /* Header */
  --header-height: 72px;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg:             #0F1117;
  --color-surface:        #1A1F2E;
  --color-surface-2:      #232939;
  --color-border:         #2D3748;
  --color-border-light:   #1E2533;
  --color-text-primary:   #F7FAFC;
  --color-text-secondary: #CBD5E0;
  --color-text-muted:     #718096;
  --color-text-disabled:  #4A5568;
  --color-primary-subtle: #1B3A1F;
  --color-executive-subtle:#1A1F3A;
  --color-gold-subtle:    #2A1F00;
  --color-success-bg:     #1B2E1C;
  --color-warning-bg:     #2A1A00;
  --color-danger-bg:      #2A1010;
  --color-info-bg:        #0A1E2A;
  --shadow-md:  0 4px 12px rgba(0,0,0,.30);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.40);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.50);
  --shadow-kpi: 0 4px 20px rgba(46,125,50,.20);
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--transition-slow), color var(--transition-slow);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-border-light); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Selection ── */
::selection { background: var(--color-primary-subtle); color: var(--color-primary-dark); }