/**
 * base.css - Foundation styles for D&H Engraving website
 * 
 * Purpose: Reset browser defaults, set typography, and define base element styles
 * Dependencies: None (loaded first)
 * 
 * Contents:
 * 1. CSS Reset and Box Model
 * 2. Root Variables
 * 3. Typography Base
 * 4. Base Element Styles
 * 5. Link Styles
 * 
 * All measurements use rem units (1rem = 16px at default browser setting)
 * This ensures consistent scaling across all devices
 */

/* ============================================
   1. CSS RESET AND BOX MODEL
   ============================================ */

/* Reset all margins and paddings, set box-sizing to border-box */
* {
  box-sizing: border-box; /* Include padding and border in element's total width/height */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* ============================================
   2. ROOT VARIABLES
   ============================================ */

/* Define CSS custom properties for consistent theming */
:root {
  /* Color palette - matches D&H Engraving brand */
  --color-primary: #0C86D1; /* Logo blue - primary brand color */
  --color-primary-dark: #0a6ea8; /* Darker blue for hover states */
  --color-primary-light: rgba(12, 134, 209, 0.1); /* Light blue for backgrounds */
  
  /* Neutral colors for text and backgrounds */
  --color-text-primary: #444444; /* Main body text color */
  --color-text-secondary: #666666; /* Secondary text, descriptions */
  --color-text-light: #777777; /* Light text for captions */
  --color-text-heading: #333333; /* Heading text color */
  --color-text-muted: #7f8c8d; /* Muted text for less important content */
  
  /* Background colors */
  --color-bg-primary: #ffffff; /* White backgrounds */
  --color-bg-secondary: #f5f5f5; /* Light gray page background */
  --color-bg-tertiary: #f8f9fa; /* Slightly lighter gray for sections */
  --color-bg-overlay: rgba(255, 255, 255, 0.75); /* Semi-transparent overlay */
  
  /* Border and shadow colors */
  --color-border: #eeeeee; /* Light borders */
  --color-border-light: #f0f0f0; /* Very light borders */
  --color-shadow: rgba(0, 0, 0, 0.1); /* Standard shadow */
  --color-shadow-light: rgba(0, 0, 0, 0.05); /* Light shadow */
  --color-shadow-dark: rgba(0, 0, 0, 0.2); /* Darker shadow */
  
  /* Typography scale - using perfect fourth (1.333) ratio */
  --font-size-xs: 0.75rem; /* 12px - Very small text */
  --font-size-sm: 0.875rem; /* 14px - Small text */
  --font-size-base: 1rem; /* 16px - Body text */
  --font-size-lg: 1.125rem; /* 18px - Large body text */
  --font-size-xl: 1.5rem; /* 24px - Section headings */
  --font-size-2xl: 2rem; /* 32px - Page headings */
  --font-size-3xl: 2.5rem; /* 40px - Hero headings */
  
  /* Font families */
  --font-family-base: 'Segoe UI', 'Arial', sans-serif; /* Main font stack */
  
  /* Font weights */
  --font-weight-normal: 400; /* Regular text */
  --font-weight-medium: 500; /* Medium emphasis */
  --font-weight-semibold: 600; /* Semi-bold for buttons, nav */
  --font-weight-bold: 700; /* Bold for headings */
  
  /* Line heights for readability */
  --line-height-tight: 1.2; /* Headings */
  --line-height-base: 1.6; /* Body text */
  --line-height-relaxed: 1.8; /* Loose text */
  
  /* Spacing scale - using rem for consistent spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */
  
  /* Border radius for rounded corners */
  --radius-sm: 0.25rem; /* 4px - Small elements */
  --radius-md: 0.5rem; /* 8px - Cards, containers */
  --radius-lg: 0.625rem; /* 10px - Large elements */
  --radius-full: 50%; /* Circular elements */
  
  /* Transitions for smooth animations */
  --transition-fast: 0.2s ease; /* Fast transitions */
  --transition-base: 0.3s ease; /* Standard transitions */
  --transition-slow: 0.5s ease; /* Slow transitions */
  
  /* Z-index scale for layering */
  --z-index-dropdown: 1000;
  --z-index-overlay: 2000;
  --z-index-modal: 3000;
  
  /* Container widths */
  --container-sm: 50rem; /* 800px - Small container */
  --container-md: 62.5rem; /* 1000px - Medium container */
  --container-lg: 75rem; /* 1200px - Large container */
  --container-xl: 87.5rem; /* 1400px - Extra large container */
}

/* ============================================
   3. TYPOGRAPHY BASE
   ============================================ */

/* Set base font size on html element for rem calculations */
html {
  font-size: 16px; /* Base size: 1rem = 16px */
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
  -ms-text-size-adjust: 100%; /* Prevent font scaling in IE */
}

/* Body element base styles */
body {
  font-family: var(--font-family-base); /* Apply base font family */
  font-size: var(--font-size-base); /* Set base font size */
  font-weight: var(--font-weight-normal); /* Normal weight for body text */
  line-height: var(--line-height-base); /* Comfortable line height for reading */
  color: var(--color-text-primary); /* Main text color */
  background-color: var(--color-bg-secondary); /* Light gray background */
  min-height: 100vh; /* Ensure body fills viewport height */
  display: flex; /* Use flexbox for footer positioning */
  flex-direction: column; /* Stack content vertically */
  -webkit-font-smoothing: antialiased; /* Improve font rendering on Mac */
  -moz-osx-font-smoothing: grayscale; /* Improve font rendering on Firefox Mac */
}

/* ============================================
   4. BASE ELEMENT STYLES
   ============================================ */

/* Heading styles - consistent hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit; /* Use same font as body */
  font-weight: var(--font-weight-bold); /* Bold weight for emphasis */
  line-height: var(--line-height-tight); /* Tighter line height for headings */
  color: var(--color-primary); /* Brand blue color */
  margin-bottom: var(--spacing-sm); /* Space below headings */
}

/* Individual heading sizes */
h1 {
  font-size: var(--font-size-2xl); /* 32px equivalent - main headings */
  font-weight: var(--font-weight-bold); /* Bold for main headings */
}

h2 {
  font-size: 1.75rem; /* 28px equivalent - proper hierarchy below h1 */
  font-weight: var(--font-weight-semibold); /* Semi-bold for sections */
}

h3 {
  font-size: 1.375rem; /* 22px equivalent */
  font-weight: var(--font-weight-medium); /* Medium weight for subsections */
}

h4 {
  font-size: 1.125rem; /* 18px equivalent */
  font-weight: var(--font-weight-medium); /* Medium weight */
}

h5 {
  font-size: var(--font-size-base); /* 16px equivalent */
  font-weight: var(--font-weight-semibold); /* Semi-bold for emphasis */
}

h6 {
  font-size: var(--font-size-sm); /* 14px equivalent */
  font-weight: var(--font-weight-semibold); /* Semi-bold for small headings */
}

/* Paragraph styles */
p {
  margin-bottom: var(--spacing-md); /* Space between paragraphs */
  line-height: var(--line-height-base); /* Comfortable reading line height */
}

/* List styles */
ul, ol {
  margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-xl); /* Top, right, bottom, left margins */
  line-height: var(--line-height-base); /* Match paragraph line height */
}

li {
  margin-bottom: var(--spacing-xs); /* Small space between list items */
}

/* Image styles */
img {
  max-width: 100%; /* Responsive images */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing */
}

/* Address styles (used in contact info) */
address {
  font-style: normal; /* Remove italic default */
  line-height: var(--line-height-base); /* Standard line height */
}

/* Strong and bold text */
strong, b {
  font-weight: var(--font-weight-semibold); /* Consistent bold weight */
}

/* Emphasis and italic text */
em, i {
  font-style: italic; /* Ensure italic styling */
}

/* ============================================
   5. LINK STYLES
   ============================================ */

/* Base link styles */
a {
  color: var(--color-primary); /* Brand blue color */
  text-decoration: none; /* Remove underline by default */
  transition: color var(--transition-fast), /* Smooth color transition */
              background-color var(--transition-fast); /* Smooth background transition */
}

/* Link hover state */
a:hover {
  color: var(--color-primary-dark); /* Darker blue on hover */
  text-decoration: underline; /* Add underline on hover for clarity */
}

/* Link focus state for accessibility */
a:focus {
  outline: 0.125rem solid var(--color-primary); /* 2px blue outline */
  outline-offset: 0.125rem; /* 2px offset from element */
  text-decoration: underline; /* Ensure underline on focus */
}

/* Visited link state (optional - currently matches default) */
a:visited {
  color: var(--color-primary); /* Keep same color for visited links */
}

/* Active link state (while clicking) */
a:active {
  color: var(--color-primary-dark); /* Darker color while clicking */
}