/**
 * MetriqOS Theme System v1.1 (SYNTAX ERRORS FIXED)
 * 3-Layer Architecture: Tokens → Themes → Components
 * 
 * TO CHANGE ENTIRE COLOR SCHEME:
 * Edit [data-theme="metriqos-default"] section (lines 115-145)
 */

/* ============================================
   FONT IMPORT - MUST BE FIRST (before any CSS rules)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================
   LAYER 1: BASE DESIGN TOKENS (Never Change)
   ============================================ */
:root {
  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* Typography Scale */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-Index Layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   LAYER 2: THEME COLOR VARIABLES
   ============================================ */

/* THEME 1: MetriqOS Default (Professional Blue) */
[data-theme="metriqos-default"] {
  /* Brand Colors */
  --color-primary: #0B63B6;
  --color-primary-hover: #094a8f;
  --color-primary-light: #3d85c6;
  --color-secondary: #0E8A7B;
  --color-secondary-hover: #0b6e61;
  --color-accent: #FF8A42;
  --color-accent-hover: #E77A34;
  
  /* Surface Colors */
  --color-surface: #F7F8FA;
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #F3F4F6;
  
  /* Text Colors */
  --color-text-primary: #0F1724;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-inverse: #FFFFFF;
  
  /* Border Colors */
  --color-border-default: #E5E7EB;
  --color-border-hover: #D1D5DB;
  --color-border-focus: #0B63B6;
  
  /* State Colors */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;
  
  /* Neutral Grays */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
}

/* THEME 2: Ocean Breeze */
[data-theme="ocean-breeze"] {
  --color-primary: #006494;
  --color-primary-hover: #004d73;
  --color-primary-light: #2d8ab8;
  --color-secondary: #13A8A8;
  --color-secondary-hover: #0e8787;
  --color-accent: #FF6B35;
  --color-accent-hover: #E55A28;
  
  --color-surface: #F0F9FF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #E0F2FE;
  
  --color-text-primary: #0C4A6E;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94A3B8;
  --color-text-inverse: #FFFFFF;
  
  --color-border-default: #BAE6FD;
  --color-border-hover: #7DD3FC;
  --color-border-focus: #006494;
  
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-info: #0EA5E9;
  --color-info-bg: #E0F2FE;
  
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
}

/* THEME 3: Forest Sage */
[data-theme="forest-sage"] {
  --color-primary: #2F5233;
  --color-primary-hover: #1e3521;
  --color-primary-light: #4a7c59;
  --color-secondary: #4A7C59;
  --color-secondary-hover: #3a5f46;
  --color-accent: #E8B55F;
  --color-accent-hover: #d4a04c;
  
  --color-surface: #F7F9F5;
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #EEF2EB;
  
  --color-text-primary: #1C3A20;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #9CA3AF;
  --color-text-inverse: #FFFFFF;
  
  --color-border-default: #D4E4D7;
  --color-border-hover: #B8D4BC;
  --color-border-focus: #2F5233;
  
  --color-success: #059669;
  --color-success-bg: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;
  
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
}

/* ============================================
   LAYER 3: BASE STYLES
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  text-rendering: optimizeLegibility;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Text Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

/* Background Utilities */
.bg-surface { background-color: var(--color-surface); }
.bg-elevated { background-color: var(--color-surface-elevated); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

/* Border Utilities */
.border { border: 1px solid var(--color-border-default); }
.border-t { border-top: 1px solid var(--color-border-default); }
.border-b { border-bottom: 1px solid var(--color-border-default); }
.border-l { border-left: 1px solid var(--color-border-default); }
.border-r { border-right: 1px solid var(--color-border-default); }

/* Rounded Corners */
.rounded-sm { border-radius: 6px; }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); }

/* Spacing Utilities */
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.p-xl { padding: 32px; }

.m-sm { margin: 8px; }
.m-md { margin: 16px; }
.m-lg { margin: 24px; }
.m-xl { margin: 32px; }

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

/* Typography */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 28px; }
.text-4xl { font-size: 36px; }

/* Transitions */
.transition { transition: all 200ms ease; }
.transition-fast { transition: all 150ms ease; }
.transition-slow { transition: all 300ms ease; }

/* Currency Badge */
.currency-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Section Card */
.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

/* Button Icon */
.btn-icon {
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--surface-hover);
}

.btn-icon.btn-danger:hover {
    background: #FEE2E2;
    border-color: #EF4444;
}     

/* ============================================
   TIME-WEIGHTED ANALYTICS - PACE INDICATORS
   ============================================ */

.pace-indicator {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.pace-indicator.on_track {
    background: #DEF7EC;
    color: #03543F;
}

.pace-indicator.slightly_behind {
    background: #FDE68A;
    color: #92400E;
}

.pace-indicator.behind_schedule {
    background: #FED7AA;
    color: #9A3412;
}

.pace-indicator.significantly_behind {
    background: #FEE2E2;
    color: #991B1B;
}

.pace-indicator.completed {
    background: #D1FAE5;
    color: #065F46;
}
/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    --font-size-5xl: 40px;
    --font-size-4xl: 32px;
    --font-size-3xl: 28px;
    --font-size-2xl: 24px;
  }
  
  .container {
    padding: 0 16px;
  }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --font-size-5xl: 52px;
    --font-size-4xl: 40px;
    --font-size-3xl: 32px;
    --font-size-2xl: 26px;
  }
}