/* Signal design system — 2.0 · AI Protection brand edition · 7 September 2026
 * Layout tokens: Signal (observed). Color tokens: AI Protection brand (canonical).
 * Drop-in: link this file, then build with var(--…). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&family=Schibsted+Grotesk:wght@800&display=swap');

:root{
  /* — primitives — */
  --color-paper:#f0f1f3; /* Page background (cool gray) [brand] */
  --color-paper-2:#ffffff; /* Surfaces, cards, nav, alternating sections [brand] */
  --color-ink:#0e1116; /* Primary text, structural 2px rules, inverse surfaces [brand] */
  --color-ink-2:#49505f; /* Body / muted text [brand] */
  --color-cobalt:#3664ef; /* Brand blue — buttons, fills, logo [brand] · locked Julian 2026-09-08 */
  --color-cobalt-ink:#1f53e6; /* Hover / pressed; links and small blue text (AA-safe) [brand] */
  --color-cobalt-electric:#3d5afe; /* Focus ring, electric accent [brand] */
  --color-cobalt-soft:#e8effe; /* Soft blue tint panels, incident bars, selected rows [brand] */
  --color-hair:#d3d8e2; /* Hairline dividers, input borders at rest [recommended] */
  --color-signal:#e23b3b; /* Alert red — risk, exposure, danger, errors [brand] */
  --color-signal-soft:#fdecec; /* Soft red tint for alert rows and callouts [recommended] */
  --color-success:#0f7d4e; /* Success / resolved states [recommended] */

  /* — semantic — */
  --color-surface-page:var(--color-paper);
  --color-surface-alt:var(--color-paper-2);
  --color-surface-inverse:var(--color-ink);
  --color-surface-tint:var(--color-cobalt-soft);
  --color-surface-alert:var(--color-signal-soft);
  --color-action-primary:var(--color-cobalt);
  --color-action-hover:var(--color-cobalt-ink);
  --color-action-focus:var(--color-cobalt-electric);
  --color-link:var(--color-cobalt-ink);
  --color-text-primary:var(--color-ink);
  --color-text-muted:var(--color-ink-2);
  --color-text-on-inverse:var(--color-paper-2);
  --color-text-on-action:var(--color-paper-2);
  --color-border-structural:var(--color-ink);
  --color-border-hair:var(--color-hair);
  --color-feedback-success:var(--color-success);
  --color-feedback-warning:var(--color-signal);
  --color-feedback-danger:var(--color-signal);
  --color-feedback-info:var(--color-cobalt-ink);

  /* — type — */
  --font-display:'Space Grotesk','Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,Menlo,monospace;
  --font-wordmark:'Schibsted Grotesk','Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --text-display-hero:clamp(2.7rem,7vw,6.2rem); --weight-display-hero:700; --leading-display-hero:0.98; --tracking-display-hero:-0.03em;
  --text-heading-xl:clamp(2rem,4.5vw,3.6rem); --weight-heading-xl:700; --leading-heading-xl:1.02; --tracking-heading-xl:-0.02em;
  --text-heading-lg:1.2rem; --weight-heading-lg:700; --leading-heading-lg:1.25; --tracking-heading-lg:-0.01em;
  --text-metric:2.6rem; --weight-metric:700; --leading-metric:1.0; --tracking-metric:-0.02em;
  --text-body:1.0625rem; --weight-body:400; --leading-body:1.55; --tracking-body:0;
  --text-small:0.9rem; --weight-small:400; --leading-small:1.5; --tracking-small:0;
  --text-kicker:0.75rem; --weight-kicker:500; --leading-kicker:1.2; --tracking-kicker:0.12em;
  --text-caption:0.75rem; --weight-caption:400; --leading-caption:1.4; --tracking-caption:0.02em;

  /* — space (4px base) — */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-11:44px; --space-14:56px; --space-22:90px;

  /* — layout & shape — */
  --maxw:1240px;
  --gutter:28px;
  --nav-h:72px;
  --radius-none:0;
  --rule:2px;
  --hair:1px;

  /* — hard offset shadows (no blur, ever) — */
  --shadow-offset-ink:5px 5px 0 var(--color-ink);
  --shadow-offset-cobalt:5px 5px 0 var(--color-cobalt);
  --shadow-offset-signal:5px 5px 0 var(--color-signal);
  --shadow-offset-paper:5px 5px 0 var(--color-paper-2);

  /* — breakpoints (reference only; use in media queries) — */
  --bp-sm:640px;
  --bp-md:900px;
  --bp-lg:1240px;
}