/* Pecorva type system: Tanker (all-caps poster display, Fontshare ITF FFL) + Switzer
   (UI/body, Fontshare ITF FFL) + Azeret Mono (telemetry, OFL). Display rules in each variant
   set text-transform: uppercase and font-synthesis: none (Tanker has one upright weight). */
@font-face {
  font-family: "Tanker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shared/fonts/tanker-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shared/fonts/switzer-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/shared/fonts/switzer-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/shared/fonts/switzer-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/switzer-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Azeret Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shared/fonts/azeret-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root,
[data-theme="dark"],
.theme-dark {
  color-scheme: dark;

  --bg-canvas: #0c0b09;
  --bg-surface: #14120f;
  --bg-elevated: #1c1915;
  --bg-subtle: #25211b;
  --bg-hover: #2e2922;
  --bg-glass: rgba(20, 18, 15, 0.82);
  --bg-scrim: rgba(12, 11, 9, 0.72);

  --text-primary: #f4efe6;
  --text-secondary: #b8b0a2;
  --text-muted: #7a7265;
  --text-inverse: #0c0b09;

  --accent-primary: #e09145;
  --accent-primary-hover: #eca258;
  --accent-primary-subtle: rgba(224, 145, 69, 0.14);
  --accent-primary-border: rgba(224, 145, 69, 0.38);

  --accent-secondary: #6ba38b;
  --accent-secondary-subtle: rgba(107, 163, 139, 0.14);
  --accent-secondary-border: rgba(107, 163, 139, 0.36);

  --border-hairline: rgba(244, 239, 230, 0.08);
  --border-subtle: rgba(244, 239, 230, 0.14);
  --border-strong: rgba(244, 239, 230, 0.28);
  --border-focus: #e09145;

  --status-nominal: #47b881;
  --status-nominal-bg: rgba(71, 184, 129, 0.14);
  --status-nominal-border: rgba(71, 184, 129, 0.36);

  --status-watch: #e5a93c;
  --status-watch-bg: rgba(229, 169, 60, 0.15);
  --status-watch-border: rgba(229, 169, 60, 0.38);

  --status-alert: #e5564b;
  --status-alert-bg: rgba(229, 86, 75, 0.16);
  --status-alert-border: rgba(229, 86, 75, 0.40);

  --status-info: #5ca3e6;
  --status-info-bg: rgba(92, 163, 230, 0.14);
  --status-info-border: rgba(92, 163, 230, 0.36);

  --kp-midline: #5ee678;
  --kp-left: #ffaa3c;
  --kp-right: #2896ff;
  --kp-dot-casing: #100d0b;
  --kp-dot-radius: 4.5px;
  --kp-dot-halo-radius: 6.5px;
  --kp-line-weight: 2px;
  --kp-line-alpha: 0.86;
  --kp-box-weight: 1.5px;
  --kp-bracket-weight: 2.2px;
  --kp-bracket-length: 10px;
  --kp-tag-radius: 4px;
  --kp-tag-bg: rgba(24, 20, 15, 0.90);
  --kp-tag-text: #f4efe6;
  --kp-tag-border: rgba(224, 145, 69, 0.55);

  --kp-id-0427: #e89b48;
  --kp-id-0427-bg: rgba(84, 48, 12, 0.88);
  --kp-id-0114: #4ac99b;
  --kp-id-0114-bg: rgba(14, 68, 48, 0.88);
  --kp-id-0892: #5da8f7;
  --kp-id-0892-bg: rgba(16, 48, 86, 0.88);
  --kp-id-0305: #f06459;
  --kp-id-0305-bg: rgba(88, 22, 18, 0.88);

  --font-display: "Tanker", Impact, "Arial Narrow Bold", sans-serif;
  --font-sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, monospace;

  --text-hero: clamp(3.25rem, 6.2vw, 6.25rem);
  --text-h1: clamp(2.35rem, 4.2vw, 4.25rem);
  --text-h2: clamp(1.75rem, 2.8vw, 2.75rem);
  --text-h3: clamp(1.25rem, 1.8vw, 1.625rem);
  --text-h4: clamp(1.0625rem, 1.3vw, 1.25rem);
  --text-lg: clamp(1.0625rem, 1.15vw, 1.225rem);
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-2xs: 0.6875rem;

  --leading-tight: 0.96;
  --leading-heading: 1.06;
  --leading-snug: 1.24;
  --leading-body: 1.6;
  --leading-mono: 1.4;

  --tracking-display: 0.005em;
  --tracking-heading: -0.01em;
  --tracking-body: -0.005em;
  --tracking-mono: 0.02em;
  --tracking-eyebrow: 0.08em;

  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1360px;
  --container-wide: 1440px;
  --container-narrow: 880px;
  --grid-gap: var(--space-6);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.58);
  --shadow-inset: inset 0 1px 0 rgba(244, 239, 230, 0.07);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-optical-lock: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear: linear;

  --duration-micro: 140ms;
  --duration-fast: 260ms;
  --duration-base: 480ms;
  --duration-cinematic: 900ms;
  --stagger-kp: 18ms;
}

[data-theme="light"],
.theme-light {
  color-scheme: light;

  --bg-canvas: #f6f2ea;
  --bg-surface: #efe9dc;
  --bg-elevated: #faf7f2;
  --bg-subtle: #e5dec9;
  --bg-hover: #dbd2b8;
  --bg-glass: rgba(246, 242, 234, 0.86);
  --bg-scrim: rgba(22, 20, 17, 0.48);

  --text-primary: #161411;
  --text-secondary: #4a443b;
  --text-muted: #7d7568;
  --text-inverse: #faf7f2;

  --accent-primary: #b8641b;
  --accent-primary-hover: #9e5212;
  --accent-primary-subtle: rgba(184, 100, 27, 0.11);
  --accent-primary-border: rgba(184, 100, 27, 0.34);

  --accent-secondary: #2e6b56;
  --accent-secondary-subtle: rgba(46, 107, 86, 0.11);
  --accent-secondary-border: rgba(46, 107, 86, 0.32);

  --border-hairline: rgba(22, 20, 17, 0.09);
  --border-subtle: rgba(22, 20, 17, 0.16);
  --border-strong: rgba(22, 20, 17, 0.34);
  --border-focus: #b8641b;

  --status-nominal: #237b52;
  --status-nominal-bg: rgba(35, 123, 82, 0.11);
  --status-nominal-border: rgba(35, 123, 82, 0.32);

  --status-watch: #b87814;
  --status-watch-bg: rgba(184, 120, 20, 0.12);
  --status-watch-border: rgba(184, 120, 20, 0.34);

  --status-alert: #c4382f;
  --status-alert-bg: rgba(196, 56, 47, 0.12);
  --status-alert-border: rgba(196, 56, 47, 0.35);

  --status-info: #2568a8;
  --status-info-bg: rgba(37, 104, 168, 0.11);
  --status-info-border: rgba(37, 104, 168, 0.32);

  --kp-midline: #1e8e4e;
  --kp-left: #d97706;
  --kp-right: #1e70c8;
  --kp-dot-casing: #faf7f2;
  --kp-tag-bg: rgba(22, 20, 17, 0.92);
  --kp-tag-text: #faf7f2;
  --kp-tag-border: rgba(184, 100, 27, 0.55);

  --shadow-sm: 0 2px 8px rgba(22, 20, 17, 0.06);
  --shadow-md: 0 10px 28px rgba(22, 20, 17, 0.10);
  --shadow-lg: 0 20px 48px rgba(22, 20, 17, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 100ms;
    --duration-fast: 140ms;
    --duration-base: 180ms;
    --duration-cinematic: 200ms;
    --stagger-kp: 0ms;
  }
}

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

html {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

.kp-id-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 3px var(--space-2);
  border-radius: var(--kp-tag-radius);
  background: var(--kp-tag-bg);
  color: var(--kp-tag-text);
  border: 1px solid var(--kp-tag-border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
}

.kp-id-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--status-nominal);
  flex-shrink: 0;
}

.kp-bone {
  stroke-width: var(--kp-line-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--kp-line-alpha);
  fill: none;
}

.kp-bone--midline {
  stroke: var(--kp-midline);
}

.kp-bone--left {
  stroke: var(--kp-left);
}

.kp-bone--right {
  stroke: var(--kp-right);
}

.kp-node-halo {
  fill: var(--kp-dot-casing);
}

.kp-node-core--midline {
  fill: var(--kp-midline);
}

.kp-node-core--left {
  fill: var(--kp-left);
}

.kp-node-core--right {
  fill: var(--kp-right);
}