/* ==========================================================================
   MPAATANEL DESIGN SYSTEM — Core Variables
  Cobalt, midnight, cyan, and amber palette. Automotive trade aesthetic.
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --navy-950: #060e1f;
  --navy-900: #081c45;
  --navy-800: #0d2c68;
  --navy-700: #15418c;
  --navy-600: #1d5bb5;
  --navy-500: #377ee2;

  --gold-400: #00b5ec;
  --gold-500: #0529f4;
  --gold-600: #355dee;
  --gold-700: #0000bc;

  /* ---- Neutral canvas ---- */
  --bg-canvas: #f2f6fc;
  --bg-canvas-alt: #e8eef8;
  --bg-card: #ffffff;
  --bg-card-alt: #FCFCFD;
  --border-subtle: #dbe4f1;
  --border-strong: #c5d2e5;

  --text-primary: #11254b;
  --text-secondary: #526786;
  --text-muted: #7890ad;
  --text-inverse: #F7F8FA;
  --text-inverse-muted: #A8B3CC;

  /* ---- Semantic ---- */
  --success-50: #E9F8F1;
  --success-500: #1F9D6B;
  --success-600: #177d54;

  --warning-50: #FEF6E7;
  --warning-500: #F0A93E;
  --warning-600: #2659cf;

  --danger-50: #FCEBEA;
  --danger-500: #E1483B;
  --danger-600: #c02f24;

  --info-50: #EAF1FF;
  --info-500: #3E7BFA;
  --info-600: #2a5fd6;

  /* ---- Role accents ---- */
  --role-sales: #1768d5;
  --role-sales-bg: #e7f0ff;
  --role-finance: #078f86;
  --role-finance-bg: #e3f7f5;
  --role-logistics: #c98218;
  --role-logistics-bg: #fff2d8;
  --role-admin: #0c849b;
  --role-admin-bg: #e2f5f8;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 30, 61, 0.04);
  --shadow-sm: 0 2px 8px rgba(11, 30, 61, 0.06);
  --shadow-md: 0 4px 24px rgba(11, 30, 61, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 30, 61, 0.12);
  --shadow-gold-glow: 0 4px 20px rgba(212, 169, 74, 0.25);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Spacing 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;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Typography ---- */
  --font-heading: 'Sora', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Layout ---- */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 84px;
  --topbar-height: 72px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 220ms var(--ease-out);
  --transition-slow: 380ms var(--ease-out);
}