/* =====================================================================
   NPSIMS · Design Tokens
   Every color, radius, shadow, motion curve, spacing step in the system
   flows from this file. Change here → the whole product re-skins.
   ===================================================================== */

:root {
  /* ---------- Brand palette (derived from the NPS crest) ---------- */
  --nps-navy-950: #060F24;
  --nps-navy-900: #0B2545;   /* primary — sidebar, hero, headers */
  --nps-navy-800: #103166;
  --nps-navy-700: #1A408A;
  --nps-navy-600: #2A5AB0;
  --nps-navy-500: #3C74C9;
  --nps-navy-400: #6D9AE0;
  --nps-navy-300: #9EBEEB;
  --nps-navy-200: #C7DAF3;
  --nps-navy-100: #E4EEF9;
  --nps-navy-50:  #F2F6FC;

  --nps-gold-900: #6B540C;
  --nps-gold-800: #8A6D18;
  --nps-gold-700: #A88822;
  --nps-gold-600: #C9A227;   /* accent — rank, badges, hovers */
  --nps-gold-500: #D9B94A;
  --nps-gold-400: #E4CB74;
  --nps-gold-300: #EFDDA0;
  --nps-gold-200: #F5EAC4;
  --nps-gold-100: #FAF3DF;

  /* ---------- Kenya-flag markers (ceremonial use only) ---------- */
  --ke-red:     #BE0027;
  --ke-green:   #006B3F;
  --ke-black:   #0A0A0A;

  /* ---------- Semantic ---------- */
  --success:  #059669;
  --warning:  #D97706;
  --danger:   #DC2626;
  --info:     #0EA5E9;
  --critical: #BE0027;
  --pending:  #D97706;
  --resolved: #059669;

  /* ---------- Neutrals ---------- */
  --surface-0: #FFFFFF;
  --surface-1: #FBFCFD;
  --surface-2: #F5F7FA;
  --surface-3: #EDF0F4;
  --surface-4: #E2E7ED;

  --ink-0: #0F172A;   /* strongest text */
  --ink-1: #1F2937;
  --ink-2: #475569;   /* body */
  --ink-3: #64748B;
  --ink-4: #94A3B8;   /* muted */
  --ink-5: #CBD5E1;   /* disabled */

  --border-1: #E5E9EF;
  --border-2: #CFD6DF;
  --border-3: #A9B4C1;

  /* ---------- Elevation (shadows) ---------- */
  --shadow-1: 0 1px 2px rgba(11, 37, 69, 0.06),
              0 1px 1px rgba(11, 37, 69, 0.04);
  --shadow-2: 0 4px 10px rgba(11, 37, 69, 0.08),
              0 2px 4px rgba(11, 37, 69, 0.05);
  --shadow-3: 0 12px 28px rgba(11, 37, 69, 0.14),
              0 4px 8px rgba(11, 37, 69, 0.06);
  --shadow-4: 0 24px 48px rgba(11, 37, 69, 0.22),
              0 8px 16px rgba(11, 37, 69, 0.10);
  --shadow-gold: 0 6px 24px rgba(201, 162, 39, 0.28);
  --glow-gold:  0 0 0 3px rgba(201, 162, 39, 0.28);
  --glow-navy:  0 0 0 3px rgba(60, 116, 201, 0.28);

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- Spacing scale (4pt) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif Pro", "Times New Roman", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.02em;
  --tracking-widest: 0.14em;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-lazy: 720ms;

  --ease-out:      cubic-bezier(.16, .84, .32, 1);
  --ease-in-out:   cubic-bezier(.4, 0, .2, 1);
  --ease-emphasis: cubic-bezier(.2, .9, .1, 1);
  --ease-spring:   cubic-bezier(.18, .89, .32, 1.28);

  /* ---------- Layout ---------- */
  --page-max: 1440px;
  --content-max: 1200px;
  --gutter-desktop: 32px;
  --gutter-mobile:  16px;

  --sidebar-w: 260px;
  --sidebar-collapsed-w: 72px;
  --topbar-h: 64px;
  --mobile-tabbar-h: 64px;

  /* ---------- Z-index scale ---------- */
  --z-base:     1;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-topbar:   500;
  --z-drawer:   800;
  --z-modal:    900;
  --z-toast:    1000;
  --z-tooltip:  1100;
  --z-max:      9999;
}

/* ---------- Dark surface (used on the IC4 command wall, hero panels) ---------- */
[data-theme="dark"],
.on-dark {
  --surface-0: #0A1428;
  --surface-1: #0F1E3D;
  --surface-2: #142752;
  --surface-3: #1B3266;
  --surface-4: #253E7A;

  --ink-0: #F8FAFC;
  --ink-1: #E2E8F0;
  --ink-2: #CBD5E1;
  --ink-3: #94A3B8;
  --ink-4: #64748B;
  --ink-5: #475569;

  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-3: rgba(255, 255, 255, 0.22);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-4: 0 24px 48px rgba(0, 0, 0, 0.6);
}