/* ============================================================
   NAL Solutions — Foundation Tokens
   Colors, typography, spacing, motion
   ============================================================ */

/* ---------- Webfonts ----------
   Inter (UI + headings) and JetBrains Mono (code + technical accents)
   Served via Google Fonts CDN — swap to local if self-hosting.
*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* -------- BRAND PALETTE (from logo) -------- */
  --brand-navy:   #1E3D6B;   /* dark blue face of triangle (NAL wordmark) */
  --brand-blue:   #3A7BB8;   /* mid blue face */
  --brand-teal:   #5BA9A3;   /* teal face + "Solutions" wordmark */
  --brand-mist:   #AFCBD4;   /* lightened teal (tints, subtle bg) */

  /* -------- NEUTRALS (slate-cool scale) -------- */
  --ink-0:  #FFFFFF;
  --ink-50: #F7F9FB;
  --ink-100:#EEF2F6;
  --ink-200:#D9E0E8;
  --ink-300:#B6C2CF;
  --ink-400:#8695A8;
  --ink-500:#5F6E82;
  --ink-600:#3E4B5E;
  --ink-700:#263245;
  --ink-800:#172232;
  --ink-900:#0B1220;   /* near-black navy — primary dark bg */
  --ink-950:#060B16;

  /* -------- SEMANTIC (light theme) -------- */
  --bg:           var(--ink-0);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-faint:     var(--ink-400);
  --fg-inverse:   var(--ink-0);

  --accent:       var(--brand-blue);
  --accent-hover: #2F6A9F;
  --accent-fg:    #FFFFFF;
  --accent-soft:  #E8F1F9;

  --success:      #2E9D6E;
  --warning:      #D4A13A;
  --danger:       #D14343;
  --info:         var(--brand-teal);

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --focus-ring:   rgba(58,123,184,0.45);

  /* Code / terminal surfaces */
  --code-bg:      #0E1626;
  --code-bg-alt:  #141E33;
  --code-fg:      #D8E2F2;
  --code-gutter:  #3E4B5E;
  --code-comment: #6E7D94;
  --code-keyword: #8EC5FF;   /* blue */
  --code-string:  #9FD8B4;   /* muted green */
  --code-fn:      #A8D7D2;   /* teal */
  --code-num:     #E7B38A;

  /* -------- TYPOGRAPHY SCALE -------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Geist', sans-serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  84px;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.72;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;
  --tracking-caps:   0.12em;

  /* -------- SPACING (4px base) -------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* -------- RADII -------- */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-full: 999px;

  /* -------- SHADOWS (cool-tinted) -------- */
  --shadow-xs:  0 1px 2px rgba(14,22,38,0.06);
  --shadow-sm:  0 2px 6px rgba(14,22,38,0.08);
  --shadow-md:  0 6px 18px rgba(14,22,38,0.10);
  --shadow-lg:  0 18px 40px rgba(14,22,38,0.14);
  --shadow-xl:  0 32px 70px rgba(14,22,38,0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glow:  0 0 0 1px rgba(58,123,184,0.35), 0 8px 28px rgba(58,123,184,0.28);

  /* -------- BORDERS -------- */
  --bw-hair: 1px;
  --bw-reg:  1px;
  --bw-em:   2px;

  /* -------- MOTION -------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);       /* expo.out — flagship scroll/entry */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* circ.inOut — transitions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* material std — small UI */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* sparingly, for celebratory */

  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-med:   420ms;
  --dur-slow:  800ms;
  --dur-xslow: 1200ms;

  /* -------- LAYOUT -------- */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 4vw, 48px);

  /* -------- GRADIENTS + PATTERNS -------- */
  --grad-hero:   linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 55%, var(--brand-teal) 100%);
  --grad-mark:   linear-gradient(180deg, var(--brand-teal) 0%, var(--brand-blue) 55%, var(--brand-navy) 100%);
  --grad-subtle: linear-gradient(180deg, var(--ink-50) 0%, var(--ink-0) 100%);
  --grad-deep:   radial-gradient(120% 80% at 20% 0%, #13223B 0%, #0B1220 60%, #060B16 100%);

  /* 24px dot grid — technical motif, overlay at low opacity */
  --pattern-grid: radial-gradient(circle, rgba(58,123,184,0.18) 1px, transparent 1.2px);
  --pattern-grid-size: 24px 24px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply these classes or match tags via base styles below.
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg); }

.h-display, .nal-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-weight: 700;
  font-size: clamp(28px, 3vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}
h4, .h4 {
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
h6, .h6 {
  font-weight: 600;
  font-size: var(--fs-md);
}

p, .p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg); }
.p-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.p-small { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-muted); }

/* Mono / technical */
code, .code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}
.code-inline {
  background: var(--bg-muted);
  color: var(--brand-navy);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 0.88em;
}
.code-block {
  font-family: var(--font-mono);
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
  letter-spacing: var(--tracking-mono);
  overflow-x: auto;
}

/* Eyebrow / label / tag — all-caps mono micro-copy */
.eyebrow, .label-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-blue);
}

/* Prose defaults */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }

::selection { background: var(--brand-blue); color: #fff; }

/* Focus ring — keyboard only */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}