/* ============================================================
   EMS HISTORY — DESIGN SYSTEM (main.css)
   ============================================================
   This file contains:
   - CSS Custom Properties (colors, fonts, spacing)
   - Reset / Base styles
   - Fluid Typography (clamp-based, no breakpoints needed)
   - Layout utilities
   
   DO NOT put component or page-specific styles here.
   Use components.css and pages.css instead.
   ============================================================ */

/* ============================== */
/* CUSTOM PROPERTIES              */
/* ============================== */
:root {
  /* ---- Primary Palette ---- */
  --color-primary: #0057a8;          /* EMS blue — Star of Life */
  --color-primary-dark: #003d75;     /* Darker blue */
  --color-primary-light: #1a6fbe;    /* Lighter blue */
  --color-accent: #c4611a;           /* Orange accent */
  --color-accent-light: #e8853f;     /* Light orange */
  --color-gold: #b8922f;             /* Gold highlights */
  
  /* ---- Neutral Palette ---- */
  --color-bg: #faf9f7;               /* Page background */
  --color-bg-warm: #f3f0eb;          /* Warm section background */
  --color-bg-dark: #1a1a1f;          /* Dark sections */
  --color-bg-darker: #111115;        /* Darkest (hero backgrounds) */
  --color-text: #2c2c2e;             /* Body text */
  --color-text-light: #6b6b70;       /* Secondary text */
  --color-text-muted: #9c9ca0;       /* Muted text */
  --color-border: #e0ddd8;           /* Borders */
  --color-white: #ffffff;
  
  /* ---- Typography ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Fluid Type Scale ----
     Uses clamp(min, preferred, max) for smooth scaling.
     Preferred values combine rem + vw so text respects both
     viewport width AND user zoom/font-size preferences.
     Scale: 320px viewport → min | 1200px viewport → max
  */
  --fs-xs:    clamp(0.72rem,  0.68rem + 0.18vw, 0.82rem);
  --fs-sm:    clamp(0.82rem,  0.77rem + 0.22vw, 0.95rem);
  --fs-base:  clamp(1.05rem,  0.98rem + 0.30vw, 1.22rem);
  --fs-md:    clamp(1.15rem,  1.06rem + 0.40vw, 1.38rem);
  --fs-lg:    clamp(1.38rem,  1.22rem + 0.70vw, 1.78rem);
  --fs-xl:    clamp(1.75rem,  1.45rem + 1.30vw, 2.50rem);
  --fs-2xl:   clamp(2.20rem,  1.72rem + 2.10vw, 3.40rem);
  --fs-3xl:   clamp(2.60rem,  1.92rem + 3.00vw, 4.30rem);
  
  /* ---- Spacing Scale ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;
  
  /* ---- Layout ---- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 72px;
  
  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.2, 0, 0, 1);
  
  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  
  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}


/* ============================== */
/* RESET                          */
/* ============================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-light);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}


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

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* ---- Body Text ---- */
p {
  margin-bottom: var(--space-md);
  line-height: 1.75;
}

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

/* ---- Mono / Labels ---- */
.mono {
  font-family: var(--font-mono);
}


/* ============================== */
/* LAYOUT UTILITIES               */
/* ============================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Page content offset for fixed nav */
.page-content {
  padding-top: var(--nav-height);
}


/* ============================== */
/* SECTION WRAPPER                */
/* ============================== */
.section {
  padding: var(--space-3xl) var(--space-lg);
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-white);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: var(--color-white);
}

.section-warm {
  background-color: var(--color-bg-warm);
}


/* ============================== */
/* ANIMATIONS                     */
/* ============================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in {
  animation: fadeUp 0.6s ease-out forwards;
}


/* ============================== */
/* RESPONSIVE BREAKPOINTS         */
/* ============================== */
/* 
  Mobile: < 640px
  Tablet: 640px - 900px  
  Desktop: > 900px
  
  NOTE: Headings and body text no longer need breakpoint
  overrides — clamp() handles fluid scaling automatically.
  Only layout/spacing adjustments belong in media queries.
*/

@media (max-width: 640px) {
  .section {
    padding: var(--space-2xl) var(--space-md);
  }
}