/* ================================================================
   tokens.css — Design tokens
   All colors, fonts, spacing, and other design primitives.
   Change these here to re-theme the entire app.
   ================================================================ */

:root {
  /* ── Brand colors ──────────────────────────────────────────── */
  --navy:        #1e3a5f;
  --navy-light:  #2c4a73;
  --navy-dark:   #14283f;
  /* Text/accent variant of navy — same as --navy in light mode, but
     lightened in dark mode so navy-colored headings/labels/active-tab
     text stay readable against dark surfaces. Use this for TEXT color;
     keep using --navy for backgrounds/borders (navy bg + white text
     already works in both themes). */
  --navy-text:   var(--navy);
  --gold:        #c9a35b;
  --emerald:     #16a34a;
  --amber:       #b45309;
  --red:         #b91c1c;
  --green:       #16a34a;

  /* ── Status colors ─────────────────────────────────────────── */
  --status-sm:        #16a34a;  /* Social Member */
  --status-af:        #7c3aed;  /* Active Fire */
  --status-lt:        #d97706;  /* Lifetime */
  --status-xx:        #6b7280;  /* Vendor */
  --status-dc:        #4b5563;  /* Deceased */
  --status-bn:        #dc2626;  /* Banned */
  --status-pn:        #b45309;  /* Pending */

  /* ── Yellow card (pending) ─────────────────────────────────── */
  --yellow:           #ca8a04;
  --yellow-bg:        #fffbeb;
  --yellow-border:    #fde68a;

  /* ── Neutrals ──────────────────────────────────────────────── */
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;

  /* ── Text colors ───────────────────────────────────────────── */
  --text-primary:    #111827;
  --text-secondary:  #4b5563;
  --text-muted:      #6b7280;
  --text-on-navy:    #ffffff;

  /* ── Borders & dividers ────────────────────────────────────── */
  --border:           #e5e7eb;
  --border-strong:    #d1d5db;
  --border-focus:     #3b82f6;

  /* ── Backgrounds ───────────────────────────────────────────── */
  --bg-body:          #e8ecf0;
  --bg-panel:         #ffffff;
  --bg-card:          #ffffff;
  --bg-sidebar:       #111827;
  --bg-topbar:        #1e3a5f;
  --bg-hover:         #f5f7fa;

  /* ── 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;

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      7px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadow ────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow:      0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-modal:0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);

  /* ── Typography ────────────────────────────────────────────── */
  --font-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Source Code Pro', 'SF Mono', Menlo, Monaco, monospace;

  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   14px;
  --text-lg:     16px;
  --text-xl:     18px;
  --text-2xl:    22px;
  --text-3xl:    28px;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── App shell dimensions ──────────────────────────────────── */
  --sidebar-width:   220px;
  --topbar-height:   54px;
  --content-max:     1400px;

  /* ── Sidebar theme (dark slate — readable) ─────────────────── */
  --sidebar-bg:          #2c3e55;
  --sidebar-bg-hover:    rgba(255,255,255,0.08);
  --sidebar-bg-active:   rgba(255,255,255,0.14);
  --sidebar-text:        rgba(255,255,255,0.72);
  --sidebar-text-active: #ffffff;
  --sidebar-border:      rgba(255,255,255,0.10);

  /* ── Z-index scale ─────────────────────────────────────────── */
  --z-sidebar:    10;
  --z-topbar:     20;
  --z-dropdown:   100;
  --z-modal-bg:   1000;
  --z-modal:      1001;
  --z-toast:      2000;

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast: 120ms ease-out;
  --transition:      200ms ease-out;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE
   Overrides only surfaces / text / borders. Brand & status accent
   colors stay the same so badges and tiles keep their meaning.
   Activated by <html data-theme="dark">.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Neutrals flipped so existing gray-* usages read correctly on dark */
  --white:       #1a2233;
  --gray-50:     #1e2738;
  --gray-100:    #232d40;
  --gray-200:    #313c52;
  --gray-300:    #3d4a63;
  --gray-400:    #6b7890;
  --gray-500:    #93a0b8;
  --gray-600:    #b3bed2;
  --gray-700:    #cdd5e3;
  --gray-800:    #e2e8f2;
  --gray-900:    #f1f4f9;

  /* Text */
  --text-primary:    #e8edf5;
  --text-secondary:  #b3bed2;
  --text-muted:      #8a97ad;
  --text-on-navy:    #ffffff;

  /* Navy used as TEXT (headings, labels, active-tab text, etc.) needs to
     be much lighter on dark surfaces than the brand navy itself, which
     stays dark for backgrounds/borders. */
  --navy-text:       #6ab0f5;

  /* Borders */
  --border:          #2c3750;
  --border-strong:   #3d4a63;
  --border-focus:    #5b8def;

  /* Surfaces */
  --bg-body:         #121829;
  --bg-panel:        #1a2233;
  --bg-card:         #1a2233;
  --bg-sidebar:      #161d2e;
  --bg-topbar:       #0f1626;
  --bg-hover:        #232d40;

  /* Yellow (pending) card — darker so text stays legible */
  --yellow-bg:       #2a2410;
  --yellow-border:   #4d4318;

  /* Shadows a touch stronger on dark */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow:      0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
  --shadow-modal:0 20px 25px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.4);
}

/* Light tile backgrounds set via inline styles (e.g. #fef2f2, #f8fafc) need
   a dark-mode nudge; soften them so red/blue wash doesn't glare. */

/* Smooth the switch */
body, .topbar, .sidebar, .panel-strip, .stat-card, .data-table, input, select, textarea, .modal, .alert {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ── Toast dark-mode overrides ──────────────────────────────────
   Toast text color must always be white regardless of theme.
   Semantic colors (amber/emerald/red) need brighter dark-mode
   variants so toasts remain readable on dark backgrounds.       */
.toast { color: #ffffff !important; }

[data-theme="dark"] .toast-success { background: #15803d; }
[data-theme="dark"] .toast-warn    { background: #b45309; filter: brightness(1.4); }
[data-theme="dark"] .toast-error   { background: #dc2626; }
[data-theme="dark"] .toast-info    { background: #1e40af; }
[data-theme="dark"] .toast         { background: #374151; }

/* ── Dark mode overrides ───────────────────────────────────── */
[data-theme="dark"] {
  --sidebar-bg:          #1e2d40;
  --sidebar-bg-hover:    rgba(255,255,255,0.07);
  --sidebar-bg-active:   rgba(255,255,255,0.12);
  --bg-body:             #0f1523;
}