/* ============================================================
   MachAI Design System — Colors & Type
   ============================================================
   Aesthetic: industrial terminal, LIGHT-FIRST (dark mode secondary).
   Anduril / Shield AI gravity × modern AI-native clarity.
   Jet-red signature. Technical mono + geometric sans.
   Sharp corners, thin rules, high contrast, zero clutter.
   ============================================================ */

/* Fonts — brand JetBrains Mono (local, licensed files in /fonts).
   Space Grotesk remains on Google Fonts until a licensed version is provided.
   Display / UI : Space Grotesk   (geometric, confident, modern)
   Technical    : JetBrains Mono  (readouts, codes, eyebrows, serial numbers) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* JetBrains Mono — full weight set, upright + italic, brand-licensed */
@font-face{font-family:'JetBrains Mono';font-weight:100;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Thin.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:100;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-ThinItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:200;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-ExtraLight.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:200;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Light.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:300;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-LightItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Regular.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-Italic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Medium.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-MediumItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:600;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Bold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:800;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype')}

/* JetBrains Mono NL — “No Ligatures” variant for readouts where f-i, >=, != etc.
   must not ligate (tables, logs, tail numbers). Use via font-family:'JetBrains Mono NL' */
@font-face{font-family:'JetBrains Mono NL';font-weight:100;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Thin.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:100;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-ThinItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:200;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-ExtraLight.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:200;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-ExtraLightItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Light.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:300;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-LightItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Regular.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Italic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Medium.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:500;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-MediumItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-SemiBold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:600;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-SemiBoldItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-Bold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:700;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-BoldItalic.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMonoNL-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono NL';font-weight:800;font-style:italic;font-display:swap;src:url('../fonts/JetBrainsMonoNL-ExtraBoldItalic.ttf') format('truetype')}

:root {
  /* ── Neutrals · light (titanium / paper) ──────────────── */
  --paper-000: #FFFFFF;
  --paper-050: #FAFAF7;   /* page — warm paper, not cold white */
  --paper-100: #F3F3EE;   /* surface-1 */
  --paper-200: #E9E9E2;   /* surface-2 / rule-soft */
  --paper-300: #D7D7CE;   /* divider */
  --paper-400: #B6B6AB;   /* border default */
  --paper-500: #8A8A7E;   /* text tertiary */
  --paper-600: #5D5D54;   /* text secondary */
  --paper-700: #3A3A34;   /* text body */
  --paper-800: #1E1E1B;   /* text primary / near-black */
  --paper-900: #0A0A09;   /* headings / max contrast */

  /* ── Neutrals · dark (engineered steel) ───────────────── */
  --steel-000: #000000;
  --steel-050: #08090B;
  --steel-100: #0E1014;
  --steel-200: #14171C;
  --steel-300: #1C2027;
  --steel-400: #262B33;
  --steel-500: #3A414C;
  --steel-600: #5B6573;
  --steel-700: #8B95A3;
  --steel-800: #C3C9D2;
  --steel-900: #EDEFF2;
  --steel-999: #FFFFFF;

  /* ── Signature · Jet Red ──────────────────────────────── */
  --jet-050: #FFF1EE;
  --jet-100: #FFD9CF;
  --jet-300: #FF8A6A;
  --jet-500: #FF5A2C;   /* PRIMARY */
  --jet-600: #C63000;
  --jet-700: #9C2600;
  --jet-900: #421000;

  /* ── Instrumentation accents (used sparingly) ─────────── */
  --hud-500: #0066FF;   /* links / info / plot lines */
  --ok-500:  #1F9D55;
  --warn-500:#C98A00;
  --fault-500: var(--jet-500);

  /* ── Semantic tokens — LIGHT (default) ────────────────── */
  --bg-page:      var(--paper-050);
  --bg-surface:   var(--paper-000);
  --bg-raised:    var(--paper-000);
  --bg-sunken:    var(--paper-100);
  --bg-inverse:   var(--paper-900);

  --fg-primary:   var(--paper-900);
  --fg-secondary: var(--paper-700);
  --fg-tertiary:  var(--paper-500);
  --fg-disabled:  var(--paper-400);
  --fg-inverse:   var(--paper-050);
  --fg-accent:    var(--jet-500);
  --fg-link:      var(--paper-900);

  --border-subtle:  var(--paper-200);
  --border-default: var(--paper-300);
  --border-strong:  var(--paper-500);
  --border-ink:     var(--paper-900);
  --border-accent:  var(--jet-500);

  --focus-ring: var(--jet-500);

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans:    'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Space Grotesk', system-ui, sans-serif;

  --t-xs: 11px;  --t-sm: 13px; --t-base: 15px; --t-md: 17px;
  --t-lg: 20px;  --t-xl: 24px; --t-2xl: 32px;  --t-3xl: 44px;
  --t-4xl: 60px; --t-5xl: 84px; --t-6xl: 120px;

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.65;

  --tr-tightest: -0.04em;
  --tr-tight:    -0.02em;
  --tr-normal:    0em;
  --tr-wide:      0.04em;
  --tr-widest:    0.16em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Radii (mostly sharp) ─────────────────────────────── */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-full: 999px;

  /* ── Borders ──────────────────────────────────────────── */
  --bw-hair: 1px; --bw-rule: 1px; --bw-heavy: 2px;

  /* ── Elevation — prefer rules over shadow ─────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--paper-200), 0 1px 2px rgba(10,10,9,.04);
  --shadow-2: 0 1px 0 0 var(--paper-300), 0 12px 32px -12px rgba(10,10,9,.12);
  --shadow-glow-accent: 0 0 0 1px var(--jet-500), 0 0 24px -6px var(--jet-500);

  /* ── Motion — restrained ──────────────────────────────── */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1440px;
  --content-max: 1200px;
  --reading-max: 68ch;
  --gutter: 24px;
  --grid-cols: 12;
}

/* ── Dark mode — opt-in via .mach-dark on any scope ─────── */
.mach-dark {
  --bg-page:      var(--steel-050);
  --bg-surface:   var(--steel-100);
  --bg-raised:    var(--steel-200);
  --bg-sunken:    var(--steel-000);
  --bg-inverse:   var(--paper-050);

  --fg-primary:   var(--steel-900);
  --fg-secondary: var(--steel-800);
  --fg-tertiary:  var(--steel-700);
  --fg-disabled:  var(--steel-500);
  --fg-inverse:   var(--paper-900);
  --fg-accent:    var(--jet-500);
  --fg-link:      var(--steel-900);

  --border-subtle:  var(--steel-400);
  --border-default: var(--steel-500);
  --border-strong:  var(--steel-700);
  --border-ink:     var(--steel-900);
  --border-accent:  var(--jet-500);

  --shadow-1: 0 1px 0 0 var(--steel-400), 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 0 var(--steel-400), 0 12px 32px -12px rgba(0,0,0,.6);
}

/* ============================================================
   Semantic type recipes
   ============================================================ */

.mach-display, .mach-h1, .mach-h2, .mach-h3, .mach-h4,
.mach-body, .mach-small, .mach-eyebrow, .mach-code,
.mach-label, .mach-readout {
  font-family: var(--font-sans);
  color: var(--fg-primary);
}

.mach-display {
  font-size: var(--t-5xl); line-height: var(--lh-tight);
  letter-spacing: var(--tr-tightest); font-weight: var(--w-bold);
  text-wrap: balance;
}
.mach-h1 {
  font-size: var(--t-4xl); line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight); font-weight: var(--w-bold);
  text-wrap: balance;
}
.mach-h2 {
  font-size: var(--t-3xl); line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight); font-weight: var(--w-semibold);
  text-wrap: balance;
}
.mach-h3 {
  font-size: var(--t-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight); font-weight: var(--w-semibold);
}
.mach-h4 {
  font-size: var(--t-xl); line-height: var(--lh-snug); font-weight: var(--w-semibold);
}
.mach-body {
  font-size: var(--t-base); line-height: var(--lh-normal);
  font-weight: var(--w-regular); color: var(--fg-secondary);
  text-wrap: pretty;
}
.mach-small {
  font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-tertiary);
}
.mach-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--w-medium);
  letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg-accent);
}
.mach-label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--w-medium);
  letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg-tertiary);
}
.mach-code, .mach-readout {
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: var(--w-medium);
  color: var(--fg-primary); font-variant-numeric: tabular-nums;
}
.mach-readout { color: var(--fg-accent); }

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

.mach-scope {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mach-scope * { box-sizing: border-box; }
.mach-scope a {
  color: var(--fg-link); text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
.mach-scope a:hover { color: var(--fg-accent); }
.mach-scope ::selection { background: var(--jet-500); color: #fff; }


/* ============================================================
 * Canonical wordmark — terminal style, matched to brand reference
 * HTML: <span class="wordmark"><span class="prompt">&gt;</span> mach<svg class="plane" viewBox="0 0 14 15"><use href="#plane"/></svg>ai<span class="caret"></span></span>
 * ============================================================ */
.wordmark{font-family:var(--font-mono);font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--fg-primary);display:inline-flex;align-items:baseline;white-space:nowrap}
.wordmark .prompt{color:var(--accent-rust,#FF5A2C);margin-right:.4em}
.wordmark .plane{display:inline-block;width:.93em;height:.93em;fill:currentColor;margin:0 .06em 0 .02em;transform:translateY(-.02em);flex:none;box-sizing:border-box}
.wordmark .plane svg,.wordmark>svg.plane{overflow:visible}
.wordmark .caret{display:inline-block;width:.12em;height:.93em;background:var(--accent-rust,#FF5A2C);margin-left:.2em;transform:translateY(.1em);animation:wm-blink 1.05s steps(2,end) infinite}
.wordmark.static .caret{display:none}
@keyframes wm-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}