/* =============================================================
   Navigator Design System — Foundations
   Color + Type tokens. Light mode only.
   DM Sans + DM Mono via Google Fonts.
   ============================================================= */

:root {
  /* ---------- Font families ---------- */
  --font-primary: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* ---------- Type scale ---------- */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-h4:   15px;
  --text-h3:   17px;
  --text-h2:   20px;
  --text-h1:   26px;
  --text-mono: 14px;

  --leading-tight: 1.2;
  --leading-snug:  1.3;
  --leading-base:  1.5;
  --leading-loose: 1.6;

  /* ---------- Brand colors ---------- */
  --color-brand-navy: #2C3E6B;
  --color-brand-sage: #6E8F76;
  --color-topo-line:  #B5CCB8;

  /* ---------- Navy scale ---------- */
  --color-navy-50:  #EEF0F5;
  --color-navy-100: #C8CEDF;
  --color-navy-200: #A0AACB;
  --color-navy-400: #6A7BAD;
  --color-navy-600: #3D527E;
  --color-navy-700: #2C3E6B;
  --color-navy-800: #1E2D50;
  --color-navy-900: #111C35;

  /* ---------- Sage scale ---------- */
  --color-sage-50:  #F0F5F1;
  --color-sage-100: #D9E8DC;
  --color-sage-200: #B5CCB8;
  --color-sage-400: #8BAF92;
  --color-sage-600: #6E8F76;
  --color-sage-700: #4A6B52;
  --color-sage-800: #2E4A34;
  --color-sage-900: #1A2E1E;

  /* ---------- Neutrals ---------- */
  --color-white:    #FFFFFF;
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* ---------- Semantic status ---------- */
  --color-success:    #3D7A52;
  --color-success-bg: #EAF4EE;
  --color-warning:    #B87B1A;
  --color-warning-bg: #FDF3E0;
  --color-error:      #C0392B;
  --color-error-bg:   #FDECEA;
  --color-info:       #2C5F8A;
  --color-info-bg:    #E8F0F7;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Border radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.0,.0,1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}