/* Design tokens as CSS custom properties — the restyle surface.
   Keep in sync with design.py PALETTE. Change look-and-feel here only.
   Direction: dark navy sidebar + light content, periwinkle-indigo accent,
   icon-badge KPI cards and a neat, horizontal-ruled data table (per design-refs/). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
:root {
  /* Brand / accent */
  --ps-primary: #5562ea;
  --ps-primary-dark: #3f4abd;
  --ps-primary-soft: #eef0fe;     /* light tint for pills / active nav / badges */
  --ps-accent: #12b3a6;

  /* Semantic */
  --ps-positive: #1f9d6b;
  --ps-negative: #d8453b;

  /* KPI icon-badge colours (icon fg + soft bg) */
  --ps-kpi-blue: #3b76f6;   --ps-kpi-blue-bg: #e8f0fe;
  --ps-kpi-amber: #e9a23b;  --ps-kpi-amber-bg: #fdf1df;
  --ps-kpi-green: #1f9d6b;  --ps-kpi-green-bg: #e6f6ee;

  /* Neutrals */
  --ps-text: #1b2333;
  --ps-text-muted: #6b7488;
  --ps-bg: #f4f6fa;
  --ps-surface: #ffffff;
  --ps-border: #e7eaf1;
  --ps-row-border: #f0f2f7;
  --ps-row-hover: #f8f9fc;

  /* Sidebar (dark navy) */
  --ps-sidebar: #0e1726;
  --ps-sidebar-2: #16213a;        /* hover / active row */
  --ps-sidebar-text: #9aa6bd;
  --ps-sidebar-active: #ffffff;

  /* Shape & rhythm */
  --ps-sidebar-w: 224px;
  --ps-topbar-h: 60px;
  --ps-radius: 12px;
  --ps-radius-sm: 8px;
  --ps-gap: 16px;
  --ps-gap-sm: 8px;
  --ps-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --ps-font: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}