/* MissionOS – design tokens: single source of truth for palette, spacing, motion */

/* Responsive root: 14px on small viewports → 16px on large (all rem-based sizes scale) */
html {
  font-size: clamp(14px, 0.25vw + 13.5px, 16px);
}

:root {
  /* ─── Spacing scale (4px base) – use for padding, gaps, margins ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ─── Motion – consistent transitions across components ─── */
  --ease: ease;
  --ease-out: ease-out;
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.25s;

  /* ─── Focus – visible keyboard focus ring (a11y) ─── */
  --focus-ring: 3px solid var(--mo-dark-teal, #075056);
  --focus-ring-offset: 2px;

  /* Brand Colors */
  --mo-orange: #FD5902;       /* BLAZE ORANGE - Brand color */
  --mo-orange-hover: #e04f02; /* Darker shade for hover */
  --mo-orange-active: #c44502; /* Darker shade for active */
  
  /* Primary Colors */
  --mo-ivory: #FCF9E8;        /* IVORY - Background */
  --mo-jet-black: #1C2831;    /* JET BLACK - Dark text/elements */
  
  /* Secondary Colors */
  --mo-white: #FFFFFF;        /* WHITE */
  --mo-thugeston: #1C2831;    /* Dark background for reports menu (same as jet-black; adjust if different) */
  --mo-light-blue: #AACFDF;   /* LIGHT BLUE - Accents, links */
  --mo-light-blue-hover: #8bb8cc; /* Darker light blue for hover */
  --mo-dark-teal: #075056;    /* DARK TEAL - Primary for links, active states */
  --mo-dark-teal-hover: #063d42; /* Darker teal for hover */
  --mo-dark-teal-light: #e6f0f1; /* Light teal for backgrounds */
  --mo-black: #000000;        /* BLACK */
  
  /* Legacy/Compatibility - Using brand colors */
  --mo-primary: #075056;      /* DARK TEAL - Primary for links, active states */
  --mo-primary-hover: #063d42;
  --mo-primary-light: #e6f0f1;
  /* Light neutrals – prefer near-white over mid-grey blocks */
  --mo-bg: #fbfcfe;           /* Very light grey background */
  --mo-muted: #8d96a0;
  --mo-muted2: #6b7280;       /* Slightly darker muted (labels, captions) */
  --mo-border: #e7edf4;       /* Lighter border */
  --mo-border-soft: #f3f6fa;  /* Very light grey surfaces */
  --mo-card: #FFFFFF;         /* WHITE - Card backgrounds */
  --mo-dark: #1C2831;         /* JET BLACK - Dark elements / text */
  --mo-shadow: 0 6px 18px rgba(33, 37, 41, 0.08);
  
  /* Standardized Font Sizes */
  --mo-font-xs: 0.75rem;      /* 12px - Section titles, captions */
  --mo-font-sm: 0.875rem;     /* 14px - Labels, helper text, small text */
  --mo-font-base: 1rem;       /* 16px - Base body text */
  --mo-font-md: 1.125rem;     /* 18px - Subheadings */
  --mo-font-lg: 1.25rem;      /* 20px - Card titles, important text */
  --mo-font-xl: 1.5rem;       /* 24px - Main headings */
}

/* Dark theme: topbar overrides in styles.css (.topbar--dark). Side map strip: html[data-theme="dark"] .mapToolsStrip. */