@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root{
	
	/* ── Color primative tokens ───────────────────── */
	--blue-950: #0e1520;
	--blue-900: #141d2b;
	--blue-800: #1c2840;
	--blue-600: #00518E;
	--blue-400: #0a6fbe;
	--blue-200: #6eb4f7;
	--blue-100: #eaf0f8;
	--blue-050: #f5f7fa;
	--gray-200: #7f8285;
	--gray-100: #d3d8de;
	--gray-050: #f0f4f8;
	--white: #ffffff;
	
	--radius-4: 4px;
	--radius-8:	8px;
	--radius-12: 12px;
	--radius-14: 14px;
	--radius-pill: 9999px;
	
	--font-sans:    'Plus Jakarta Sans', system-ui, sans-serif;
	--font-mono:    'JetBrains Mono', monospace;

	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg:   1.125rem;  /* 18px */
	--text-xl:   1.25rem;   /* 20px */
	--text-2xl:  1.5rem;    /* 24px */
	--text-3xl:  1.875rem;  /* 30px */
	--text-4xl:  2.25rem;   /* 36px */
	--text-5xl:  3rem;      /* 48px */
	
	/* ── Color Semantic tokens ───────────────────── */
	--color-bg-primary: var(--blue-950);
	--color-bg-secondary: var(--blue-900);
	--color-bg-card: var(--blue-800);
	--color-bg-light: var(--blue-050);
	--color-bg-light-alt: var(--blue-100);
	--color-bg-white: var(--white);
	--color-brand: var(--blue-600);
	--color-brand-hover: var(--blue-400);
	--color-brand-accent: var(--blue-200);
	--color-brand-tint: rgba(0, 81, 142, 0.18);
	--color-brand-tint-md: rgba(0, 81, 142, 0.25);
	--color-text-primary: var(--gray-050);
	--color-text-brand: var(--blue-600);
	--color-text-on-light: var(--blue-950);
	--color-text-on-light-muted: var(--gray-200);
	--color-text-muted: rgba(240, 244, 248, 0.55);
	--color-text-subtle: rgba(240, 244, 248, 0.25);
	--color-border-light: rgba(0, 0, 0, 0.06);
	--color-border-brand: var(--blue-600);
	--color-border: rgba(255, 255, 255, 0.07);
	--color-border-md: rgba(255, 255, 255, 0.13);
	--color-border-hi: rgba(255, 255, 255, 0.18);
	
	
	
/* ── Spacing Primative Tokens ───────── */
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-96: 96px;
	--space-128: 128px;
	
	
/* ── Spacing semantic tokens ───────── */

	/* Buttons */
	--space-btn:          var(--space-16);  /* horizontal padding */
	--space-btn-y:        var(--space-8);   /* vertical padding */
	--space-btn-y-lg:     var(--space-12);  /* vertical padding large button */

	/* Cards */
	--space-card:         var(--space-24);  /* card padding */
	--space-card-gap:     var(--space-24);  /* gap between cards in a grid */

	/* Nav */
	--space-nav-x:        var(--space-12);  /* horizontal padding on nav links */
	--space-nav-y:        var(--space-6);   /* vertical padding on nav links */
	--space-nav-pill:     var(--space-4);   /* inner padding of the pill container */

	/* Content rhythm — space between elements within a section */
	--space-eyebrow-gap:  var(--space-12);  /* below eyebrow, above heading */
	--space-heading-gap:  var(--space-16);  /* below heading, above body text */
	--space-body-gap:     var(--space-24);  /* below body text, above CTA */

	/* Layout — gaps between major components */
	--space-grid-gap:     var(--space-24);  /* gap between grid columns */
	--space-stack-gap:    var(--space-48);  /* gap between stacked sections within a page */

	/* Sections — vertical breathing room */
	--space-section-y:    var(--space-96);  /* standard section top/bottom padding */
	--space-section-y-sm: var(--space-64);  /* smaller section top/bottom padding */
	--space-section-y-lg: var(--space-128); /* hero and large feature sections */

	/* Container */
	--space-container-x:  var(--space-24);  /* horizontal page padding mobile */
	--space-container-x-lg: var(--space-32); /* horizontal page padding desktop */

/* ── Shadow tokens ───────── */
	--shadow-card:       0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
	--shadow-card-hover: 0 4px 16px rgba(0,81,142,0.2), 0 1px 4px rgba(0,0,0,0.3);
	--shadow-nav:        0 4px 24px rgba(0,0,0,0.3);

/* ── Transition tokens ───────── */
	--transition-base: 200ms ease;
	--transition-slow: 400ms ease;
	
/* ── Z-index tokens ───────── */
	--z-base:    0;
	--z-raised:  10;
	--z-dropdown:20;
	--z-nav:     50;
	--z-modal:   100;
}

/* ── Typography semantic classes ───────── */
.type-display {
  font-family:    var(--font-sans);
  font-size:      clamp(2.5rem, 5vw, 4.5rem);
  font-weight:    700;
  line-height:    1.06;
  letter-spacing: -0.02em;
}

.type-h1 {
  font-family:    var(--font-sans);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    700;
  line-height:    1.12;
  letter-spacing: -0.01em;
}

.type-h2 {
  font-family:    var(--font-sans);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  font-weight:    600;
  line-height:    1.25;
  letter-spacing: 0;
}

.type-h3 {
  font-family:    var(--font-sans);
  font-size:      clamp(1.125rem, 2vw, 1.5rem);
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: 0;
}

.type-lead {
  font-family:    var(--font-sans);
  font-size:      clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight:    400;
  line-height:    1.7;
  letter-spacing: 0;
}

.type-body {
  font-family:    var(--font-sans);
  font-size:      1rem;
  font-weight:    400;
  line-height:    1.7;
  letter-spacing: 0;
}

.type-eyebrow {
  font-family:    var(--font-sans);
  font-size:      0.6875rem;
  font-weight:    700;
  line-height:    1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.type-caption {
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    400;
  line-height:    1.5;
  letter-spacing: 0;
}

.type-nav {
  font-family:    var(--font-sans);
  font-size:      0.78125rem;
  font-weight:    500;
  line-height:    1;
  letter-spacing: 0;
}

.type-button {
  font-family:    var(--font-sans);
  font-size:      0.8125rem;
  font-weight:    600;
  line-height:    1;
  letter-spacing: 0.02em;
}

.type-label {
  font-family:    var(--font-sans);
  font-size:      0.6875rem;
  font-weight:    700;
  line-height:    1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}