/* PenX webfonts — DM Sans (variable, 400–500) and DM Mono 400/500, latin subset,
   self-hosted so the hub works offline. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/dm-sans.woff2) format('woff2')}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-400.woff2) format('woff2')}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-500.woff2) format('woff2')}

/* ── PenX palette ───────────────────────────────────────────────────────────────
   Three brand colours, one neutral ramp, five semantic hues. Nothing else.
   The neutral ramp is anchored on the values the brand already used, then
   regularised so the steps are evenly spaced and predictable.
   ────────────────────────────────────────────────────────────────────────────── */
:root{
  /* Brand */
  --penx-black:#000000;
  --penx-white:#FFFFFF;
  --penx-red:#FF3232;
  --penx-orange:#FF7D32;
  --penx-gradient:linear-gradient(90deg,#FF3232 0%,#FF7D32 100%); /* @kind color */
  --penx-gradient-diagonal:linear-gradient(135deg,#FF3232 0%,#FF7D32 100%); /* @kind color */

  /* Neutral ramp — pure grey, 13 steps. Dark-first: use 950→800 for surfaces,
     600→400 for type, 050→200 for inverted surfaces. */
  --grey-000:#FFFFFF;
  --grey-050:#FAFAFA;
  --grey-100:#F0F0F0;
  --grey-200:#E4E4E4;
  --grey-300:#C4C4C4;
  --grey-400:#A6A6A6;
  --grey-500:#6E6E6E;
  --grey-600:#434343;
  --grey-700:#2C2C2C;
  --grey-800:#1F1F1F;
  --grey-850:#171717;
  --grey-900:#121212;
  --grey-950:#0B0B0B;
  --grey-1000:#000000;

  /* Semantic hues — findings, states and platform UI. Each has a mid value,
     a tint for grounds and a shade for hover. */
  --critical-500:#FF3232;
  --critical-600:#E52020;
  --critical-tint:rgba(255,50,50,0.12);

  --high-500:#FF7D32;
  --high-600:#E56520;
  --high-tint:rgba(255,125,50,0.12);

  --warning-500:#FFB020;
  --warning-600:#E59A12;
  --warning-tint:rgba(255,176,32,0.12);

  --success-500:#29C77E;
  --success-600:#1FA967;
  --success-tint:rgba(41,199,126,0.12);

  --info-500:#4C8DFF;
  --info-600:#2E72E8;
  --info-tint:rgba(76,141,255,0.12);
}

/* ── Semantic aliases ───────────────────────────────────────────────────────────
   Design against these, not the palette. The system is dark-first: every alias
   below assumes black-ground UI. Light surfaces are reachable through the
   -inverse aliases.
   ────────────────────────────────────────────────────────────────────────────── */
:root{
  /* Surfaces — five levels, darkest first */
  --surface-page:var(--grey-1000);
  --surface-1:var(--grey-950);
  --surface-2:var(--grey-900);
  --surface-3:var(--grey-850);
  --surface-4:var(--grey-800);
  --surface-field:var(--grey-900);
  --surface-overlay:var(--grey-900);
  --surface-inverse:var(--grey-050);
  --surface-hover:rgba(255,255,255,0.04); /* @kind color */
  --surface-active:rgba(255,255,255,0.08); /* @kind color */
  --surface-selected:rgba(255,50,50,0.08); /* @kind color */

  /* Text */
  --text-primary:var(--grey-000);
  --text-secondary:var(--grey-400);
  --text-tertiary:var(--grey-500);
  --text-disabled:var(--grey-600);
  --text-placeholder:var(--grey-600);
  --text-accent:var(--penx-red);
  --text-inverse:var(--grey-1000);
  --text-on-accent:var(--grey-1000);
  --text-link:var(--penx-red);
  --text-link-hover:var(--penx-orange);

  /* Borders */
  --border-subtle:var(--grey-800);
  --border-default:var(--grey-700);
  --border-strong:var(--grey-600);
  --border-inverse:var(--grey-200);
  --border-focus:var(--penx-red);
  --border-on-dark:var(--grey-000);

  /* Interactive — the single accent, used once per view */
  --action-primary:var(--penx-gradient);
  --action-primary-text:var(--grey-1000);
  --action-secondary-border:var(--grey-000);
  --action-secondary-text:var(--grey-000);
  --action-destructive:var(--critical-500);
  --action-disabled-text:var(--grey-600);

  /* Status & findings */
  --status-critical:var(--critical-500);
  --status-critical-ground:var(--critical-tint);
  --status-high:var(--high-500);
  --status-high-ground:var(--high-tint);
  --status-medium:var(--warning-500);
  --status-medium-ground:var(--warning-tint);
  --status-low:var(--info-500);
  --status-low-ground:var(--info-tint);
  --status-info:var(--info-500);
  --status-info-ground:var(--info-tint);
  --status-success:var(--success-500);
  --status-success-ground:var(--success-tint);
  --status-neutral:var(--grey-500);
  --status-neutral-ground:rgba(255,255,255,0.06); /* @kind color */

  /* Charts — ordered series colours for platform dashboards */
  --chart-1:var(--penx-red);
  --chart-2:var(--penx-orange);
  --chart-3:var(--warning-500);
  --chart-4:var(--success-500);
  --chart-5:var(--info-500);
  --chart-6:var(--grey-500);
  --chart-grid:var(--grey-800);
}

/* ── Type ───────────────────────────────────────────────────────────────────────
   Two families, two weights. Display type is DM Sans Medium at 1.1 leading and
   -3% tracking — the system's strongest signature. Body is DM Sans Regular at
   1.6. Every label, button and kicker is DM Mono, uppercase, wide-tracked.
   ────────────────────────────────────────────────────────────────────────────── */
:root{
  --font-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --weight-regular:400;
  --weight-medium:500;

  --tracking-display:-0.03em;   /* 40px and up */
  --tracking-heading:-0.02em;   /* 24–32px */
  --tracking-heading-sm:-0.01em;/* 18–20px */
  --tracking-mono:0.16em;
  --tracking-mono-tight:0.1em;
  --leading-display:1.1;
  --leading-body:1.6;
  --leading-tight:1.2;

  /* Display — DM Sans Medium, -3%, 1.1 (display-xl at 1.0) */
  --text-display-xl:96px;
  --text-display-lg:72px;
  --text-display-md:56px;
  --text-h1:48px;
  --text-h2:40px;
  --text-h3:32px;
  --text-h4:24px;
  --text-h5:20px;
  --text-h6:18px;

  /* Body — DM Sans Regular, 1.6, no tracking */
  --text-body-xl:20px;
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-body-xs:13px;

  /* Mono — uppercase. lg/md use 0.16em, button uses 0.1em */
  --text-mono-lg:14px;
  --text-mono-md:12px;
  --text-mono-sm:10px;
  --text-mono-xs:8px;
}

/* ── Spacing ────────────────────────────────────────────────────────────────────
   A regular 4px-based ramp. The source file's spacing was ad hoc (9, 22, 23, 29,
   39); those values are deliberately not carried forward.
   ────────────────────────────────────────────────────────────────────────────── */
:root{
  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;
  --space-15:160px;

  /* Layout */
  --layout-max:1440px;
  --layout-content:1216px;
  --layout-gutter:112px;
  --layout-gutter-sm:24px;
  --layout-nav-height:70px;
  --layout-sidebar:248px;
  --layout-topbar:56px;
  --section-gap:128px;
}

:root{
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:24px;
  --radius-pill:9999px;
}

/* ── Rings, elevation, motion ───────────────────────────────────────────────────
   Borders are drawn as inset rings so they never change an element's box.
   Flat surfaces carry no shadow; only overlays that leave the page plane do.
   ────────────────────────────────────────────────────────────────────────────── */
:root{
  --ring-subtle:inset 0 0 0 1px var(--border-subtle);
  --ring-default:inset 0 0 0 1px var(--border-default);
  --ring-strong:inset 0 0 0 1px var(--border-strong);
  --ring-white:inset 0 0 0 1px var(--border-on-dark);
  --ring-focus:0 0 0 2px rgba(255,50,50,0.4);
  --hairline:1px; /* @kind spacing */

  --elevation-0:none;
  --elevation-1:0 1px 2px rgba(0,0,0,0.6);
  --elevation-2:0 4px 12px rgba(0,0,0,0.6);
  --elevation-3:0 12px 32px rgba(0,0,0,0.7);

  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-out:cubic-bezier(0.2,0.7,0.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */

  --opacity-hover:0.85; /* @kind other */
  --opacity-disabled:0.4; /* @kind other */
}