/* ==========================================================================
   OEOS Design System - base.css
   Reset, global typography, utility helpers, animations
   Loaded AFTER styles.css to override legacy rules
   ========================================================================== */

/* ===== Reset & Box Model ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== Body & HTML ===== */
html {
  scroll-behavior: smooth;
}

html,
body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-blue);
  background-color: var(--white);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Typography - Headings ===== */
h1 {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);       /* 42–48px at large screens */
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-blue);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

h2 {
  font-family: var(--font-primary);
  font-size: clamp(1.625rem, 3vw, 2.25rem); /* 30–36px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-blue);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

h3 {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 24–28px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy-blue);
  margin-bottom: var(--space-3);
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy-blue);
  margin-bottom: var(--space-2);
}

h5 {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--deep-gray);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}

h6 {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--deep-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

/* ===== Body Text ===== */
p,
.body-text {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--deep-gray);
}

/* ===== Labels ===== */
label,
.label-text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-blue);
  display: inline-block;
  margin-bottom: var(--space-1);
}

/* ===== Links ===== */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--ease-fast);
}

a:hover {
  color: var(--primary-blue-hover);
}

/* ===== Utility Color Classes ===== */
.oeos-navy  { color: var(--navy-blue) !important; }
.oeos-blue  { color: var(--primary-blue) !important; }
.oeos-mint  { color: var(--mint-accent) !important; }
.oeos-muted { color: var(--deep-gray) !important; opacity: 0.85; }

.oeos-bg-navy    { background-color: var(--navy-blue) !important; }
.oeos-bg-blue    { background-color: var(--primary-blue) !important; }
.oeos-bg-soft    { background-color: var(--soft-gray) !important; }
.oeos-bg-cool    { background-color: var(--cool-blue) !important; }

/* Bootstrap .text-muted override */
.text-muted {
  color: var(--deep-gray) !important;
  opacity: 0.75;
}

/* ===== Animations ===== */
@keyframes oeos-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes oeos-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes oeos-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes highlight {
  0%   { background-color: transparent; }
  50%  { background-color: var(--cool-blue); }
  100% { background-color: transparent; }
}

.oeos-fade-in        { animation: oeos-fade-in        0.35s var(--ease-base) forwards; }
.oeos-slide-in-right { animation: oeos-slide-in-right 0.3s  var(--ease-base) forwards; }
.oeos-scale-in       { animation: oeos-scale-in       0.25s var(--ease-base) forwards; }
.highlight-animation { animation: highlight 1s ease; }

/* ===== Page & Section Spacing ===== */
.page-content {
  padding: 0 var(--page-padding-x);
  margin-top: var(--space-6);
}

.section-wrap {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.section-wrap-lg {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Misc ===== */
.no-select { user-select: none; }

hr.oeos-divider {
  border: none;
  height: 1px;
  background: var(--border-light);
  margin: var(--space-6) 0;
}

/* ===== Responsive Overrides ===== */
@media (max-width: 768px) {
  .page-content {
    padding: var(--space-6) var(--space-4);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}