/**
 * PMERIT Light Theme (Default)
 * 100% Aligned with Pmerit-theme_typography.html specification
 * Version: 2.1 (Brand Corrected)
 * Last Updated: October 12, 2025
 */

/* ========================================
   LIGHT MODE (DEFAULT)
   ======================================== */

:root {
  /* === PMERIT BRAND COLORS (Official Spec) === */
  --color-primary: #2A5B8C;      /* Dark Blue - Main brand */
  --color-secondary: #4AA4B9;    /* Teal - Secondary brand */
  --color-accent: #FF6B6B;       /* Coral - CTAs */
  --color-light-teal: #7ED0D9;   /* Light Teal - Highlights */
  --color-coral-dark: #E05A5A;   /* Dark Coral - Hover states */
  
  /* === SEMANTIC COLORS === */
  --color-success: #3A7F5C;      /* Green - Success states */
  --color-warning: #E67E22;      /* Orange - Warning states */
  --color-error: #DC3545;        /* Red - Error states */
  --color-info: #4AA4B9;         /* Teal - Info states */
  
  /* === NEUTRAL GRAYS (Pmerit Spec) === */
  --color-light-gray: #F8F9FA;   /* Lightest gray */
  --color-dark-gray: #2C2C2C;    /* Dark gray */
  --color-medium-gray: #6C757D;  /* Medium gray */
  --color-charcoal: #3A3A3A;     /* Charcoal */
  
  /* === PRIMARY SHORTCUTS (Use Pmerit Brand Colors) === */
  --primary: #2A5B8C;            /* Dark Blue (NOT blueprint blue) */
  --primary-dark: #1f4567;       /* Darker Dark Blue for hover */
  --secondary: #4AA4B9;          /* Teal */
  --accent: #FF6B6B;             /* Coral */
  --success: #3A7F5C;            /* Success green */
  
  /* === BRAND GRADIENT (Hero Sections - Updated Nov 27, 2025) === */
  --gradient-start: #375b8d;
  --gradient-end: #4AA4B9;
  --gradient-purple: linear-gradient(135deg, #375b8d 0%, #4AA4B9 100%);
  --gradient-hero: linear-gradient(135deg, #375b8d 0%, #4AA4B9 100%);
  
  /* === BACKGROUND & SURFACES (Pmerit Spec) === */
  --bg-primary: #F8F9FA;         /* Light gray background (NOT white) */
  --bg-secondary: #FFFFFF;       /* White (cards, elevated) */
  --bg-card: #FFFFFF;            /* Card background */
  --bg-elevated: #FFFFFF;        /* Elevated surface */
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* === BORDERS (Pmerit Spec) === */
  --border-color: #E9ECEF;       /* Default border */
  --border-color-light: #F1F3F5; /* Light border */
  --border-color-medium: #DEE2E6;/* Medium border */
  
  /* === TEXT COLORS (Pmerit Spec) === */
  --text-primary: #2C2C2C;       /* Dark gray (NOT almost black) */
  --text-secondary: #6C757D;     /* Medium gray */
  --text-muted: #8E9499;         /* Muted gray */
  --text-inverse: #FFFFFF;       /* White text for dark backgrounds */
  --text-on-gradient: #FFFFFF;   /* White text for purple gradient */
  --text-link: #FF6B6B;          /* Coral links */
  --text-link-hover: #E05A5A;    /* Darker coral on hover */
  
  /* === INTERACTIVE COLORS === */
  --interactive-primary: #2A5B8C;
  --interactive-primary-hover: #1f4567;
  --interactive-secondary: #4AA4B9;
  --interactive-secondary-hover: #3a8a99;
  --interactive-accent: #FF6B6B;
  --interactive-accent-hover: #E05A5A;
  
  /* === LAYOUT DIMENSIONS === */
  --header-height: 70px;
  --footer-height: 60px;
  --sidebar-left-width: 280px;
  --sidebar-right-width: 320px;
  
  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  
  /* === TRANSITIONS === */
  --transition: all 0.2s ease-in-out;
  --transition-fast: all 0.15s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;
  
  /* === TYPOGRAPHY === */
  --font-primary: 'Montserrat', sans-serif;   /* Headings */
  --font-secondary: 'Inter', sans-serif;      /* Body text */
  
  /* Font Sizes */
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-body: 16px;
  --text-small: 14px;
  --text-tiny: 12px;
  --text-button: 15px;
  
  /* Font Weights */
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === SPACING === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  
  /* === BORDER RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* === Z-INDEX === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   DARK MODE (Phase 6 - Optional Feature)
   ======================================== */

[data-theme="dark"],
.dark {
  /* === ADJUSTED BRAND COLORS FOR DARK === */
  --color-primary: #4A8BC8;      /* Lighter Dark Blue for dark mode */
  --color-secondary: #5FC8E5;    /* Lighter Teal */
  --color-accent: #FF7B7B;       /* Lighter Coral */
  --color-light-teal: #7ED0D9;   /* Keep same */
  --color-coral-dark: #FF6B6B;   /* Adjust for dark */
  --color-success: #4CAF7A;      /* Lighter Green */
  --color-warning: #FF9800;      /* Lighter Orange */
  
  /* === PRIMARY SHORTCUTS (DARK) === */
  --primary: #4A8BC8;            /* Lighter blue for dark mode */
  --primary-dark: #5A9BD8;       /* Even lighter for hover */
  --secondary: #5FC8E5;          /* Lighter teal */
  --accent: #FF7B7B;             /* Lighter coral */
  --success: #4CAF7A;            /* Lighter green */
  
  /* === BACKGROUND & SURFACES (DARK) === */
  --bg-primary: #121212;         /* Dark background */
  --bg-secondary: #1E1E1E;       /* Lighter dark */
  --bg-card: #1E1E1E;            /* Card background */
  --bg-elevated: #252525;        /* Elevated surface */
  --border-color: #333333;       /* Dark border */
  
  /* === TEXT COLORS (DARK) === */
  --text-primary: #E9E9E9;       /* Light text */
  --text-secondary: #B0B0B0;     /* Secondary light text */
  --text-muted: #8A8A8A;         /* Muted light text */
  --text-inverse: #121212;       /* Dark text for light backgrounds */
  
  /* === SHADOWS (DARKER) === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ========================================
   BASE STYLES
   ======================================== */

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

html,
body {
  height: 100%;
  font-family: var(--font-secondary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-normal);
  font-size: var(--text-body);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

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

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-normal);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

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

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

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

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

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

.bg-gradient-purple {
  background: var(--gradient-purple);
  color: var(--text-on-gradient);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* ========================================
   RESPONSIVE HELPERS
   ======================================== */

.desktop-only {
  display: none;
}

.mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
  
  .mobile-only {
    display: none;
  }
}