/* =========================================================================
   NevaSec. Design tokens
   Offensive security firm · Alsace · technical, direct, no-nonsense voice.
   ========================================================================= */

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

:root {
  /* ---------- Brand core ---------- */
  --brand-coral:      #F14C4C;   /* primary accent. "Sec.", CTAs, alerts */
  --brand-coral-600:  #D93B3C;   /* hover / press */
  --brand-coral-700:  #B82F30;
  --brand-coral-100:  #FDE7E7;   /* tint. soft bg */
  --brand-coral-050:  #FEF4F4;

  --brand-ink:        #0B0B0D;   /* near-black. wordmark + cat mascot */
  --brand-ink-soft:   #17181B;

  /* ---------- Neutrals (cool gray, slight blue undertone) ---------- */
  --gray-950: #0B0B0D;
  --gray-900: #17181B;
  --gray-800: #24262B;
  --gray-700: #3A3D44;
  --gray-600: #565A63;
  --gray-500: #7A7F88;
  --gray-400: #A3A7AF;
  --gray-300: #CED1D6;
  --gray-200: #E5E7EB;
  --gray-100: #F1F2F4;
  --gray-050: #F7F8F9;
  --white:    #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--gray-950);       /* primary text */
  --fg-2: var(--gray-700);       /* secondary */
  --fg-3: var(--gray-500);       /* muted / captions */
  --fg-inverse: var(--white);
  --fg-accent: var(--brand-coral);

  /* ---------- Semantic background ---------- */
  --bg-1: var(--white);          /* canvas */
  --bg-2: var(--gray-050);       /* subtle section */
  --bg-3: var(--gray-100);       /* raised / code block */
  --bg-inverse: var(--brand-ink); /* dark sections */
  --bg-accent: var(--brand-coral);

  /* ---------- Semantic status ---------- */
  --success:     #15A36A;
  --success-bg:  #E6F6EE;
  --warning:     #D98B1E;
  --warning-bg:  #FBF0DB;
  --danger:      #B42318;
  --danger-bg:   #FDECEA;
  --info:        #2B6CB0;
  --info-bg:     #E4EEF8;

  /* Pentest severity. report palette, all white-text-safe */
  --sev-critical: #B00000;
  --sev-high:     #E85600;
  --sev-medium:   #D97706;   /* darker amber. 4.5:1 with white */
  --sev-low:      #2563EB;   /* blue. "minor issue", not "passed" */
  --sev-info:     #A6AFBE;

  /* ---------- Borders ---------- */
  --border-1: var(--gray-200);   /* hairline */
  --border-2: var(--gray-300);   /* stronger */
  --border-strong: var(--gray-900);
  --border-accent: var(--brand-coral);

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;            /* default control radius */
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(11,11,13,.06), 0 1px 1px rgba(11,11,13,.04);
  --shadow-2: 0 4px 10px rgba(11,11,13,.06), 0 2px 4px rgba(11,11,13,.04);
  --shadow-3: 0 12px 28px rgba(11,11,13,.10), 0 4px 10px rgba(11,11,13,.04);
  --shadow-focus: 0 0 0 3px rgba(241,76,76,.28);

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0;
  --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: 128px;

  /* ---------- Type. families ---------- */
  --font-display: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type. scale ---------- */
  --fs-display: 72px;   --lh-display: 1.02;  --tr-display: -0.03em;
  --fs-h1: 48px;        --lh-h1: 1.08;       --tr-h1: -0.02em;
  --fs-h2: 36px;        --lh-h2: 1.15;       --tr-h2: -0.015em;
  --fs-h3: 28px;        --lh-h3: 1.2;        --tr-h3: -0.01em;
  --fs-h4: 22px;        --lh-h4: 1.3;        --tr-h4: -0.005em;
  --fs-lead: 20px;      --lh-lead: 1.5;
  --fs-body: 16px;      --lh-body: 1.55;
  --fs-small: 14px;     --lh-small: 1.5;
  --fs-caption: 12px;   --lh-caption: 1.4;   --tr-caption: 0.04em;
  --fs-eyebrow: 12px;   --lh-eyebrow: 1;     --tr-eyebrow: 0.14em;
  --fs-mono: 14px;      --lh-mono: 1.55;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ====================== Semantic element styles ====================== */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  font-weight: 800;
}

.display, .h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 800;
}
h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: 800;
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: 700;
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: 700;
}
h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  font-weight: 600;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-2);
  font-weight: 400;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

small, .small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-coral);
  display: inline-block;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}
code {
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: .9em;
  color: var(--fg-1);
}
pre {
  background: var(--brand-ink);
  color: var(--gray-100);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border-left: 3px solid var(--brand-coral);
}

/* The signature coral underline used in the wordmark */
.coral-rule {
  display: inline-block;
  height: 3px;
  width: 48px;
  background: var(--brand-coral);
  border: 0;
}

/* Triangle tick. nod to the cat nose / target mark */
.tri-tick::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--brand-coral);
  margin-right: var(--s-2);
  transform: translateY(1px);
}