/* =========================================================================
   Kaspix — portable brand stylesheet (light theme)
   Tokens + base + components. Self-contained; safe to inline or link.
   Fonts: Karla (brand sans) + IBM Plex Mono, via Google Fonts.
   For offline/embedded output, replace the @import with local @font-face
   pointing at fonts/Karla-*.ttf from the design-system repo.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand ---------- */
  --kx-red:            #870000;
  --kx-red-700:        #6E0000;
  --kx-red-500:        #A11414;
  --kx-red-200:        #E9C9C9;
  --kx-red-50:         #FBF1F1;

  /* ---------- Cool mineral neutrals ---------- */
  --kx-white:          #FFFFFF;
  --kx-cool-white:     #F7F8FA;
  --kx-mineral:        #F1F3F6;
  --kx-mist:           #E6EAF0;
  --kx-tech-gray:      #D5DBE3;
  --kx-steel:          #A7B0BC;
  --kx-graphite-300:   #5E6875;
  --kx-graphite-500:   #2F3742;
  --kx-graphite-700:   #1B2129;

  /* ---------- System accents (signals, not decoration) ---------- */
  --kx-signal-blue:    #4C7DFF;
  --kx-signal-blue-50: #EEF3FF;
  --kx-tech-cyan:      #39B8C8;
  --kx-tech-cyan-50:   #E8F8FA;

  --kx-status-ok:      #2E8F6B;
  --kx-status-warn:    #B5780B;
  --kx-status-err:     #870000;

  /* ---------- Semantic ---------- */
  --bg-page:           var(--kx-cool-white);
  --bg-surface:        var(--kx-white);
  --bg-surface-2:      var(--kx-mineral);
  --bg-inset:          var(--kx-mist);
  --surf-tinted-red:   var(--kx-red-50);

  --fg-primary:        var(--kx-graphite-500);
  --fg-secondary:      var(--kx-graphite-300);
  --fg-muted:          var(--kx-steel);
  --fg-display:        var(--kx-graphite-700);
  --fg-on-brand:       var(--kx-cool-white);
  --fg-brand:          var(--kx-red);

  --border-subtle:     var(--kx-mist);
  --border-default:    var(--kx-tech-gray);
  --border-strong:     var(--kx-steel);

  --accent-brand:      var(--kx-red);
  --accent-brand-hov:  var(--kx-red-500);
  --accent-system:     var(--kx-signal-blue);
  --accent-live:       var(--kx-tech-cyan);

  /* ---------- Type ---------- */
  --font-sans:    "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-h1:         40px;
  --fs-h2:         30px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  --lh-tight:   1.06;
  --lh-snug:    1.20;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-eyebrow:  0.14em;
  --tracking-mono:     0.01em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- Radii (never exceed --r-4) ---------- */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-pill: 999px;

  /* ---------- Elevation (flat, low-amplitude) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(31,41,55,0.04), 0 1px 2px rgba(31,41,55,0.04);
  --shadow-2: 0 1px 0 rgba(31,41,55,0.04), 0 6px 16px -8px rgba(31,41,55,0.10);
  --shadow-3: 0 2px 0 rgba(31,41,55,0.03), 0 18px 40px -16px rgba(31,41,55,0.16);
  --shadow-focus: 0 0 0 3px rgba(76,125,255,0.25);
  --shadow-focus-brand: 0 0 0 3px rgba(135,0,0,0.18);

  /* ---------- Motion (mechanical, no bounce) ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 0.6, 0.4);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: 24px;
  --grid-gutter:   24px;
}

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-4); line-height: var(--lh-relaxed); color: var(--fg-primary); max-width: 68ch; }
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); line-height: var(--lh-relaxed); }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--fg-muted); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}
code, kbd, samp { font-size: 0.92em; }
pre {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2);
  padding: var(--s-4);
  overflow-x: auto;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
:not(pre) > code {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-1);
  padding: 1px 5px;
}

a {
  color: var(--kx-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-6) 0; }

blockquote {
  margin: var(--s-6) 0;
  padding: 0 0 0 var(--s-5);
  border-left: 2px solid var(--kx-red);
  color: var(--fg-display);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

img, svg, video { max-width: 100%; height: auto; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-1); }
::selection { background: rgba(135,0,0,0.16); color: var(--fg-display); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================================
   Layout
   ========================================================================= */

.kx-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.kx-container--narrow { max-width: 820px; }

.kx-section { padding: var(--s-24) 0; }
.kx-section--tight    { padding: var(--s-16) 0; }
.kx-section--mineral  { background: var(--kx-mineral); }
.kx-section--tinted   { background: var(--surf-tinted-red); }
.kx-section--bordered { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }

/* Section head: mono counter + rule, then sentence-case title */
.kx-section__counter {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-secondary);
}
.kx-section__counter::before { content: ""; width: 18px; height: 1px; background: var(--kx-red); }
.kx-section__title { font-size: var(--fs-h2); margin-top: var(--s-3); }

.kx-grid { display: grid; gap: var(--grid-gutter); }
.kx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kx-grid--3, .kx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kx-grid--2, .kx-grid--3, .kx-grid--4 { grid-template-columns: 1fr; } }

/* Background motifs — the only ones allowed */
.kx-dots {
  background-image: radial-gradient(var(--kx-mist) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Figures — inline SVG diagrams. Zeroes the browser's default 40px figure
   margin, which otherwise indents every diagram out of the text column. */
.kx-figure { margin: 0; }
.kx-figure svg { display: block; width: 100%; height: auto; }
.kx-figure figcaption {
  margin-top: var(--s-3); font-size: var(--fs-body-sm); line-height: var(--lh-base);
  color: var(--fg-secondary); max-width: 92ch;
}

.kx-rules {
  background-image: linear-gradient(to bottom, var(--kx-mist) 1px, transparent 1px);
  background-size: 100% 32px;
}

/* =========================================================================
   Type utilities
   ========================================================================= */

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-display); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-display); }
.lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-secondary); max-width: 62ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-secondary);
}
.eyebrow--brand { color: var(--kx-red); }

.mono        { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.mono--muted { color: var(--fg-secondary); }
.mono--num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-display); }
.mono--num small { font-size: 0.7em; font-weight: 400; color: var(--fg-secondary); }

.kx-accent { color: var(--kx-red); }
.fg-secondary { color: var(--fg-secondary); }
.fg-muted { color: var(--fg-muted); }

/* Mono-labelled divider: <div class="tech-rule">03 / substrate</div> */
.tech-rule {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-secondary);
}
.tech-rule::before, .tech-rule::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.tech-rule--start::before { display: none; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.2;
  padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 13px 24px; font-size: 15px; }

.btn--primary { background: var(--kx-red); color: #fff; }
.btn--primary:hover  { background: var(--kx-red-500); }
.btn--primary:active { background: var(--kx-red-700); }
.btn--primary[disabled], .btn--primary.is-disabled { background: #D3B5B5; cursor: not-allowed; transform: none; }

.btn--secondary { background: var(--bg-surface); color: var(--fg-display); border-color: var(--border-default); }
.btn--secondary:hover { border-color: var(--border-strong); }

.btn--ghost { background: transparent; color: var(--fg-display); border-color: transparent; }
.btn--ghost:hover { border-color: var(--border-default); }

.btn--on-red { background: #fff; color: var(--kx-red); }
.btn--ghost-on-red { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
.btn--ghost-on-red:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.55); }

.btn .mono { font-family: var(--font-mono); }

/* =========================================================================
   Pills / status chips  —  UPPERCASE MONO ONLY
   ========================================================================= */

.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  padding: 4px 10px;
  border: 1px solid var(--border-default); border-radius: var(--r-pill);
  background: var(--bg-surface-2); color: var(--fg-display);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill--live   { background: var(--kx-tech-cyan-50); color: #1F8590; border-color: rgba(57,184,200,0.35); }
.pill--live .dot { background: var(--kx-tech-cyan); box-shadow: 0 0 0 3px rgba(57,184,200,0.18); animation: kx-pulse 1.6s ease-in-out infinite; }
.pill--brand  { background: var(--surf-tinted-red); color: var(--kx-red); border-color: rgba(135,0,0,0.25); }
.pill--brand .dot { background: var(--kx-red); }
.pill--ok     { background: rgba(46,143,107,0.08); color: var(--kx-status-ok); border-color: rgba(46,143,107,0.30); }
.pill--warn   { background: rgba(181,120,11,0.08); color: var(--kx-status-warn); border-color: rgba(181,120,11,0.30); }
.pill--system { background: var(--kx-signal-blue-50); color: var(--kx-signal-blue); border-color: rgba(76,125,255,0.30); }

@keyframes kx-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* =========================================================================
   Cards — white surface, 1px border, no shadow at rest
   ========================================================================= */

.kx-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2);
  padding: var(--s-6);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.kx-card:hover { border-color: var(--border-strong); }   /* no lift, no scale */

/* Single-side red accent rule — at most ONE card per view */
.kx-card--accent { border-top: 2px solid var(--kx-red); border-radius: 0 0 var(--r-2) var(--r-2); }

.kx-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.kx-card__title { font-size: var(--fs-h4); }
.kx-card__id { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }

/* Inset panel inside a white card */
.kx-inset { background: var(--bg-page); border: 1px solid var(--border-subtle); border-radius: var(--r-1); padding: var(--s-4); }

.kx-elev-1 { box-shadow: var(--shadow-1); }
.kx-elev-2 { box-shadow: var(--shadow-2); }
.kx-elev-3 { box-shadow: var(--shadow-3); }

/* =========================================================================
   Spec table — the house layout for any tabular data
   ========================================================================= */

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.spec-table caption {
  text-align: left; padding-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-secondary);
}
.spec-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-secondary);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.spec-table td { padding: var(--s-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-display); white-space: nowrap; }
.spec-table tbody tr:hover { background: var(--bg-page); }

/* Key/value spec list — vertical alternative to the table */
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-3) var(--s-6); font-size: var(--fs-body-sm); }
.spec-list dt { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-secondary); padding-top: 2px; }
.spec-list dd { margin: 0; color: var(--fg-display); }

/* Big stat */
.kx-stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h2); font-weight: 500; color: var(--fg-display); line-height: 1.1; }
.kx-stat__value .unit { font-size: 0.45em; color: var(--fg-secondary); margin-left: 4px; }
.kx-stat__label { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-secondary); }

/* =========================================================================
   Forms
   ========================================================================= */

.kx-field { display: flex; flex-direction: column; gap: var(--s-2); }
.kx-label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-secondary); }
.kx-input, .kx-select, .kx-textarea {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--r-1);
  padding: 9px 12px;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.kx-input::placeholder, .kx-textarea::placeholder { color: var(--fg-muted); }
.kx-input:hover, .kx-select:hover, .kx-textarea:hover { border-color: var(--border-strong); }
.kx-input:focus, .kx-select:focus, .kx-textarea:focus { outline: none; border-color: var(--kx-signal-blue); box-shadow: var(--shadow-focus); }
.kx-input[disabled] { background: var(--bg-surface-2); color: var(--fg-muted); cursor: not-allowed; }
.kx-help { font-size: var(--fs-caption); color: var(--fg-secondary); }
.kx-error { font-size: var(--fs-caption); color: var(--kx-status-err); font-family: var(--font-mono); }

/* =========================================================================
   Nav / footer scaffolding
   ========================================================================= */

.kx-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(8px);           /* the ONLY sanctioned blur */
  border-bottom: 1px solid var(--border-subtle);
}
.kx-nav__inner { display: flex; align-items: center; gap: var(--s-8); height: 60px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.kx-nav__links { display: flex; gap: var(--s-6); flex: 1; }
.kx-nav__links a { color: var(--fg-secondary); font-size: var(--fs-body-sm); border: 0; }
.kx-nav__links a:hover { color: var(--kx-red); }

.kx-footer { border-top: 1px solid var(--border-default); padding: var(--s-16) 0 var(--s-10); color: var(--fg-secondary); font-size: var(--fs-body-sm); }

/* Modal scrim — no blur */
.kx-scrim { position: fixed; inset: 0; background: rgba(31,41,55,0.40); }