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

:root {
  /* ── Brand colors ──────────────────────────────────────────── */
  /* Day Shift. The chrome is white; a single fire-service red carries the
     brand, used only for the top rule, the active menu item and primary
     buttons. The --navy names are kept so no component has to change. */
  --navy:        #a4242b;
  --navy-light:  #bf3138;
  --navy-dark:   #8f1f25;
  /* 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:    #12171d;
  --text-secondary:  #2b333d;
  --text-muted:      #5d6774;
  --text-on-navy:    #ffffff;

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

  /* ── Backgrounds ───────────────────────────────────────────── */
  --bg-body:          #f4f6f8;
  --bg-panel:         #ffffff;
  --bg-card:          #ffffff;
  --bg-sidebar:       #ffffff;
  --bg-topbar:        #ffffff;
  --bg-hover:         #f7f9fa;

  /* ── 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(18,23,29,0.04);
  --shadow:      0 1px 2px rgba(18,23,29,0.05), 0 1px 3px rgba(18,23,29,0.04);
  --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;

  /* Raised one step throughout. This is the largest readability change:
     body text goes 14 -> 16 and the smallest label 11 -> 12. Dark mode
     inherits this scale, so both themes read the same size. */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-lg:     18px;
  --text-xl:     20px;
  --text-2xl:    25px;
  --text-3xl:    32px;

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

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

  /* ── App chrome ─────────────────────────────────────────────
     The top bar, the program-name strip and the sidebar. These used to be
     written directly into layout.css, which meant tokens.css could not
     actually re-theme the app despite saying so at the top of this file.
     They are tokens now, so a theme change happens here and nowhere else.
     Dark mode overrides them further down. */
  --topbar-bg:         #ffffff;
  --topbar-bg-2:       #ffffff;
  --topbar-ink:        #12171d;
  --topbar-ink-dim:    #5d6774;
  --topbar-rule:       #a4242b;
  --topbar-rule-size:  3px;
  --topbar-shadow:     0 1px 2px rgba(18,23,29,0.06);
  --topbar-title-shadow: none;
  /* Action colours. The brand red still carries the identity - the rule
     under the top bar, the active menu item - but it is no longer the
     colour of every button. Red now means only one thing: this will remove
     something. Ordinary actions are blue, which stays clearly distinct from
     red in a way green does not always. */
  --btn-primary-bg:    #1c5fa8;
  --btn-primary-bg2:   #2470c4;
  --btn-primary-line:  #164a83;

  /* Key card labels. Printed in quantity on a black and white laser, so
     no filled bands. */
  --kca-header-bg:     #ffffff;
  --kca-header-ink:    #12171d;
  --kca-header-rule:   #222222;

  --version-bg:        #1c5fa8;
  --version-ink:       #ffffff;
  /* Deliberately pale against the solid red of a verified badge: filled
     versus hollow reads at a glance even before the colour registers, and
     the two differ in brightness by roughly 6:1 rather than being two warm
     tones of the same weight. */
  /* Annual Renewal Register - a printed working document, so light
     backgrounds with near-black text rather than solid dark panels. */
  --reg-band-bg:       #f3f5f7;
  --reg-band-ink:      #12171d;
  --reg-band-dim:      #5d6774;
  --reg-band-rule:     #a4242b;
  --reg-th-bg:         #e8ebee;
  --reg-th-ink:        #12171d;

  --version-bg-warn:   #e2e8f0;
  --version-ink-warn:  #0f172a;
  --version-line-warn: #94a3b8;
  --topbar-btn-bg:     #ffffff;
  --topbar-btn-bg-h:   #f4f6f8;
  --topbar-btn-line:   #d4d9df;
  --topbar-btn-line-h: #a4242b;

  /* Help Guide overlay. Kept dark deliberately - it is a self-contained
     panel, not app chrome. Tokenised so it can be changed here if wanted. */
  --hg-bg:             linear-gradient(180deg, #0f172a 0%, #0c1322 100%);
  --hg-ink:            rgba(255,255,255,0.85);
  --hg-ink-strong:     #ffffff;
  --hg-ink-dim:        rgba(255,255,255,0.55);
  --hg-line:           rgba(255,255,255,0.08);
  --hg-hover:          rgba(255,255,255,0.08);
  --hg-active:         rgba(255,255,255,0.12);

  /* A distinct informational blue, separate from the brand accent, used by
     the Lifetime tile and info toasts. Unchanged from today. */
  --accent-blue-grad:  linear-gradient(135deg, #2563eb 0%, #1b3a5c 100%);
  --accent-blue-deep:  #1b3a5c;
  /* Sub-navigation inside the Backup and Configuration panels. Light, to
     match the rest of the chrome. */
  --subnav-bg:         #f7f9fa;
  --subnav-ink:        #3d4757;
  --subnav-ink-dim:    #7a8494;
  --subnav-hover:      #eef1f4;
  --subnav-active:     #fdf0f0;
  --subnav-line:       #e3e7ec;
  --subnav-ink-active: #8f1f25;

  --note-bg:           #f7f9fa;
  --note-line:         #dbe2e9;
  --note-ink:          #2b333d;

  --strip-bg:          #ffffff;
  --strip-bg-2:        #ffffff;
  --strip-ink:         #12171d;
  --strip-line:        #e3e7ec;

  /* ── Sidebar theme ─────────────────────────────────────────── */
  --sidebar-bg:          #ffffff;
  --sidebar-bg-hover:    #f4f6f8;
  --sidebar-bg-active:   #fdf0f0;
  --sidebar-text:        #3d4757;
  --sidebar-text-active: #8f1f25;
  --sidebar-border:      #e3e7ec;
  --sidebar-grp:         #8b95a3;
  --sidebar-desc:        #7a8494;
  --sidebar-mark:        inset 3px 0 0 #a4242b;
  --sidebar-user-ink:    #3d4757;
  --sidebar-user-dim:    #7a8494;
  --sidebar-logout-bg:   #f4f6f8;
  --sidebar-logout-bg-h: #fdf0f0;
  --sidebar-logout-ink:  #8f1f25;

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

  /* Chrome, dark mode: unchanged from how the app looks today. */
  --topbar-bg:         #162d4e;
  --topbar-bg-2:       #1a3358;
  --topbar-ink:        #ffffff;
  --topbar-ink-dim:    rgba(255,255,255,0.72);
  --topbar-rule:       #c9a35b;
  --topbar-rule-size:  2px;
  --topbar-shadow:     0 2px 8px rgba(0,0,0,0.25);
  --topbar-title-shadow: 0 1px 2px rgba(0,0,0,0.2);
  --btn-primary-bg:    #2470c4;
  --btn-primary-bg2:   #3a86d8;
  --btn-primary-line:  #1c5fa8;

  --version-bg:        #2470c4;
  --version-ink:       #ffffff;
  --reg-band-bg:       #f3f5f7;
  --reg-band-ink:      #12171d;
  --reg-band-dim:      #5d6774;
  --reg-band-rule:     #a4242b;
  --reg-th-bg:         #e8ebee;
  --reg-th-ink:        #12171d;

  --version-bg-warn:   #1e293b;
  --version-ink-warn:  #e2e8f0;
  --version-line-warn: #64748b;
  --topbar-btn-bg:     rgba(255,255,255,0.10);
  --topbar-btn-bg-h:   rgba(255,255,255,0.20);
  --topbar-btn-line:   rgba(255,255,255,0.20);
  --topbar-btn-line-h: rgba(255,255,255,0.35);

  --strip-bg:          #162d4e;
  --strip-bg-2:        #1e3a5f;
  --strip-ink:         #ffffff;
  --strip-line:        rgba(201,163,91,0.4);
  --subnav-bg:         #2c3e55;
  --subnav-ink:        rgba(255,255,255,0.75);
  --subnav-ink-dim:    rgba(255,255,255,0.5);
  --subnav-hover:      rgba(255,255,255,0.08);
  --subnav-active:     rgba(255,255,255,0.14);
  --subnav-line:       rgba(255,255,255,0.10);
  --subnav-ink-active: #ffffff;

  --note-bg:           #16233a;
  --note-line:         #24365a;
  --note-ink:          #cfe0f2;

  --sidebar-grp:         rgba(255,255,255,0.45);
  --sidebar-desc:        rgba(255,255,255,0.55);
  --sidebar-mark:        none;
  --sidebar-user-ink:    rgba(255,255,255,0.88);
  --sidebar-user-dim:    rgba(255,255,255,0.55);
  --sidebar-logout-bg:   rgba(255,255,255,0.08);
  --sidebar-logout-bg-h: rgba(255,255,255,0.16);
  --sidebar-logout-ink:  rgba(255,255,255,0.85);
  --bg-body:             #0f1523;
}