/* =========================================================================
   NGF Design System — Core Tokens
   Colors, typography, spacing, radii, shadows, motion.
   ========================================================================= */

/* Typekit + Google Fonts are loaded as <link> tags via the ngf/global library
   (see ngf.libraries.yml) with preconnect hints (see ngf.theme), not @import
   here — @import serializes the request behind this stylesheet and is
   invisible to the browser's preload scanner. */

:root {
  /* ---------------------------------------------------------------------
     PRIMARY BRAND COLORS — two lineages.
       Seismic (cool-purple), Geodetic (warm-red).
     --------------------------------------------------------------------- */
  --ngf-seismic-50:  #ecedf6;
  --ngf-seismic-100: #d1d2e8;
  --ngf-seismic-200: #a4a6d1;
  --ngf-seismic-300: #7679ba;
  --ngf-seismic-400: #5a5da7;
  --ngf-seismic-500: #434596;
  --ngf-seismic-600: #383a82;
  --ngf-seismic-700: #2c2e68;
  --ngf-seismic-800: #20214c;
  --ngf-seismic-900: #14152f;

  --ngf-geodetic-50:  #fdecec;
  --ngf-geodetic-100: #f7cccc;
  --ngf-geodetic-200: #ee9999;
  --ngf-geodetic-300: #e16666;
  --ngf-geodetic-400: #d74444;
  --ngf-geodetic-500: #cc2929;
  --ngf-geodetic-600: #ad2020;
  --ngf-geodetic-700: #871919;
  --ngf-geodetic-800: #5e1111;
  --ngf-geodetic-900: #380a0a;

  --ngf-primary:       var(--ngf-seismic-500);
  --ngf-primary-hover: var(--ngf-seismic-600);
  --ngf-primary-press: var(--ngf-seismic-700);

  /* ---------------------------------------------------------------------
     NEUTRALS — warm-gray scale biased toward paper/bone
     --------------------------------------------------------------------- */
  --ngf-bone:  #f4f4f4;
  --ngf-paper: #fbfaf6;
  --ngf-white: #ffffff;

  --ngf-ink-50:  #f3f4f4;
  --ngf-ink-100: #e4e6e6;
  --ngf-ink-200: #c6cacb;
  --ngf-ink-300: #9ba2a4;
  --ngf-ink-400: #5f6769;
  --ngf-ink-500: #4e5759;
  --ngf-ink-600: #353d3f;
  --ngf-ink-700: #242b2d;
  --ngf-ink-800: #1a2023;
  --ngf-ink-900: #11161a;

  /* ---------------------------------------------------------------------
     SEMANTIC COLOR TOKENS — use these in components, not the raw scales.
     --------------------------------------------------------------------- */
  --ngf-fg-1:       var(--ngf-ink-900);
  --ngf-fg-2:       var(--ngf-ink-600);
  --ngf-fg-3:       var(--ngf-ink-400);
  --ngf-fg-on-dark: var(--ngf-bone);
  --ngf-fg-muted-on-dark: #aeb4b7;

  --ngf-bg-page:    var(--ngf-bone);
  --ngf-bg-surface: var(--ngf-white);
  --ngf-bg-subtle:  var(--ngf-ink-50);
  --ngf-bg-dark:    var(--ngf-ink-800);

  --ngf-border:        rgba(17, 22, 26, 0.10);
  --ngf-border-strong: rgba(17, 22, 26, 0.18);
  --ngf-border-on-dark: rgba(255, 255, 255, 0.12);

  --ngf-link:       var(--ngf-geodetic-500);
  --ngf-link-hover: var(--ngf-seismic-500);

  --ngf-success: #2f7a4a;
  --ngf-warning: #8a5c10;
  --ngf-danger:  #b03a2e;
  --ngf-info:    var(--ngf-geodetic-500);

  --ngf-kicker-earthquake: var(--ngf-seismic-500);
  --ngf-kicker-science:    var(--ngf-geodetic-500);
  --ngf-kicker-org:        var(--ngf-ink-600);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --ngf-font-sans:      'new-hero', Arial, sans-serif;
  --ngf-font-serif:     'new-hero', Arial, sans-serif;
  --ngf-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ngf-font-display:   var(--ngf-font-sans);
  --ngf-font-body:      var(--ngf-font-sans);
  --ngf-font-editorial: var(--ngf-font-serif);

  --ngf-w-regular: 400;
  --ngf-w-medium:  500;
  --ngf-w-semi:    600;
  --ngf-w-bold:    700;
  --ngf-w-black:   800;

  --ngf-fs-xs:   0.75rem;
  --ngf-fs-sm:   0.875rem;
  --ngf-fs-base: 1rem;
  --ngf-fs-md:   1.125rem;
  --ngf-fs-lg:   1.25rem;
  --ngf-fs-xl:   1.5rem;
  --ngf-fs-2xl:  1.875rem;
  --ngf-fs-3xl:  2.375rem;
  --ngf-fs-4xl:  3rem;
  --ngf-fs-5xl:  4rem;
  --ngf-fs-6xl:  5rem;

  --ngf-lh-tight: 1.1;
  --ngf-lh-snug:  1.25;
  --ngf-lh-body:  1.6;
  --ngf-lh-loose: 1.8;

  --ngf-tr-tight:  -0.02em;
  --ngf-tr-snug:   -0.01em;
  --ngf-tr-normal: 0;
  --ngf-tr-wide:   0.04em;
  --ngf-tr-caps:   0.08em;

  /* ---------------------------------------------------------------------
     SPACING — 8px grid with 4px half-steps
     --------------------------------------------------------------------- */
  --ngf-sp-0:  0;
  --ngf-sp-1:  4px;
  --ngf-sp-2:  8px;
  --ngf-sp-3:  12px;
  --ngf-sp-4:  16px;
  --ngf-sp-5:  20px;
  --ngf-sp-6:  24px;
  --ngf-sp-8:  32px;
  --ngf-sp-10: 40px;
  --ngf-sp-12: 48px;
  --ngf-sp-16: 64px;
  --ngf-sp-20: 80px;
  --ngf-sp-24: 96px;
  --ngf-sp-32: 128px;

  --ngf-maxw-prose: 68ch;
  --ngf-maxw-copy:  820px;
  --ngf-maxw-page:  1440px;
  --ngf-maxw-wide:  1600px;

  /* ---------------------------------------------------------------------
     RADII
     --------------------------------------------------------------------- */
  --ngf-r-sm:   4px;
  --ngf-r-md:   8px;
  --ngf-r-lg:   12px;
  --ngf-r-xl:   16px;
  --ngf-r-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — quiet elevation
     --------------------------------------------------------------------- */
  --ngf-shadow-0: none;
  --ngf-shadow-1: 0 1px 2px rgba(15, 20, 25, 0.06), 0 4px 16px rgba(15, 20, 25, 0.06);
  --ngf-shadow-2: 0 2px 4px rgba(15, 20, 25, 0.07), 0 8px 24px rgba(15, 20, 25, 0.08);
  --ngf-shadow-3: 0 4px 8px rgba(15, 20, 25, 0.08), 0 12px 32px rgba(15, 20, 25, 0.10);
  --ngf-shadow-4: 0 8px 16px rgba(15, 20, 25, 0.09), 0 24px 48px rgba(15, 20, 25, 0.14);

  --ngf-focus-ring: 0 0 0 2px var(--ngf-white), 0 0 0 4px var(--ngf-geodetic-500);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ngf-dur-fast: 120ms;
  --ngf-dur-base: 220ms;
  --ngf-dur-slow: 400ms;
  --ngf-ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ngf-ease-inout:    cubic-bezier(0.4, 0, 0.2, 1);
  --ngf-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}