/* Novapep — design tokens. Link this first. Reference variables, never hard-code colors. */

@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Funnel Display"; src:url("../fonts/FunnelDisplay-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }

:root {
  /* Core brand */
  --np-deep:#0E343B; --np-volt:#E9FE53; --np-bone:#F4F1EA; --np-paper:#FBFAF6; --np-white:#FFFFFF;

  /* Deep green scale */
  --np-deep-950:#061A1E; --np-deep-900:#0A272C; --np-deep-800:#0E343B; --np-deep-700:#1B4750;
  --np-deep-600:#2C5C66; --np-deep-500:#46757F; --np-deep-400:#6B949D; --np-deep-300:#9DB8BD;
  --np-deep-200:#C7D8DB; --np-deep-100:#E4ECEE; --np-deep-50:#F1F5F6;

  /* Volt scale */
  --np-volt-700:#B8CC2E; --np-volt-600:#D3E83C; --np-volt-500:#E9FE53;
  --np-volt-400:#EFFF7E; --np-volt-300:#F5FFA8; --np-volt-200:#FAFFD0; --np-volt-100:#FDFFEB;

  /* Warm neutrals */
  --np-bone-900:#2A2823; --np-bone-700:#6B675E; --np-bone-500:#A8A498;
  --np-bone-300:#D9D4C7; --np-bone-200:#E6E1D4;

  /* Semantic */
  --fg-1:var(--np-deep-800); --fg-2:var(--np-deep-700); --fg-3:var(--np-deep-500); --fg-muted:var(--np-deep-400);
  --fg-on-deep:var(--np-bone); --fg-on-deep-2:var(--np-deep-200); --fg-on-volt:var(--np-deep-800);
  --bg-1:var(--np-paper); --bg-2:var(--np-bone); --bg-3:var(--np-bone-200);
  --bg-deep:var(--np-deep-800); --bg-deep-2:var(--np-deep-900); --bg-volt:var(--np-volt-500);
  --line-1:rgba(14,52,59,0.10); --line-2:rgba(14,52,59,0.18); --line-on-deep:rgba(244,241,234,0.12);

  /* Status */
  --np-success:#5AA67A; --np-warning:#E2B14A; --np-danger:#C7553D; --np-info:var(--np-deep-500);

  /* Type */
  --font-display:"Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:var(--font-display);
  --font-mono:"JetBrains Mono","IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-36:2.25rem; --fs-48:3rem;
  --fs-64:4rem; --fs-80:5rem; --fs-96:6rem; --fs-128:8rem;

  /* Spacing (4px base) */
  --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-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-2xl:40px; --r-pill:999px;

  /* Shadows — deep-green tint only */
  --shadow-1:0 1px 2px rgba(14,52,59,.06);
  --shadow-2:0 4px 14px rgba(14,52,59,.08);
  --shadow-3:0 18px 40px -16px rgba(14,52,59,.18);
  --shadow-hero:0 40px 80px -30px rgba(14,52,59,.45);

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:140ms; --t-base:220ms; --t-slow:420ms;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; padding:0; }
body { font-family:var(--font-body); color:var(--fg-1); background:var(--bg-1);
  font-size:var(--fs-16); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); color:var(--fg-1); font-weight:500;
  letter-spacing:-.02em; line-height:1.02; margin:0; text-wrap:balance; }
h1 { font-size:clamp(2.25rem,4.5vw,var(--fs-64)); letter-spacing:-.025em; }
h2 { font-size:clamp(1.875rem,3.4vw,var(--fs-48)); letter-spacing:-.02em; }
h3 { font-size:var(--fs-30); letter-spacing:-.015em; line-height:1.1; }
.display-1 { font-size:clamp(3.5rem,8vw,var(--fs-128)); font-weight:500; letter-spacing:-.035em; line-height:.96; }
p { font-size:var(--fs-16); line-height:1.6; margin:0; text-wrap:pretty; }
.lead { font-size:var(--fs-20); line-height:1.5; color:var(--fg-2); }
.eyebrow { font-size:var(--fs-13); font-weight:500; letter-spacing:.02em; color:var(--fg-3); }
a { color:var(--fg-1); text-decoration:none; transition:opacity var(--t-fast) var(--ease-out); }
a:hover { opacity:.7; }
img { max-width:100%; }
::selection { background:var(--np-volt); color:var(--np-deep-800); }