/* ============================================================
   AnuVinci LLC — main.css
   Global styles, CSS variables, typography, base resets
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary:   #1F4E79;   /* Navy Blue */
  --color-secondary: #2E75B6;   /* Royal Blue */
  --color-accent:    #C9A84C;   /* Antique Gold */
  --color-dark:      #1A1A1A;   /* Near Black — body text */
  --color-gray:      #666666;   /* Gray — captions, meta */
  --color-light-blue:#DDEEFF;   /* Light Blue — info boxes */
  --color-light:     #F8FAFE;   /* Near White — backgrounds */
  --color-white:     #FFFFFF;

  /* Typography */
  --font-primary: Arial, Helvetica, sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --max-width: 1100px;
  --nav-height: 68px;

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(31,78,121,0.08);
  --shadow-md: 0 4px 20px rgba(31,78,121,0.12);
  --shadow-lg: 0 8px 40px rgba(31,78,121,0.16);

  /* Border */
  --radius: 6px;
  --radius-lg: 12px;
}

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

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

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

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

a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

ul, ol {
  list-style: none;
}

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

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p {
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

/* ---- Layout Utilities ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section--alt {
  background: var(--color-light);
}

.section--dark {
  background: var(--color-primary);
}

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

.text-center { text-align: center; }
.text-gold   { color: var(--color-accent); }
.text-navy   { color: var(--color-primary); }
.text-gray   { color: var(--color-gray); }

/* ---- Section Header ---- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  margin-bottom: var(--space-xs);
}

.section-header p {
  font-size: 1.05rem;
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
}

.section-divider {
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  margin: var(--space-sm) auto var(--space-md);
  border-radius: 2px;
}

/* ---- Responsive Breakpoints ---- */
/* Mobile-first — styles above are base (mobile)
   768px = tablet/desktop override point */
@media (min-width: 768px) {
  :root {
    --space-xl:  5rem;
    --space-2xl: 8rem;
  }
}