:root {
  /* Brand - blue is the only brand color; flat, no gradients.
     UI palette: blue (info), green (success), red (danger), amber (warning). */
  --brand-primary: #2563EB;
  --brand-primary-light: #EFF6FF;
  --brand-primary-soft: #DBEAFE;

  --bg-page: #F4F6FA;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F9FC;
  --bg-hover: #F1F5FB;
  --bg-inset: #F2F5FA;
  --bg-page-tint: #F8FAFD;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: var(--brand-primary);

  --border-light: #EDF1F6;
  --border-default: #DCE3ED;
  --border-strong: #CBD5E1;
  --border-focus: var(--brand-primary);

  --info: #2563EB;
  --info-soft: #EFF6FF;

  --success: #16A34A;
  --success-soft: #F0FDF4;

  --danger: #DC2626;
  --danger-soft: #FEF2F2;

  --warning: #D97706;
  --warning-soft: #FFFBEB;

  /* Chart/classification colors only - never promoted to brand or semantic use. */
  --chart-blue: #2563EB;
  --chart-green: #16A34A;
  --chart-red: #DC2626;
  --chart-amber: #D97706;

  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale: 10 12 14 16 18 */
  --text-xs: 10px;
  --text-s: 12px;
  --text-m: 14px;
  --text-l: 16px;
  --text-xl: 18px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-relaxed: 1.5;
  --leading-tight: 1.25;

  /* Spacing scale: 4 8 12 16 20 24 28 32 */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* Surface padding - card surfaces use the requested 18px card value;
     dialogs use the shared 24px value. */
  --page-padding: var(--space-24);
  --card-padding: 18px;
  --dialog-padding: var(--space-24);

  /* Radius scale: 4 8 12 16 20 24 */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;

  /* Radius roles: inner chips 4, controls (buttons, inputs, tags, menu
     items) 8, cards and dropdown panels 12, dialogs 16, pills 20. */
  --radius-control: var(--radius-8);
  --radius-card: var(--radius-12);
  --radius-dialog: var(--radius-16);
  --radius-pill: var(--radius-20);

  /* Responsive standard for the full project: Mobile View at 767px and below;
     Desktop View at 768px and above. Use max-width: 767.98px for mobile rules;
     desktop styles are the default. */

  --shadow-none: none;
  /* Shadows are disabled across the interface; keep aliases for legacy
     selectors so every surface follows the same flat treatment. */
  --shadow-card: none;
  --shadow-header: none;
  --shadow-focus: none;
  --shadow-primary: none;
  --shadow-emphasis: none;
  --shadow-popover: none;
  --overlay-scrim: rgba(15, 23, 42, 0.4);

  --header-height: 56px;
  --footer-height: 40px;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 72px;
  /* Icon scale: 16 20 24 28 32 */
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 28px;
  --icon-size-2xl: 32px;
  /* Shared icon + stacked text lockup used by brand, profile, KPI and titles. */
  --identity-icon-size: var(--icon-size-2xl);
  --identity-gap: var(--space-12);
  --identity-text-gap: 2px;
  --identity-text-offset-y: 2px;
  --avatar-size: 32px;
  /* Controls: 36px for buttons/inputs/segmented, 28px for compact controls
     (row action buttons, pagination, picker nav, page-size select). */
  --control-height-s: 28px;
  --control-height-m: 36px;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}