/* subsystems design system tokens — copied from the Salon redesign handoff (_ds/.../colors_and_type.css).
   Fonts are loaded from index.html. Fraunces stands in for GT Sectra, Inter Tight for Söhne. */


:root {
  /* ============================================================
     COLOR — RAW TOKENS
     ============================================================ */

  /* Cream (soft warm white — the primary surface) */
  --cream-50:  #FFFEFB;
  --cream-100: #FBFAF5;   /* primary bg */
  --cream-200: #F4F2EA;
  --cream-300: #E8E5D8;
  --cream-400: #CFCBB9;

  /* Ink (black stack — type, rules, frames) */
  --ink-900: #0A0A09;     /* primary fg */
  --ink-800: #16140F;
  --ink-700: #262320;
  --ink-600: #3A3631;
  --ink-500: #5A544C;
  --ink-400: #8A8378;
  --ink-300: #B5AFA2;
  --ink-200: #D9D3C4;

  /* Signal Red — primary accent (neon tone per brief) */
  --red-500: #FF2D1F;     /* primary */
  --red-600: #E61E10;
  --red-700: #B8160B;
  --red-400: #FF5A4E;
  --red-100: #FFE2DE;

  /* Neon Lime — positive / pass / healthy */
  --lime-500: #C6FF2E;
  --lime-600: #A8E600;
  --lime-300: #DCFF7A;
  --lime-100: #F0FFC8;

  /* Neon Cyan — info / active / scanning */
  --cyan-500: #00E5FF;
  --cyan-600: #00B8CC;
  --cyan-300: #7AEEFF;
  --cyan-100: #C8F7FF;

  /* Amber — caution (report-grade, not neon) */
  --amber-500: #E8A317;
  --amber-100: #FBE9B8;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --bg:              var(--cream-100);
  --bg-elevated:     var(--cream-50);
  --bg-sunken:       var(--cream-200);
  --bg-inverse:      var(--ink-900);
  --bg-accent:       var(--red-500);

  --fg:              var(--ink-900);
  --fg-muted:        var(--ink-500);
  --fg-subtle:       var(--ink-400);
  --fg-inverse:      var(--cream-50);
  --fg-accent:       var(--red-600);
  --fg-link:         var(--ink-900);

  --border:          var(--ink-900);          /* brutalist: borders are BLACK and HEAVY */
  --border-subtle:   var(--ink-300);
  --border-hairline: var(--ink-200);

  --signal-pass:     var(--lime-600);
  --signal-pass-bg:  var(--lime-100);
  --signal-warn:     var(--amber-500);
  --signal-warn-bg:  var(--amber-100);
  --signal-fail:     var(--red-600);
  --signal-fail-bg:  var(--red-100);
  --signal-info:     var(--cyan-600);
  --signal-info-bg:  var(--cyan-100);

  /* Knowledge-graph node palette (for data viz) */
  --node-primary:    var(--ink-900);
  --node-risk:       var(--red-500);
  --node-healthy:    var(--lime-500);
  --node-data:       var(--cyan-500);
  --node-inactive:   var(--ink-300);

  /* ============================================================
     TYPE — RAW FAMILIES
     ============================================================ */
  --font-display: 'Fraunces', 'GT Sectra', 'Times New Roman', serif;
  --font-body:    'Inter Tight', 'Söhne', 'Neue Haas Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale (modular, 1.25) */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 34px;
  --text-3xl: 46px;
  --text-4xl: 62px;
  --text-5xl: 84px;
  --text-6xl: 112px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  --tracking-tight:  -0.03em;
  --tracking-normal: -0.005em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* ALL-CAPS mono labels */

  /* ============================================================
     SPACING / RADIUS / BORDER / SHADOW
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii — brutalist: mostly 0, occasionally 2-4px */
  --radius-0:   0;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-pill: 999px;        /* used sparingly, for status pills only */

  /* Borders — thick, black, confident */
  --border-hair: 1px solid var(--ink-900);
  --border-thin: 1.5px solid var(--ink-900);
  --border-std:  2px solid var(--ink-900);
  --border-bold: 3px solid var(--ink-900);
  --border-heavy:4px solid var(--ink-900);

  /* Shadows — hard offset (brutalist), no blur */
  --shadow-hard-sm: 3px 3px 0 0 var(--ink-900);
  --shadow-hard-md: 6px 6px 0 0 var(--ink-900);
  --shadow-hard-lg: 10px 10px 0 0 var(--ink-900);
  --shadow-hard-red: 6px 6px 0 0 var(--red-500);
  --shadow-hard-lime: 6px 6px 0 0 var(--lime-500);

  /* Inner — used on pressed states */
  --shadow-inset-sm: inset 0 2px 0 0 rgba(10,10,9,0.12);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-snap:   cubic-bezier(0.4, 0, 0, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-std:     200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Display / Headings --- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 120, "SOFT" 0;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}
h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: 600;
}
h4, .h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
  color: var(--fg-muted);
}

/* --- Body --- */
p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  text-wrap: pretty;
  max-width: 68ch;
}
.p-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.p-small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* --- Utility type --- */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
  color: var(--fg-muted);
}
.caption {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-muted);
}
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "calt" 0;
}
code {
  background: var(--cream-200);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
pre {
  background: var(--ink-900);
  color: var(--cream-50);
  padding: var(--space-4);
  border: var(--border-std);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; }

hr {
  border: 0;
  border-top: var(--border-std);
  margin: var(--space-6) 0;
}

/* --- Links --- */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--red-600); text-decoration-color: var(--red-500); }

/* --- Selection --- */
::selection { background: var(--red-500); color: var(--cream-50); }

/* --- Focus — visible and brutalist --- */
:focus-visible {
  outline: 3px solid var(--red-500);
  outline-offset: 2px;
}