:root {
  /* ── Typography ── */
  /* Segoe UI is Microsoft's primary font. The fallbacks ensure native rendering on other OSs. */
  --font-family-base: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  
  /* ── Core Colors ── */
  --color-primary: #0067b8;         /* Classic Microsoft Blue */
  --color-primary-hover: #005da6;   /* Slightly darker blue for hover states */
  --color-background: #ffffff;      /* Stark white backgrounds */
  --color-background-alt: #f2f2f2;  /* Light gray for alternating content sections */
  
  /* ── Text Colors ── */
  --text-primary: #242424;          /* Deep charcoal (softer on the eyes than pure #000) */
  --text-secondary: #616161;        /* Muted gray for subtitles and meta text */
  --text-inverse: #ffffff;          /* White text for primary buttons */
  
  /* ── Borders & Shadows (Fluent Design) ── */
  --border-color: #e6e6e6;
  --border-radius-sm: 4px;          /* Fluent favors very subtle rounding on buttons/inputs */
  --border-radius-md: 8px;          /* Slightly larger rounding for cards */
  
  /* Microsoft shadows are highly diffused and subtle */
  --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.08);
  
  /* ── Spacing Variables ── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 72px;
}

/* ============================================
   BASE RESET & TYPOGRAPHY
============================================ */
body {
  font-family: var(--font-family-base);
  color: var(--text-primary);
  background-color: var(--color-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0;
  line-height: 1.2;
}

/* ============================================
   BUTTON COMPONENTS
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-subtle);
}

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

.btn-outline:hover {
  background-color: rgba(0, 103, 184, 0.05); /* Very faint blue tint on hover */
}

/* ============================================
   CARD COMPONENTS
============================================ */
.card {
  background: var(--color-background);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}