/*
 * ICA-MIS design tokens. Change values here, never in components.
 * "PDF" = measured from Docs/ICA DELIVERABLE 4_SEPT 23.pdf wireframes (Tailwind palette values).
 * Breakpoints (CSS variables cannot be used in media queries): sm 640px, lg 1024px, xl 1280px.
 */
:root {
  /* Brand and surfaces */
  --color-sidebar: #0b1329;          /* PDF */
  --color-sidebar-hover: #1e293b;
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-muted: #8391a7;
  --color-primary: #1d4ed8;          /* PDF */
  --color-primary-hover: #1e40af;
  --color-primary-soft: #eff6ff;     /* PDF */
  --color-page: #f8fafc;             /* PDF */
  --color-surface: #ffffff;          /* PDF */
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;           /* PDF */
  --color-border-strong: #cbd5e1;

  /* Text */
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;      /* placeholders only, not for content */
  --color-on-primary: #ffffff;

  /* Semantic */
  --color-accent: #b45309;           /* PDF: second chart series */
  --color-success: #15803d;
  --color-success-soft: #dcfce7;     /* PDF */
  --color-warning: #92400e;
  --color-warning-soft: #fef3c7;
  --color-danger: #b91c1c;           /* PDF */
  --color-danger-soft: #fee2e2;
  --color-info: #1d4ed8;
  --color-info-soft: #eff6ff;

  /* Typography (Inter, as in the wireframes) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --shadow-pop: 0 10px 30px rgb(15 23 42 / 14%);
  --focus-ring: 0 0 0 3px rgb(29 78 216 / 35%);

  /* Component sizes */
  --control-h: 40px;
  --control-h-sm: 32px;
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --content-max: 1280px;
}