/**
 * Theme CSS - Design Tokens & Global Styles
 * Centralizes colors, typography, spacing, and other design tokens
 * Part of SENTRY Treemap modular refactoring
 */

:root {
  /* Brand Colors */
  --color-brand-primary: #005EB8;
  --color-brand-primary-rgb: 0, 94, 184;
  
  /* Risk Band Colors (Muted Chevron palette) */
  --color-risk-red: #a01f2c;
  --color-risk-amber: #c87137;
  --color-risk-green: #2a6d4d;
  
  /* Neutral Colors */
  --color-neutral-white: #ffffff;
  --color-neutral-light-bg: #f0f8fa;
  --color-neutral-border: #e0e0e0;
  --color-neutral-dark-text: #1a1a1a;
  --color-neutral-gray: #666;
  --color-neutral-light-gray: #999;
  --color-neutral-lighter-gray: #d0d0d0;
  
  /* Additional Risk Badge Colors */
  --color-risk-production: #005EB8;
  --color-risk-environmental: #4a9eff;
  
  /* Accent Colors */
  --color-accent-gold: #d4af37;
  
  /* Typography */
  --font-family-base: Arial, sans-serif;
  --font-size-h1: 24px;
  --font-size-base: 14px;
  --font-size-label: 13px;
  --font-size-small: 12px;
  --font-size-xs: 11px;
  --font-size-badge: 10px;
  --font-size-tooltip-header: 16px;
  --font-size-metric: 18px;
  --font-size-loading: 18px;
  --font-size-panel-title: 15px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-base: 12px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  
  /* Layout Dimensions */
  --header-height: 80px;
  --controls-height: 60px;
  --breadcrumb-height: 40px;
  --panel-width: 600px;
  
  /* Borders */
  --border-radius-sm: 2px;
  --border-radius-base: 3px;
  --border-radius-md: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 8px;
  
  /* Hierarchy Level Strokes */
  --stroke-refinery: #ffffff;
  --stroke-width-refinery: 5px;
  --stroke-plant: #d0d0d0;
  --stroke-width-plant: 4px;
  --stroke-unit: #999;
  --stroke-width-unit: 3px;
  --stroke-equipment: #666;
  --stroke-width-equipment: 2px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 94, 184, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 94, 184, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 176, 202, 0.5);
  --shadow-panel: -4px 0 8px rgba(0, 94, 184, 0.3);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index layers */
  --z-legend: 10;
  --z-panel-header: 10;
  --z-panel: 1000;
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base Typography */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-dark-text);
}