/* ============================================================
   nextgov iT — Design System
   Colors & Type tokens. Import this file at the top of any
   surface you are building and use the CSS variables below.
   ============================================================ */

/* ————————————————————————————————————————————————————————————
   Fonts
   ———————————————————————————————————————————————————————————— */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ——— Core palette ———————————————————————————————————————— */

  /* Deep purple — the brand's primary "ink" color, used for
     headlines, logo wordmark, and the full-bleed dark sections. */
  --ngi-purple-900: #3A0E2C;   /* darkest, used for body copy */
  --ngi-purple-700: #5D1049;   /* flagship brand purple (logo, divider bg) */
  --ngi-purple-500: #7A2A63;   /* secondary text, subtitle ink */
  --ngi-purple-300: #8B6B80;   /* muted / captions */

  /* Cream neutrals — the warm off-white backdrop that defines
     the brand's "paper" feel across surfaces. */
  --ngi-paper:      #FDF9F7;   /* raised surface, cards */
  --ngi-cream:      #F7EFEC;   /* page background */
  --ngi-cream-2:    #F0E4DF;   /* divider strip, subtle bands */

  /* Orange — the accent. Always earned, never decorative. */
  --ngi-orange-600: #E8500F;   /* primary accent (tags, CTAs, logo dot) */
  --ngi-orange-500: #FF7A2E;   /* lighter orange for on-dark accents */
  --ngi-orange-100: #FAD9C8;   /* tint — soft backgrounds, highlights */

  /* Rules / borders, typically purple at low opacity so they
     sit naturally on cream without looking gray. */
  --ngi-rule:        rgba(93, 16, 73, 0.14);
  --ngi-rule-strong: rgba(93, 16, 73, 0.28);

  /* ——— Semantic aliases ————————————————————————————————————— */
  --ngi-ink:          var(--ngi-purple-900);
  --ngi-ink-strong:   var(--ngi-purple-700);
  --ngi-ink-soft:     var(--ngi-purple-500);
  --ngi-ink-muted:    var(--ngi-purple-300);
  --ngi-bg:           var(--ngi-cream);
  --ngi-surface:      var(--ngi-paper);
  --ngi-accent:       var(--ngi-orange-600);
  --ngi-accent-hi:    var(--ngi-orange-500);
  --ngi-accent-soft:  var(--ngi-orange-100);

  /* ——— Type stacks ————————————————————————————————————————— */
  --ngi-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ngi-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Inter stylistic sets used across the brand: ss01 (alt a/g),
     cv11 (single-storey a in specific weights), tabular numerics
     for wayfinding and KVs. */
  --ngi-font-features: "ss01", "cv11", "tnum";

  /* ——— Type scale (slide + marketing) ————————————————————— */
  /* Slide-scale (authored against 1920×1080). Halve roughly for
     web pages. */
  --ngi-fs-display:  140px;   /* Hero title slide */
  --ngi-fs-h1:       84px;    /* Section heads, divider h1 */
  --ngi-fs-h2:       48px;    /* Subtitle / supporting head */
  --ngi-fs-h3:       32px;    /* Card titles */
  --ngi-fs-lead:     28px;    /* Takeaway / lead body */
  --ngi-fs-body-lg:  24px;    /* Bullet body */
  --ngi-fs-body:     18px;    /* Standard body */
  --ngi-fs-small:    14px;    /* Captions, eyebrows, chrome */
  --ngi-fs-micro:    12px;    /* Tags, stamps */

  /* ——— Spacing scale ——————————————————————————————————————— */
  --ngi-space-1: 4px;
  --ngi-space-2: 8px;
  --ngi-space-3: 14px;
  --ngi-space-4: 22px;
  --ngi-space-5: 36px;
  --ngi-space-6: 56px;
  --ngi-space-7: 100px;   /* slide gutter */
  --ngi-space-8: 160px;   /* slide outer padding */

  /* ——— Radii ——————————————————————————————————————————————— */
  --ngi-radius-xs: 2px;
  --ngi-radius-sm: 4px;   /* cards */
  --ngi-radius-md: 8px;
  --ngi-radius-pill: 999px;

  /* ——— Shadows ————————————————————————————————————————————— */
  --ngi-shadow-card:     0 1px 0 rgba(232,80,15,0.25), 0 20px 40px -20px rgba(93,16,73,0.18);
  --ngi-shadow-soft:     0 2px 8px rgba(93,16,73,0.08);
  --ngi-shadow-lift:     0 8px 24px -8px rgba(93,16,73,0.22);
}

/* ————————————————————————————————————————————————————————————
   Base element styles — opt-in by adding .ngi to <html> or <body>.
   All selectors are wrapped in :where() so they contribute ZERO
   specificity — any locally-scoped rule in a consuming file wins
   without needing to fight these defaults.
   ———————————————————————————————————————————————————————————— */
:where(.ngi), :where(.ngi) * { box-sizing: border-box; }

:where(.ngi) {
  font-family: var(--ngi-font-sans);
  font-feature-settings: var(--ngi-font-features);
  color: var(--ngi-ink);
  background: var(--ngi-bg);
  letter-spacing: -0.005em;
}

:where(.ngi h1, .ngi h2, .ngi h3, .ngi h4) {
  color: var(--ngi-ink-strong);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
:where(.ngi h1) { font-size: var(--ngi-fs-h1); line-height: 1.04; }
:where(.ngi h2) { font-size: var(--ngi-fs-h2); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
:where(.ngi h3) { font-size: var(--ngi-fs-h3); line-height: 1.2;  font-weight: 600; letter-spacing: -0.015em; }
:where(.ngi h4) { font-size: 24px;             line-height: 1.2;  font-weight: 600; letter-spacing: -0.015em; }

:where(.ngi p, .ngi li) { font-size: var(--ngi-fs-body); line-height: 1.5; color: var(--ngi-ink); }
:where(.ngi small)      { font-size: var(--ngi-fs-small); color: var(--ngi-ink-muted); }

/* Eyebrow — the all-caps tracked-out accent label used above
   section heads and over cards. */
.ngi .ngi-eyebrow {
  font-size: var(--ngi-fs-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ngi-accent);
}

/* Tag / chip — a cousin of the eyebrow, used inline. */
.ngi .ngi-tag {
  display: inline-block;
  font-size: var(--ngi-fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ngi-accent);
  padding: 4px 10px;
  border: 1px solid var(--ngi-rule);
  border-radius: var(--ngi-radius-pill);
  background: transparent;
}

/* Monospaced tool / command lozenge. */
.ngi .ngi-mono,
.ngi code {
  font-family: var(--ngi-font-mono);
  font-size: 0.9em;
  background: rgba(232,80,15,0.08);
  color: var(--ngi-ink-strong);
  padding: 2px 8px;
  border-radius: var(--ngi-radius-sm);
}

/* Rule — the ubiquitous 2px orange tick placed before labels. */
.ngi .ngi-tick::before {
  content: ''; display: inline-block;
  width: 28px; height: 2px;
  background: var(--ngi-accent);
  margin-right: 12px; vertical-align: middle;
}

/* Button primitives ———————————————————————————————————————— */
.ngi .ngi-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 12px 22px;
  border-radius: var(--ngi-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ngi .ngi-btn--primary   { background: var(--ngi-accent); color: #fff; }
.ngi .ngi-btn--primary:hover   { background: #D9450A; }
.ngi .ngi-btn--secondary { background: transparent; color: var(--ngi-ink-strong); border-color: var(--ngi-rule-strong); }
.ngi .ngi-btn--secondary:hover { border-color: var(--ngi-ink-strong); }
.ngi .ngi-btn--ghost     { background: transparent; color: var(--ngi-ink-strong); }
.ngi .ngi-btn--ghost:hover     { background: var(--ngi-rule); }