/* ========================================
   CSS Custom Properties - Design System
   Minimal, functional color usage
   ======================================== */
:root {
  /* ======================================
     COLORS - Restrained palette
     ====================================== */

  /* Brand - used sparingly */
  --swiss-red: #d8232a;
  --federal-blue: #1a365d;
  --federal-blue-dark: #152c4f;

  /* Neutral backgrounds */
  --bg-white: #ffffff;
  --bg-subtle: #f8f9fa;
  --bg-muted: #f1f3f5;
  --bg-emphasis: #e9ecef;

  /* Functional colors - only when meaning is needed */
  --color-critical: #dc2626;
  --color-warning: #d97706;
  --color-success: #059669;

  /* Text hierarchy */
  --text-primary: #1a1a1a;
  --text-secondary: #495057;
  --text-muted: #868e96;
  --text-inverse: #ffffff;

  /* Borders - improved contrast */
  --border-default: #dee2e6;
  --border-strong: #ced4da;

  /* Interactive states */
  --interactive-hover: rgba(0, 0, 0, 0.04);
  --interactive-active: rgba(0, 0, 0, 0.08);
  --focus-ring: var(--federal-blue);

  /* Active/Selected states - more prominent */
  --bg-active: #e8eef5;
  --bg-active-emphasis: #dbe5f0;
  --border-active: #9db4cf;

  /* Data type indicators - muted, not decorative */
  --type-geo: #6366f1;
  --type-sap: #0891b2;
  --type-gwr: #059669;
  --type-address: #7c3aed;

  /* Overlay */
  --overlay: rgba(0, 0, 0, 0.4);

  /* ======================================
     TYPOGRAPHY
     ====================================== */

  /* Font Family */
  --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  /* Font Sizes - Accessible Scale (WCAG AA minimum 14px for body) */
  --font-xs: 11px;      /* Decorative only - use sparingly */
  --font-sm: 13px;      /* Badges, labels, metadata */
  --font-base: 14px;    /* Body text, buttons - minimum readable */
  --font-md: 15px;      /* Enhanced body text, table cells */
  --font-lg: 17px;      /* Section titles, card headers */
  --font-xl: 20px;      /* Page titles */
  --font-2xl: 28px;     /* Stat values */
  --font-3xl: 32px;     /* Hero numbers */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ======================================
     SPACING
     ====================================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  /* ======================================
     SIZING - Accessibility Focused
     ====================================== */

  /* Button Heights (44px minimum for touch targets) */
  --button-height-sm: 36px;   /* Small utility buttons */
  --button-height-md: 40px;   /* Standard buttons */
  --button-height-lg: 48px;   /* Primary CTAs */
  --touch-target-min: 44px;   /* WCAG AAA standard */

  /* Icon Sizes */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ======================================
     BORDER RADIUS
     ====================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ======================================
     SHADOWS - Minimal, functional
     ====================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ======================================
     TRANSITIONS
     ====================================== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ======================================
     LAYOUT
     ====================================== */
  --header-height: 64px;
  --detail-width: 580px;
  --sidebar-width: 320px;
  --max-content-width: 1400px;

  /* ======================================
     Z-INDEX SCALE
     ====================================== */
  --z-base: 1;           /* Component-internal stacking (labels over images) */
  --z-float: 10;         /* Floating UI within components (resize handles) */
  --z-dropdown: 100;     /* Dropdowns, menus, tooltips */
  --z-sticky: 500;       /* Sticky headers, fixed UI */
  --z-overlay: 1000;     /* Overlays, sidebars */
  --z-modal: 2000;       /* Modals, dialogs */
}