/*!
 * Quack Track Inventory Management System - Base Styles
 * Version: 2.0
 * Description: Reset, base styles, and typography
 */

/* ===================================================================
   RESET & BASE STYLES
   ================================================================ */

/**
 * Modern CSS Reset
 * 
 * Provides a consistent baseline across browsers while maintaining
 * accessibility and performance.
 */

/* Box sizing reset for predictable layouts */
*, 
*::before, 
*::after { 
  box-sizing: border-box; 
}

/* Remove default margins and paddings */
* {
  margin: 0;
  padding: 0;
}

/* Improve text rendering */
html {
  text-size-adjust: 100%;
}

/* Base body styles with fallbacks for older browsers */
body { 
  font-family: var(--font-family-base, system-ui, sans-serif); 
  margin: 0; 
  background: var(--color-background-primary, #f0f0f0); 
  color: var(--color-text-primary, #333); 
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.625);
  letter-spacing: var(--letter-spacing-normal, 0);
  font-weight: var(--font-weight-normal, 400);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Improved link styling */
a { 
  color: var(--color-gray-900, #000); 
  text-decoration: none;
  transition: color var(--transition-base, 0.2s ease-in-out);
}

a:hover {
  color: var(--color-primary, #006A4E);
}

a:focus {
  outline: 2px solid var(--color-focus-ring, #2563eb);
  outline-offset: 2px;
}

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

/**
 * Typography Hierarchy
 * 
 * Consistent typography system with semantic heading levels,
 * proper spacing, and accessibility considerations.
 */

/* Heading styles with consistent hierarchy */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-lg, 1.5rem) 0;
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  letter-spacing: var(--letter-spacing-tight, -0.025em);
  color: var(--color-gray-900, #111827);
}

h1 {
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--space-xl, 2rem);
}

h2 {
  font-size: var(--font-size-2xl, 1.5rem);
  margin-bottom: var(--space-lg, 1.5rem);
}

h3 {
  font-size: var(--font-size-xl, 1.25rem);
  margin-bottom: var(--space-md, 1rem);
}

h4 {
  font-size: var(--font-size-lg, 1.125rem);
  margin-bottom: var(--space-md, 1rem);
}

h5 {
  font-size: var(--font-size-base, 1rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

h6 {
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: var(--space-sm, 0.5rem);
  font-weight: var(--font-weight-medium, 500);
}

/* Paragraph and text elements */
p {
  margin: 0 0 var(--space-md, 1rem) 0;
  line-height: var(--line-height-relaxed, 1.625);
}

small {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-gray-600, #4b5563);
}

strong, b {
  font-weight: var(--font-weight-semibold, 600);
}

em, i {
  font-style: italic;
}

/* Code styling */
code {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm, 0.875rem);
  background-color: var(--color-gray-100, #f3f4f6);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--color-gray-800, #1f2937);
}

/* ===================================================================
   LAYOUT & GRID SYSTEM
   ================================================================ */

/**
 * Layout Components
 * 
 * Flexible layout system with container, grid, and utility classes
 * for responsive design.
 */

/* Main container with responsive max-width */
.container { 
  max-width: 980px; 
  margin: var(--space-lg, 1.5rem) auto; 
  padding: 0 var(--space-md, 1rem);
  min-height: calc(100vh - 64px); /* Ensure content takes up space */
  display: block;
  width: 100%;
}

.container--wide {
  max-width: none;
  width: 98%;
  margin: 0.5rem auto;
  padding: 0 4px;
}

/* Responsive container variants */
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 var(--space-md, 1rem); }

.container-md { max-width: 768px; margin: 0 auto; padding: 0 var(--space-md, 1rem); }

.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-md, 1rem); }

.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-md, 1rem); }

/* Flexbox utilities */
.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-row { flex-direction: row; }

.flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

/* Flex alignment */
.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-end { justify-content: flex-end; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.items-start { align-items: flex-start; }

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

.items-end { align-items: flex-end; }

.items-stretch { align-items: stretch; }

/* Grid system with CSS Grid fallback to Flexbox */
.grid {
  display: grid;
  gap: var(--space-md, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: var(--space-lg, 1.5rem);
}

/* Fallback for browsers without CSS Grid support */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--space-md, 1rem) / -2);
  }
  
  .grid > * {
    margin: calc(var(--space-md, 1rem) / 2);
  }
}

/* Grid column utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Gap utilities */
.gap-xs { gap: var(--space-xs, 0.25rem); }

.gap-sm { gap: var(--space-sm, 0.5rem); }

.gap-md { gap: var(--space-md, 1rem); }

.gap-lg { gap: var(--space-lg, 1.5rem); }

.gap-xl { gap: var(--space-xl, 2rem); }

/* Main content area */
main {
  display: block;
  width: 100%;
  min-height: calc(100vh - 64px);
  padding-top: var(--space-md, 1rem);
}

/* Ensure all content is visible */
h1, h2, h3, h4, h5, h6, p, div, table, .card, .grid {
  opacity: 1;
  visibility: visible;
}

/* Debug: Ensure content has background for visibility */
.card {
  background: var(--color-white, #fff) !important;
  border: 1px solid var(--color-gray-200, #e5e7eb) !important;
}