/* ─────────────────────────────────────────────
   NPIA Design Tokens — single source of truth
   ───────────────────────────────────────────── */

/* IBM Plex Sans — vendored locally */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

/* IBM Plex Mono — vendored locally */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
}

:root {
  /* ─── Layout ─── */
  --rail-width: 72px;
  --sidebar-width: 280px;
  --layout-max-width: 1280px;
  --layout-content-width: 960px;

  /* ─── Sidebar palette (dark navy) ─── */
  --color-base-dark:     #0B1F3A;
  --color-base-darker:   #07182E;
  --color-sidebar:       #102B4C;
  --color-sidebar-rail:  #08213F;
  --color-sidebar-border: rgba(125, 179, 255, 0.18);

  /* ─── Content palette (light) ─── */
  --color-bg:            #F4F7FB;
  --color-surface:       #FFFFFF;
  --color-surface-soft:  #F9FBFE;
  --color-surface-alt:   #F1F5F9;
  --color-border:        #DDE6F1;
  --color-border-strong: #C7D4E5;

  /* ─── Text ─── */
  --color-text:          #10233F;
  --color-text-muted:    #64748B;
  --color-text-soft:     #94A3B8;
  --color-text-subtle:   #94A3B8;
  --color-text-light:    #EAF3FF;

  /* ─── Status (used sparingly in this feature; reserved for future phases) ─── */
  --color-blue:          #2563EB;
  --color-blue-soft:     #DBEAFE;
  --color-blue-muted:    #8DBBFF;
  --color-blue-hover:    #1D4ED8;

  --color-success:       #047857;
  --color-success-soft:  #D1FAE5;
  --color-warning:       #B45309;
  --color-warning-soft:  #FEF3C7;
  --color-danger:        #B91C1C;
  --color-danger-soft:   #FEE2E2;
  --color-info:          #1E40AF;
  --color-info-soft:     #DBEAFE;

  /* ─── Severity (matches enum) ─── */
  --color-severity-blocking: #B91C1C;
  --color-severity-high:     #C2410C;
  --color-severity-medium:   #B45309;
  --color-severity-low:      #4D7C0F;

  /* ─── Spacing scale (rem-based, 4px grid) ─── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* ─── Typography ─── */
  --font-ui:        "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-technical: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Aliases retained for components.css compatibility */
  --font-sans: var(--font-ui);
  --font-mono: var(--font-technical);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

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

  /* ─── Borders & radii ─── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-card: 20px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 18px 40px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sidebar-active: 0 16px 32px rgba(0, 0, 0, 0.18);

  /* ─── Motion ─── */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 320ms ease-out;
}