/* =========================
   BASE / VARIABLES / TYPOGRAPHY
========================= */
:root {
  /* Colors */
  --bg-light: #ffffff;
  --bg-dark: #1f1f1f;
  --text-light: #111827;
  --text-dark: #f3f4f6;
  --primary-color: #2563eb;
  --primary-color-dark: #3b82f6;
  --card-bg-light: #ffffff;
  --card-bg-dark: #1f1f1f;

  /* Navbar Colors for lightning effect */
  --navbar-bg-color: orangered;           /* background inside border */
  --navbar-border-color: #1e90ff;         /* main lightning blue */
  --navbar-border-color-glow: #63b3ff;    /* brighter glow at peak */
  --navbar-border-color-alpha1: #1e90ff33;
  --navbar-border-color-alpha2: #1e90ff22;
  --navbar-border-color-alpha3: #1e90ff77;
  --navbar-border-color-alpha4: #1e90ff55;
  --navbar-border-color-alpha5: #1e90ff33;

  /* Timeline specific */
  --timeline-border: #2563eb;
  --timeline-date: #2563eb;
  --timeline-link: #2563eb;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-4xl: 5rem;

  /* Misc */
  --fade-duration: 0.8s;
}

/* Dark mode overrides */
.dark {
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --card-bg: var(--card-bg-dark);
  --primary-color: var(--primary-color-dark);
  --timeline-border: #3b82f6;
  --timeline-date: #3b82f6;
  --timeline-link: #3b82f6;

  /* Dark mode navbar glow colors */
  --navbar-bg-color: #2b1f1f;
  --navbar-border-color: #3b82f6;
  --navbar-border-color-glow: #60a5fa;
  --navbar-border-color-alpha1: #3b82f633;
  --navbar-border-color-alpha2: #3b82f622;
  --navbar-border-color-alpha3: #3b82f677;
  --navbar-border-color-alpha4: #3b82f655;
  --navbar-border-color-alpha5: #3b82f633;
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  background-color: var(--bg-light);
  color: var(--text-light);
  transition: background 0.4s, color 0.4s;
}

.dark body {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Pacifico', cursive;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--text-dark);
}

.font-pacifico {
  font-family: 'Pacifico', cursive !important;
}

/* UNIVERSAL SECTION SPACING */
section {
  padding: var(--spacing-xs) 0; /* 1.5rem top/bottom */
}

section h1, section h2, section h3 {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

section p + p {
  margin-top: var(--spacing-md);
}

section ul, section ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

ul, ol {
  margin-top: 1.5rem;
  padding-left: 1.75rem;
}

ul li, ol li {
  margin-bottom: 0.9rem;
  line-height: 1.6;
}