/* BlueAnt Migration Dashboard — Design Tokens (Direction A: Editorial White) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Page & Surface */
  --page-bg: #EEF2F7;
  --card-bg: #FFFFFF;
  --surface-2: #F6F8FB;
  --surface-3: #E8EDF5;
  --surface-4: #D8E0EE;

  /* Borders */
  --border-1: rgba(10,25,60,0.07);
  --border-2: rgba(10,25,60,0.12);

  /* Brand Teal */
  --teal: #0099BB;
  --teal-2: #00B5CC;
  --teal-lo: rgba(0,153,187,0.09);
  --teal-mid: rgba(0,153,187,0.20);

  /* Hero Gradient */
  --hero-start: #007899;
  --hero-mid: #00AABF;
  --hero-end: #00C4D8;

  /* Semantic Colors */
  --red: #C8202E;
  --red-lo: rgba(200,32,46,0.09);
  --amb: #B55800;
  --amb-lo: rgba(181,88,0,0.09);
  --grn: #1A8C4E;
  --grn-lo: rgba(26,140,78,0.09);
  --blu: #1852C8;
  --blu-lo: rgba(24,82,200,0.09);

  /* Text Scale */
  --text-1: #0A1928;
  --text-2: #3A506A;
  --text-3: #8098B5;
  --text-4: #B8C8DC;

  /* Fonts */
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Radius */
  --radius-card: 16px;
  --radius-hero: 18px;
  --radius-nav: 10px;
  --radius-aud: 10px;
  --radius-aud-btn: 8px;
  --radius-chip: 20px;
  --radius-badge: 20px;
  --radius-icon: 10px;
  --radius-nav-icon: 8px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(10,25,60,0.05);
  --shadow-hero: 0 8px 32px rgba(0,153,187,0.28), 0 2px 8px rgba(0,153,187,0.15);
  --shadow-topbar: 0 1px 4px rgba(10,25,60,0.04);
  --shadow-aud-active: 0 2px 10px rgba(0,153,187,0.30);

  /* Layout */
  --sidebar-width: 228px;
  --topbar-height: 58px;
  --content-padding: 26px 28px 40px;
  --card-body-padding: 18px 22px;
  --card-head-padding: 14px 22px;
  --card-gap: 16px;
  --row-gap: 16px;
}