/* =============================================================================
   Aegis Compliance — Design Tokens (Source of Truth)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Archivo:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Navy / royal blue — primary brand ink */
  --navy-900: #0A1A33;
  --navy-800: #132B52;
  --navy-700: #1E3F74;
  --navy-600: #2C5BA0;
  --navy-100: #E6ECF4;

  /* Neutrals — warm graphite */
  --ink-900:  #14161A;
  --ink-700:  #3A3F47;
  --ink-500:  #6B7280;
  --ink-400:  #9AA0A8;
  --ink-300:  #C8CCD2;
  --ink-200:  #E4E6EA;
  --ink-100:  #F2F3F5;
  --paper:    #FAFAF7;
  --white:    #FFFFFF;

  /* Accent — oxblood, used sparingly for credentialed emphasis */
  --oxblood:  #6B1F2B;

  /* Semantic */
  --bg:          var(--paper);
  --bg-elevated: var(--white);
  --bg-quiet:    var(--ink-100);
  --bg-invert:   var(--navy-900);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-400);
  --fg-invert: var(--paper);

  --brand:       var(--navy-900);
  --brand-link:  var(--navy-700);
  --brand-hover: var(--navy-600);
  --brand-wash:  var(--navy-100);

  --rule:      var(--ink-200);
  --rule-firm: var(--ink-300);
  --rule-ink:  var(--navy-900);

  /* Typefaces */
  --font-display: 'Playfair Display', 'Tiempos Headline', 'Didot', Georgia, serif;
  --font-serif:   'Source Serif 4', 'Tiempos Text', 'Charter', Georgia, serif;
  --font-sans:    'Archivo', 'Söhne', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-eyebrow: 11px;
  --fs-micro:   12px;
  --fs-meta:    13px;
  --fs-body:    17px;
  --fs-lead:    20px;
  --fs-h4:      22px;
  --fs-h3:      28px;
  --fs-h2:      40px;
  --fs-h1:      64px;
  --fs-display: 96px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Spacing — 4px base */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 128px;

  /* Radii — small, angular */
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(10, 26, 51, 0.06);
  --shadow-2: 0 4px 16px rgba(10, 26, 51, 0.08);
  --shadow-3: 0 12px 40px rgba(10, 26, 51, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  /* Layout */
  --max-w-prose:   680px;
  --max-w-content: 1080px;
  --max-w-wide:    1440px;
}

/* Element defaults */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg-1); scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.005em; line-height: var(--lh-snug); }

p  { margin: 0 0 1em; text-wrap: pretty; max-width: var(--max-w-prose); }
p.lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--fg-2); }

a {
  color: var(--brand-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--brand-hover); }

img, svg { max-width: 100%; display: block; }

/* Editorial utilities */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.byline, .meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.rule       { border: 0; border-top: 1px solid var(--rule); margin: var(--space-6) 0; }
.rule--firm { border-top-color: var(--rule-firm); }
.rule--ink  { border-top-color: var(--rule-ink); border-top-width: 2px; }
.rule--hair { border-top-width: 0.5px; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Responsive type scaling */
@media (max-width: 900px) {
  :root {
    --fs-h1:      44px;
    --fs-h2:      30px;
    --fs-h3:      22px;
    --fs-display: 56px;
    --fs-body:    16px;
    --fs-lead:    18px;
  }
}