/* ============================================================
   Harmony Intelligence — Foundations
   Colors + Typography (base tokens + semantic styles)
   ============================================================ */

/* ---------- FONTS ----------
   Two-family brand system, both self-hosted from /fonts:
   • Epilogue (geometric-humanist) — DISPLAY / headlines (signature voice)
   • Poppins  (geometric)           — BODY / UI / long text (legible workhorse)
   Mono: JetBrains Mono (CDN) — code, eyebrows, timestamps. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Epilogue — self-hosted (display) */
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Epilogue-Thin.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Epilogue-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Epilogue-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Epilogue-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Epilogue-Light.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Epilogue-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Epilogue-Regular.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Epilogue-Italic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-Medium.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Epilogue-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Epilogue-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Epilogue-Bold.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Epilogue-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Epilogue-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Epilogue-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Epilogue-Black.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Epilogue-BlackItalic.ttf") format("truetype"); }

/* Poppins — self-hosted (body) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Poppins-Thin.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Poppins-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Poppins-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Poppins-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Poppins-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Poppins-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Poppins-BlackItalic.ttf") format("truetype"); }

:root {
  /* ---------- BRAND CORE ---------- */
  --hi-purple:        #8848F8;   /* signature mark color */
  --hi-purple-600:    #7536E8;
  --hi-purple-700:    #5E22C8;
  --hi-purple-300:    #B496FB;
  --hi-purple-100:    #EFE6FF;
  --hi-purple-050:    #F8F3FF;

  --hi-navy:          #080058;   /* primary text & dark backgrounds */
  --hi-navy-900:      #050037;
  --hi-navy-800:      #0F0A6E;
  --hi-navy-700:      #1B1280;
  --hi-navy-600:      #2A1F95;
  --hi-navy-300:      #6B63B5;

  /* ---------- NEUTRALS ---------- */
  --hi-white:         #FFFFFF;
  --hi-cream:         #FBFAFE;   /* page background tint */
  --hi-grey-050:      #F4F3F8;
  --hi-grey-100:      #E9E7F0;
  --hi-grey-200:      #D5D2E0;
  --hi-grey-300:      #B4B0C5;
  --hi-grey-400:      #8B86A1;
  --hi-grey-500:      #5F5A78;
  --hi-grey-700:      #2E2A48;
  --hi-black:         #0A0820;

  /* ---------- SEMANTIC (security context) ---------- */
  --hi-critical:      #E11D48;   /* CVSS critical / 9-10 */
  --hi-critical-bg:   #FFE4E9;
  --hi-high:          #F97316;   /* high / 7-9 */
  --hi-high-bg:       #FFEDD5;
  --hi-medium:        #EAB308;   /* medium */
  --hi-medium-bg:     #FEF3C7;
  --hi-low:           #3B82F6;   /* low / informational */
  --hi-low-bg:        #DBEAFE;
  --hi-success:       #16A34A;   /* patched / safe */
  --hi-success-bg:    #DCFCE7;

  /* ---------- SURFACE TOKENS ---------- */
  --bg-page:          var(--hi-cream);
  --bg-elevated:      var(--hi-white);
  --bg-sunken:        var(--hi-grey-050);
  --bg-inverse:       var(--hi-navy);

  --fg-1:             var(--hi-navy);     /* primary text */
  --fg-2:             var(--hi-grey-700); /* secondary */
  --fg-3:             var(--hi-grey-500); /* tertiary / meta */
  --fg-4:             var(--hi-grey-400); /* placeholder */
  --fg-on-dark:       var(--hi-white);
  --fg-on-purple:     var(--hi-white);
  --fg-link:          var(--hi-purple-600);

  --border-subtle:    var(--hi-grey-100);
  --border-default:   var(--hi-grey-200);
  --border-strong:    var(--hi-grey-300);
  --border-focus:     var(--hi-purple);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (modular ~1.2) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;
  --fs-6xl:  96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

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

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(8, 0, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 0, 88, 0.06), 0 1px 2px rgba(8, 0, 88, 0.04);
  --shadow-md: 0 8px 20px rgba(8, 0, 88, 0.08), 0 2px 6px rgba(8, 0, 88, 0.05);
  --shadow-lg: 0 20px 40px rgba(8, 0, 88, 0.10), 0 6px 14px rgba(8, 0, 88, 0.06);
  --shadow-xl: 0 32px 60px rgba(8, 0, 88, 0.14), 0 10px 22px rgba(8, 0, 88, 0.08);
  --shadow-glow-purple: 0 0 0 4px rgba(136, 72, 248, 0.18);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- SEMANTIC TYPE STYLES ---------- */
.hi-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.hi-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.hi-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.hi-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.hi-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.hi-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.hi-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--hi-purple-600);
}
.hi-lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}
.hi-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.hi-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.hi-meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.hi-code, .hi-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--hi-grey-050);
  color: var(--hi-navy);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}
.hi-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.hi-link:hover { color: var(--hi-purple-700); }