/* ========================================
   INTERCOUNTY SUPPLIES - GLOBAL STYLES
   Location: assets/css/global.css
   Description: Reusable components (buttons, typography, layout)
   ======================================== */

/* ============ VARIABLES - ENHANCED PREMIUM PALETTE ============ */
#ics-homepage {
  /* Primary Brand Colors */
  --accent: #FF6B35;           /* Brand Orange */
  --accent-dark: #E55A28;      /* Darker Orange */
  --accent-light: #FFF5F2;     /* Light Orange Tint */
  --accent-glow: rgba(255, 107, 53, 0.15); /* Glow Effect */
  
  /* Text Colors - Enhanced Depth */
  --text: #1A202C;             /* Deep Rich Black */
  --text-light: #4A5568;       /* Medium Grey */
  --text-muted: #718096;       /* Light Grey */
  
  /* Background Colors - Sophisticated */
  --bg: #FFFFFF;               /* Pure White */
  --bg-secondary: #F7FAFC;     /* Cool Light Grey */
  --bg-tertiary: #EDF2F7;      /* Darker Grey */
  --bg-gradient: linear-gradient(135deg, #FFFFFF 0%, #F7FAFC 100%); /* Subtle Gradient */
  
  /* Border Colors - Cleaner */
  --border: #E2E8F0;           /* Soft Grey Border */
  --border-light: #EDF2F7;     /* Very Light Border */
  --border-focus: #FF6B35;     /* Accent Focus */
  
  /* Shadows - Premium Depth */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
  --shadow-colored: 0 8px 24px rgba(255,107,53,0.2); /* Brand Shadow */
  
  /* Success & UI States */
  --success: #48BB78;          /* Warm Green */
  --info: #4299E1;             /* Blue */
  --warning: #F6AD55;          /* Warm Orange */
  
  /* Typography */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  line-height: 1.7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ GLOBAL LAYOUT ============ */
.ics-main {
  min-height: 100vh;
  background: var(--bg);
}

.ics-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ TYPOGRAPHY ============ */
.ics-h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ics-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.ics-section-header {
  text-align: center;
  margin-bottom: 50px;
}

/* ============ BUTTONS - ENHANCED ============ */
.ics-btn {
  display: inline-block;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.ics-btn-lg {
  padding: 16px 40px;
  font-size: 1.1rem;
}

.ics-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.ics-btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-dark) 0%, #CC4A1F 100%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-colored);
}

.ics-btn-secondary {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}

.ics-btn-secondary:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.ics-btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.ics-btn-outline:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Improve link accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* ============ HIGH CONTRAST MODE ============ */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --text-muted: var(--text);
  }
}

/* ============ DARK MODE SUPPORT (Optional) ============ */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode support
  #ics-homepage {
    --bg: #1A202C;
    --bg-secondary: #2D3748;
    --text: #F7FAFC;
    --text-light: #CBD5E1;
    --border: #4A5568;
  }
  */
}

/* ========================================
   END OF GLOBAL STYLES
   ======================================== */