/* ============================================================
   NetRisk.io — Design tokens
   Aligned to the product: amber on warm-black,
   Manrope / JetBrains Mono / Instrument Serif,
   real evidence + severity semantic colors.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---- Base surfaces (warm near-black, from product --auth-bg family) ---- */
  --bg:            #0B0D10;
  --bg-2:          #0E1014;
  --bg-3:          #13161B;
  --surface:       #13161B;
  --surface-2:     #171A20;
  --elevated:      #1A1E25;
  --elevated-2:    #20242C;

  /* ---- Borders & hairlines ---- */
  --border:        rgba(233, 230, 222, 0.08);
  --border-2:      rgba(233, 230, 222, 0.14);
  --border-strong: rgba(233, 230, 222, 0.26);

  /* ---- Text (warm off-white) ---- */
  --text:          #E9E6DE;
  --text-2:        #C9C5BA;
  --text-3:        #9B9890;
  --text-faint:    #52524C;

  /* ---- Brand / primary accent = AMBER (product --auth-accent) ---- */
  --brand:         #E0912E;
  --brand-bright:  #F2A948;
  --brand-deep:    #8C551B;
  /* legacy alias: much of the system references --verified as the dominant
     intelligence accent — keep it pointing at the brand amber */
  --verified:      #E0912E;
  --verified-glow: #F2A948;
  --verified-deep: #8C551B;

  /* ---- Semantic state colors (from product evidence/severity system) ---- */
  --evidence:      #45C68D;   /* verified evidence — green */
  --observed:      #74A9CC;   /* observed / attested — steel blue */
  --ai:            #9B7BF0;   /* AI / research — violet */
  --missing:       #E6B84C;   /* inferred / missing context — yellow */
  --critical:      #DB5440;   /* critical risk — red */
  --healthy:       #45C68D;   /* healthy — green */
  --neutral:       #8C8A82;

  /* ---- Accent washes / glows ---- */
  --verified-12:   rgba(224, 145, 46, 0.13);
  --verified-20:   rgba(224, 145, 46, 0.24);
  --verified-40:   rgba(224, 145, 46, 0.44);
  --evidence-12:   rgba(69, 198, 141, 0.13);
  --evidence-20:   rgba(69, 198, 141, 0.24);
  --observed-12:   rgba(116, 169, 204, 0.13);
  --observed-20:   rgba(116, 169, 204, 0.24);
  --ai-12:         rgba(155, 123, 240, 0.14);
  --ai-20:         rgba(155, 123, 240, 0.26);
  --missing-12:    rgba(230, 184, 76, 0.13);
  --missing-20:    rgba(230, 184, 76, 0.26);
  --critical-12:   rgba(219, 84, 64, 0.13);
  --critical-20:   rgba(219, 84, 64, 0.28);
  --healthy-12:    rgba(69, 198, 141, 0.13);
  --healthy-20:    rgba(69, 198, 141, 0.24);

  /* ---- Typography ---- */
  --font-display:   'Manrope', system-ui, sans-serif;       /* UI + component headings */
  --font-editorial: 'Instrument Serif', Georgia, serif;     /* big marketing headlines */
  --font-body:      'Manrope', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ---- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow-md:  0 8px 30px rgba(0,0,0,.5);
  --shadow-lg:  0 24px 70px rgba(0,0,0,.6);
  --shadow-glow-v: 0 0 0 1px var(--verified-20), 0 10px 40px -8px var(--verified-20);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms; --dur-2: 360ms; --dur-3: 650ms; --dur-4: 1100ms;

  /* ---- Graph ---- */
  --graph-line: 1.5px;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --nav-h: 68px;
}