/* Design tokens as CSS custom properties — the restyle surface.
   Keep in sync with design.py PALETTE. Change look-and-feel here only.
   Direction (2026 redesign): a calm near-neutral work surface — flat ground, opaque
   white cards, hairline borders, colour reserved for meaning (indigo = interactive,
   green = within budget, amber = attention, red = destructive/over). Atmosphere is
   spent only on the login screen. See docs/redesign/DESIGN-GUIDANCE.md. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+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;

  /* The advisor. Its own orchid, a step from the indigo toward pink, so an answer
     written by the AI never reads as part of the app's own screens. */
  --ps-ai: #b24ccf;
  --ps-ai-dark: #8a2ea8;
  --ps-ai-soft: #f8edfc;
  --ps-ai-border: #ecd3f5;
  --ps-ai-grad: linear-gradient(135deg, #7b6cf0 0%, #b24ccf 55%, #e05a9e 100%);

  /* Semantic */
  --ps-positive: #1f9d6b;
  --ps-negative: #d8453b;
  --ps-warn: #9a6a1a;             /* "needs attention" text */
  --ps-warn-bg: #fbf1de;          /* attention chip / banner fill */
  --ps-warn-border: #eadfc3;
  --ps-warn-solid: #e9a23b;       /* attention count badge */

  /* 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: #667085;
  --ps-faint: #98a1b3;            /* caps labels, axis text, placeholders */
  --ps-bg: #f5f6f8;               /* flat page ground */
  --ps-surface: #ffffff;
  --ps-border: #e5e8ef;           /* hairline */
  --ps-row-border: #f0f2f7;
  --ps-row-hover: #f8f9fc;
  --ps-field-bg: #fbfbfd;         /* inputs / search boxes */

  /* Sidebar (light card — see glass.css) */
  --ps-sidebar: #ffffff;
  --ps-sidebar-2: #f4f5f9;        /* hover row */
  --ps-sidebar-text: #667085;
  --ps-sidebar-active: #5562ea;

  /* Shape & rhythm */
  --ps-sidebar-w: 224px;
  --ps-sidebar-w-rail: 56px;   /* collapsed: icons only */
  --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: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}