/**
 * Core CSS - Design Tokens & Typography
 * Foundation styles that all other CSS files build upon
 *
 * Contents:
 * - CSS Custom Properties (colors, spacing, typography, shadows)
 * - Typography System (headings, body, utilities)
 * - Text utilities (alignment, transform, decoration)
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   Use these variables instead of hard-coded colors
   ============================================ */

:root {
  /* Primary Colors - Based on sidebar dark navy */
  --color-primary: #1a2234;
  --color-primary-light: #232f47;
  --color-primary-dark: #111827;

  /* Semantic Colors */
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Text Colors */
  --color-text-primary: #333;
  --color-text-secondary: #6c757d;
  --color-text-muted: #999;
  --color-text-disabled: #ccc;

  /* Background Colors */
  --color-bg-light: #f8f9fa;
  --color-bg-medium: #e9ecef;
  --color-bg-white: #ffffff;
  --color-bg-body: #f5f5f5;

  /* Border Colors */
  --color-border-light: #dee2e6;
  --color-border-medium: #ddd;
  --color-border-dark: #999;

  /* ============================================
     Fortune 500 Design System Colors
     Professional, restrained color palette
     ============================================ */

  /* Sidebar Colors (Dark Theme) */
  --sidebar-bg: #1a2234;
  --sidebar-bg-selected: #232f47; /* Subtle highlight, same as hover */
  --sidebar-bg-hover: #232f47;
  --sidebar-text: #e5e7eb;
  --sidebar-text-muted: #9ca3af;
  --sidebar-icon: #9ca3af;
  --sidebar-icon-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-active-indicator: #60a5fa; /* Bright blue indicator for selected item */

  /* Content Area Colors (Light, Neutral) */
  --content-bg: #f5f7fa;
  --content-card-bg: #ffffff;
  --content-heading: #374151;
  --content-text: #4b5563;
  --content-text-muted: #6b7280;
  --content-text-secondary: #4b5563;
  --content-border: #e5e7eb;

  /* Section Headers (Minimal Style) */
  --section-heading: #6b7280; /* Medium grey for section titles */
  --section-subheading: #9ca3af; /* Lighter grey for descriptions */

  /* Page Headings (use sidebar dark blue for prominence) */
  --page-heading-color: var(--sidebar-bg); /* Dark blue from sidebar for page titles */

  /* Accent Colors (Restrained, Semantic Only) */
  --accent-primary: #1a2234;
  --accent-primary-hover: #232f47;
  --accent-success: #059669;
  --accent-success-light: #d1fae5;
  --accent-warning: #d97706;
  --accent-warning-light: #fef3c7;
  --accent-danger: #dc2626;
  --accent-danger-light: #fee2e2;
  --accent-info: #0284c7;
  --accent-info-light: #e0f2fe;

  /* Button Colors (Minimal Palette) */
  --btn-primary-bg: var(--accent-primary);
  --btn-primary-bg-hover: var(--accent-primary-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-bg-hover: #d1d5db;
  --btn-secondary-text: #374151;
  --btn-ghost-text: #6b7280;
  --btn-ghost-text-hover: #374151;

  /* Form Elements */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-focus: var(--accent-primary);
  --input-border-error: var(--accent-danger);
  --input-text: var(--content-text);
  --input-placeholder: #9ca3af;
  --input-disabled-bg: #f3f4f6;

  /* Table Colors */
  --table-header-bg: var(--content-bg);
  --table-header-text: var(--content-text-muted);
  --table-row-bg: var(--content-card-bg);
  --table-row-hover: var(--content-bg);
  --table-border: var(--content-border);
  --table-text: var(--content-text);

  /* Card Colors */
  --card-bg: var(--content-card-bg);
  --card-border: var(--content-border);
  --card-shadow: var(--shadow-sm);

  /* Badge/Status Colors - Semantic Only */
  --badge-neutral-bg: #e5e7eb;
  --badge-neutral-text: #374151;
  --badge-success-bg: var(--accent-success-light);
  --badge-success-text: #065f46;
  --badge-warning-bg: var(--accent-warning-light);
  --badge-warning-text: #92400e;
  --badge-danger-bg: var(--accent-danger-light);
  --badge-danger-text: #991b1b;
  --badge-info-bg: var(--accent-info-light);
  --badge-info-text: #075985;

  /* Heat Map Colors - 4-Tier Graduated Scale */
  /* Use for scored/ranked data (match percentages, completeness bars, progress fills, etc.) */
  /* Visual progression: Red → Orange → Yellow/Gold → Green */
  /* Uses lighter accent colors for visibility in progress bars and fills */
  --heatmap-strong: #059669;   /* 75-100%: Emerald green (--accent-success) */
  --heatmap-warm: #eab308;     /* 50-74%: Golden yellow */
  --heatmap-weak: #ea580c;     /* 25-49%: Orange */
  --heatmap-poor: #dc2626;     /* 0-24%: Red (--accent-danger) */

  /* Link Colors */
  --link-color: var(--accent-primary);
  --link-hover: var(--accent-primary-hover);

  /* Icon Colors (Neutral by Default) */
  --icon-default: #9ca3af;
  --icon-muted: #d1d5db;

  /* Spacing Scale (8px base unit) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

  /* Typography Scale */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 16px;
  --font-size-h5: 14px;
  --font-size-h6: 13px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-xs: 11px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;
  --line-height-loose: 1.6;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ============================================
   Typography System
   ============================================ */

/* Global Typography Base */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  color: var(--color-text-primary);
}

/* Heading Hierarchy */
h1, .text-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 0 24px 0;
  color: var(--color-text-primary);
}

h2, .text-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
}

h3, .text-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin: 0 0 12px 0;
  color: var(--color-text-primary);
}

h4, .text-h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
}

h5, .text-h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
}

h6, .text-h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
}

p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  margin: 0 0 16px 0;
}

/* Typography Utility Classes */
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-small);
}

.text-base {
  font-size: var(--font-size-body);
}

.text-lg {
  font-size: var(--font-size-h4);
}

.text-xl {
  font-size: var(--font-size-h3);
}

.text-2xl {
  font-size: var(--font-size-h2);
}

.text-3xl {
  font-size: var(--font-size-h1);
}

/* Font Weight Utilities */
.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

/* Line Height Utilities */
.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.leading-loose {
  line-height: var(--line-height-loose);
}

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

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-disabled {
  color: var(--color-text-disabled);
}

/* Heatmap Text Colors - Use for scored/ranked data headers and labels */
.text-heatmap-strong {
  color: var(--heatmap-strong);
}

.text-heatmap-warm {
  color: var(--heatmap-warm);
}

.text-heatmap-weak {
  color: var(--heatmap-weak);
}

.text-heatmap-poor {
  color: var(--heatmap-poor);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Text Transform */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* Text Decoration */
.text-underline {
  text-decoration: underline;
}

.text-no-underline {
  text-decoration: none;
}