/* ─────────────────────────────────────────────────────────────
   martzmakes — core tokens
   Dark-mode first. Import this file to inherit the whole system.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ─── Color scale: near-black with a cool shift ──────────────
     Hue 220, Chroma climbs slightly on warmer neutrals.
     Surfaces go from bg0 (deepest) → surface3 (highest layer). */
  --bg-0:        #07090C;   /* page background, deeper than surface */
  --bg-1:        #0B0E13;   /* default surface */
  --surface-1:   #11151C;   /* cards, panels */
  --surface-2:   #171C25;   /* raised cards, popovers */
  --surface-3:   #1E2430;   /* menus, modals */
  --surface-4:   #262D3B;   /* hover on surface-2, inputs */

  /* Hairlines — doing structural work, not decoration */
  --line-1:      rgba(255,255,255,0.06);  /* subtle dividers */
  --line-2:      rgba(255,255,255,0.10);  /* default borders */
  --line-3:      rgba(255,255,255,0.16);  /* emphasized borders */
  --line-strong: rgba(255,255,255,0.24);  /* focus rings, selected */

  /* Foregrounds */
  --fg-1:        #EEF1F6;   /* primary text */
  --fg-2:        #B8C0CC;   /* body / secondary */
  --fg-3:        #8892A0;   /* tertiary, captions */
  --fg-4:        #5D6674;   /* disabled, placeholder */
  --fg-5:        #3E4653;   /* muted, marks */

  /* ─── Accent: single electric blue, used sparingly ─────────── */
  --accent:       #3B82FF;  /* electric blue */
  --accent-hover: #5897FF;
  --accent-press: #2B6BE6;
  --accent-soft:  rgba(59,130,255,0.12);  /* tint fills */
  --accent-line:  rgba(59,130,255,0.32);  /* tinted borders */
  --accent-fg:    #BFD4FF;  /* accent text on dark */

  /* ─── Semantic ──────────────────────────────────────────────
     Kept desaturated to sit alongside the blue without competing. */
  --success:      #3DCF8E;
  --success-soft: rgba(61,207,142,0.12);
  --warn:         #E9B949;
  --warn-soft:    rgba(233,185,73,0.12);
  --danger:       #F26D6D;
  --danger-soft:  rgba(242,109,109,0.12);
  --info:         var(--accent);
  --info-soft:    var(--accent-soft);

  /* ─── Type ───────────────────────────────────────────────── */
  --font-sans: 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Size ramp — geometric, tuned for dense technical UIs */
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-28: 28px;  --lh-28: 36px;
  --fs-34: 34px;  --lh-34: 40px;
  --fs-44: 44px;  --lh-44: 48px;
  --fs-56: 56px;  --lh-56: 60px;
  --fs-72: 72px;  --lh-72: 76px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Tracking — slightly tighter at display sizes */
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:   0;
  --tr-wide:    0.02em;
  --tr-mono:    0;       /* JetBrains mono stays neutral */
  --tr-ucase:   0.08em;  /* for SMALL CAPS labels */

  /* ─── Spacing (4px grid) ─────────────────────────────────── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─── Radii — moderate, not squishy ──────────────────────── */
  --rad-1:  4px;   /* buttons, chips */
  --rad-2:  6px;   /* inputs, small cards */
  --rad-3:  8px;   /* cards */
  --rad-4:  10px;  /* large panels */
  --rad-5:  14px;  /* hero surfaces */
  --rad-full: 999px;

  /* ─── Elevation ───────────────────────────────────────────
     Layered via surface-tint first, shadows second & subtle. */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 28px rgba(0,0,0,0.55);
  --ring-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* ─── Motion — crisp 150-250ms ───────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 0.8, 0.2);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Layout ─────────────────────────────────────────────── */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 860px;
  --nav-h: 56px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic aliases — use these in components, not raw tokens.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          var(--bg-1);
  --bg-elevated: var(--surface-1);
  --bg-overlay:  rgba(6,8,11,0.72);

  /* Text */
  --text:        var(--fg-1);
  --text-muted:  var(--fg-2);
  --text-dim:    var(--fg-3);
  --text-faint:  var(--fg-4);

  /* Borders */
  --border:      var(--line-2);
  --border-soft: var(--line-1);
  --border-loud: var(--line-3);
}

/* ─────────────────────────────────────────────────────────────
   Base element styles
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  letter-spacing: var(--tr-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  line-height: var(--lh-56);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  line-height: var(--lh-34);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .p {
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  color: var(--text-muted);
  margin: 0;
}

small, .small, .caption {
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-dim);
}

.eyebrow, .label-ucase {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  letter-spacing: var(--tr-ucase);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: var(--fw-medium);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--rad-1);
  padding: 1px 6px;
  color: var(--fg-1);
}

pre {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-3);
  padding: var(--sp-4);
  overflow: auto;
  color: var(--fg-1);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--fg-1); }

/* Utility primitives */
.mm-card {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-3);
}
.mm-hairline { border: 1px solid var(--line-2); }
.mm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--rad-1);
}