/* PRIME Design System Tokens
   Fonts: Archivo (Semibold) for display/headings, Source Sans Pro for body
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
  /* ── Brand Colors ─────────────────────────────── */
  --prime-navy:    #001C55;  /* Primary brand, deep/trustworthy */
  --prime-blue:    #0C63E7;  /* Action blue */
  --prime-sky:     #09A6F3;  /* Supporting sky */
  --prime-cyan:    #07C8F9;  /* Accent cyan, Highlight */
  --prime-white:   #FFFFFF;

  /* ── Neutrals ─────────────────────────────────── */
  --ink:           #0A1028;
  --ink-2:         rgba(0, 28, 85, 0.78);
  --mute:          rgba(0, 28, 85, 0.55);
  --line:          rgba(0, 28, 85, 0.12);
  --bg-soft:       #F4F7FC;
  --bg-warm:       #F0EEE9;

  /* ── Semantic ─────────────────────────────────── */
  --color-fg:          var(--ink);
  --color-fg-mute:     var(--mute);
  --color-bg:          #ffffff;
  --color-bg-alt:      var(--bg-soft);
  --color-accent:      var(--prime-cyan);
  --color-primary:     var(--prime-navy);
  --color-link:        var(--prime-blue);
  --color-on-primary:  #ffffff;
  --color-on-accent:   var(--prime-navy);

  /* ── Typography ───────────────────────────────── */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Sans Pro', system-ui, sans-serif;
  --fw-display:   600;   /* Archivo Semibold */
  --fw-body:      400;   /* Source Sans Pro Regular */
  --fw-body-bold: 700;

  --ls-display: -0.015em;
  --ls-caps:     0.14em;

  /* Type scale */
  --fs-display: 64px;
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-caps:    11px;

  /* ── Spacing ──────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ── Radii ───────────────────────────────────── */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 28, 85, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 28, 85, 0.10);
  --shadow-lg:  0 20px 50px rgba(0, 28, 85, 0.15);
  --shadow-key: 0 4px 12px rgba(0, 28, 85, 0.10), 0 20px 50px rgba(0, 28, 85, 0.15);
}

/* Semantic element styles */
h1, .h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: 1.02;
  color: var(--color-primary);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  color: var(--color-primary);
}
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-primary);
}
p, body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-fg);
}
.caps, .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-caps);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}