/* ==========================================================================
   CUCSR — Design Tokens & Base Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color: ink/navy brand, amber accent, teal secondary ---- */
  --color-ink: #10181f;
  --color-navy-900: #0e2033;
  --color-navy-800: #16324f;
  --color-navy-700: #1b3a5c;
  --color-navy-500: #2c567f;
  --color-navy-300: #6f93b3;

  --color-amber: #e8a33d;
  --color-amber-dark: #c9821f;
  --color-teal: #4c8577;
  --color-teal-light: #e4efec;

  --color-paper: #f3f5f4;
  --color-paper-alt: #eaede9;
  --color-white: #ffffff;
  --color-line: #dbe0dc;
  --color-muted: #5b6470;
  --color-muted-light: #8b93a0;

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: clamp(2.5rem, 5vw, 3.9rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ---- Spacing (8pt grid) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  /* ---- Layout ---- */
  --container-w: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(16, 24, 31, 0.04), 0 12px 24px -12px rgba(16, 24, 31, 0.14);
  --shadow-lift: 0 20px 40px -16px rgba(16, 24, 31, 0.22);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Base typography ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-navy-900);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-4xl); font-weight: 700; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }

p { color: var(--color-muted); max-width: 62ch; }
p.lead { font-size: var(--fs-md); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-amber-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.section {
  padding-block: var(--sp-8);
}

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

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-6);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-teal);
  margin-bottom: var(--sp-2);
}

.section-label::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--color-amber);
  display: inline-block;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}