/* ═══════════════════════════════════════════════════════════
   V2 Civil Diagnostics — CSS Design Tokens (variables.css)
   Source: 04_GLOBAL_STYLES.md
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #2E8B8B;
  --color-primary-dark: #1E6B6B;
  --color-primary-light: #E6F4F4;
  --color-secondary: #E8722A;
  --color-secondary-dark: #C95E1F;
  --color-secondary-light: #FFF3EB;

  /* ── Neutral Colors ── */
  --color-charcoal: #2D2D2D;
  --color-dark-grey: #4A4A4A;
  --color-medium-grey: #6B7280;
  --color-light-grey: #E5E7EB;
  --color-off-white: #F9FAFB;
  --color-white: #FFFFFF;
  --color-footer-dark: #374151;
  --color-footer-text: #D1D5DB;
  --color-copyright-bg: #1F2937;
  --color-copyright-text: #9CA3AF;
  --color-placeholder: #9CA3AF;

  /* ── Semantic Colors ── */
  --color-success: #16A34A;
  --color-warning: #EAB308;
  --color-error: #DC2626;
  --color-info: #2563EB;
  --color-link: #2E8B8B;
  --color-link-hover: #E8722A;

  /* ── Typography ── */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', Roboto, sans-serif;

  /* ── Spacing (8px grid) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-cta: 0 2px 8px rgba(232, 114, 42, 0.25);

  /* ── Border Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* ── Layout ── */
  --content-width: 1140px;
  --side-padding-mobile: 20px;
  --side-padding-tablet: 32px;

  /* ── Header ── */
  --header-height-desktop: 90px;
  --header-height-mobile: 70px;

  /* ── Mobile Bottom Bar ── */
  --mobile-bar-height: 56px;
}

/* Breakpoints (reference — use in @media queries):
   Tablet:  @media (min-width: 768px)
   Desktop: @media (min-width: 1024px)
*/