/* meetLab Design System — foundations
 * Deterministic, minimal, high-contrast.
 * Only two accents ever appear: ml-blue (PASS / primary) and ml-orange (HALT / warning).
 * Everything else is a neutral. No gradients. No decorative color.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500&display=swap');

:root {
  /* ───────── Neutral scale (paper → ink) ───────── */
  --ml-paper:       #FAFAF7;   /* page background, warm off-white */
  --ml-paper-2:     #F4F3EE;   /* secondary surface */
  --ml-line:        #E7E5DE;   /* hairline borders */
  --ml-line-strong: #CFCCC2;   /* stronger hairline */
  --ml-mute:        #8B8878;   /* tertiary / captions */
  --ml-ink-2:       #4A4740;   /* secondary text */
  --ml-ink:         #1A1915;   /* primary text, near-black */
  --ml-ink-max:     #000000;   /* absolute black, reserved */

  /* ───────── Dark surface (for contrast blocks) ───────── */
  --ml-dark:        #141310;
  --ml-dark-2:      #1E1D18;
  --ml-dark-3:      #2A2823;
  --ml-dark-line:   #3A3830;
  --ml-dark-ink:    #EDEBE4;
  --ml-dark-mute:   #8F8C80;

  /* ───────── Accents — the only two colors in the system ───────── */
  --ml-blue:        #1558E8;   /* PASS, primary, enforce */
  --ml-blue-hover:  #0D44C4;
  --ml-blue-press:  #0935A0;
  --ml-blue-tint:   #E4EDFF;   /* 8% wash */
  --ml-blue-line:   #B8CCFF;

  --ml-orange:      #E8601A;   /* HALT, terminal, warning */
  --ml-orange-hover:#C84E0F;
  --ml-orange-press:#A43E08;
  --ml-orange-tint: #FEE9DB;
  --ml-orange-line: #F5B896;

  /* ───────── Semantic tokens ───────── */
  --ml-bg:          var(--ml-paper);
  --ml-surface:     #FFFFFF;
  --ml-surface-2:   var(--ml-paper-2);
  --ml-border:      var(--ml-line);
  --ml-border-strong: var(--ml-line-strong);

  --ml-fg:          var(--ml-ink);
  --ml-fg-2:        var(--ml-ink-2);
  --ml-fg-mute:     var(--ml-mute);
  --ml-fg-inverse:  var(--ml-dark-ink);

  --ml-accent:      var(--ml-blue);
  --ml-accent-fg:   #FFFFFF;
  --ml-halt:        var(--ml-orange);
  --ml-halt-fg:     #FFFFFF;

  /* ───────── Status tokens (PASS / HALT / ESCALATE) ───────── */
  --ml-pass:        var(--ml-blue);
  --ml-pass-tint:   var(--ml-blue-tint);
  --ml-halt-tint:   var(--ml-orange-tint);
  --ml-escalate:    #8B8878;   /* neutral on purpose — escalation is not a color event */

  /* ───────── Typography ───────── */
  --ml-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ml-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ml-serif: 'IBM Plex Serif', ui-serif, Georgia, serif;

  /* Type scale — tight, deliberate, no fluid magic */
  --ml-fs-mono-xs:   11px;
  --ml-fs-mono-sm:   12px;
  --ml-fs-mono-md:   13px;
  --ml-fs-caption:   12px;
  --ml-fs-body-sm:   14px;
  --ml-fs-body:      16px;
  --ml-fs-body-lg:   18px;
  --ml-fs-h4:        20px;
  --ml-fs-h3:        26px;
  --ml-fs-h2:        36px;
  --ml-fs-h1:        52px;
  --ml-fs-display:   76px;

  --ml-lh-tight:  1.05;
  --ml-lh-snug:   1.2;
  --ml-lh-normal: 1.5;
  --ml-lh-prose:  1.65;

  --ml-tracking-wide:   0.08em;  /* eyebrow / label caps */
  --ml-tracking-tight: -0.02em;  /* large display */
  --ml-tracking-mono:   0;

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

  /* ───────── Radii — near-zero by default ───────── */
  --ml-r-0:   0px;
  --ml-r-xs:  2px;
  --ml-r-sm:  4px;
  --ml-r-md:  6px;
  --ml-r-lg:  10px;
  --ml-r-pill: 999px;

  /* ───────── Elevation — there essentially isn't any ───────── */
  --ml-shadow-0: none;
  --ml-shadow-1: 0 1px 0 0 var(--ml-line);              /* hairline only */
  --ml-shadow-2: 0 1px 2px rgba(20,19,16,0.04);
  --ml-shadow-pop: 0 10px 30px -12px rgba(20,19,16,0.18), 0 0 0 1px var(--ml-line);

  /* ───────── Motion ───────── */
  --ml-ease:      cubic-bezier(0.2, 0, 0, 1);   /* flat exit — deterministic feel */
  --ml-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ml-t-fast:    80ms;
  --ml-t-base:    140ms;
  --ml-t-slow:    240ms;

  /* ───────── Layout ───────── */
  --ml-container:  1200px;
  --ml-container-narrow: 880px;
  --ml-gutter:     24px;
  --ml-grid-unit:  8px;
}

/* ───────── Base element styles ───────── */

html, body {
  background: var(--ml-bg);
  color: var(--ml-fg);
  font-family: var(--ml-sans);
  font-size: var(--ml-fs-body);
  line-height: var(--ml-lh-normal);
  font-feature-settings: "ss02", "ss03", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / hero */
.ml-display {
  font-family: var(--ml-sans);
  font-weight: 500;
  font-size: var(--ml-fs-display);
  line-height: var(--ml-lh-tight);
  letter-spacing: var(--ml-tracking-tight);
  color: var(--ml-ink);
}

h1, .ml-h1 {
  font-family: var(--ml-sans);
  font-weight: 500;
  font-size: var(--ml-fs-h1);
  line-height: var(--ml-lh-tight);
  letter-spacing: var(--ml-tracking-tight);
  color: var(--ml-ink);
  margin: 0;
}

h2, .ml-h2 {
  font-family: var(--ml-sans);
  font-weight: 500;
  font-size: var(--ml-fs-h2);
  line-height: var(--ml-lh-snug);
  letter-spacing: -0.01em;
  color: var(--ml-ink);
  margin: 0;
}

h3, .ml-h3 {
  font-family: var(--ml-sans);
  font-weight: 500;
  font-size: var(--ml-fs-h3);
  line-height: var(--ml-lh-snug);
  color: var(--ml-ink);
  margin: 0;
}

h4, .ml-h4 {
  font-family: var(--ml-sans);
  font-weight: 600;
  font-size: var(--ml-fs-h4);
  line-height: var(--ml-lh-snug);
  color: var(--ml-ink);
  margin: 0;
}

p, .ml-body {
  font-size: var(--ml-fs-body);
  line-height: var(--ml-lh-prose);
  color: var(--ml-fg-2);
  margin: 0;
}

.ml-body-lg {
  font-size: var(--ml-fs-body-lg);
  line-height: var(--ml-lh-prose);
  color: var(--ml-fg-2);
}

.ml-caption {
  font-size: var(--ml-fs-caption);
  line-height: var(--ml-lh-normal);
  color: var(--ml-fg-mute);
}

/* Eyebrow — tiny caps label, often used to mark a section name */
.ml-eyebrow {
  font-family: var(--ml-mono);
  font-size: var(--ml-fs-mono-xs);
  font-weight: 500;
  letter-spacing: var(--ml-tracking-wide);
  text-transform: uppercase;
  color: var(--ml-fg-mute);
}

/* Mono — THE signature voice of meetLab. Used for
 * event names, skill ids, code, HALT codes, artifact refs. */
code, .ml-mono, kbd, samp {
  font-family: var(--ml-mono);
  font-size: 0.92em;
  font-feature-settings: "zero", "ss02";
}

.ml-mono-sm {
  font-family: var(--ml-mono);
  font-size: var(--ml-fs-mono-sm);
  letter-spacing: var(--ml-tracking-mono);
}

pre, .ml-pre {
  font-family: var(--ml-mono);
  font-size: var(--ml-fs-mono-md);
  line-height: 1.55;
  color: var(--ml-ink);
  background: var(--ml-surface-2);
  border: 1px solid var(--ml-border);
  padding: var(--ml-s-4) var(--ml-s-5);
  border-radius: var(--ml-r-sm);
  overflow-x: auto;
}

/* Links — underlined hairline, never blue by default */
a, .ml-link {
  color: var(--ml-ink);
  text-decoration: underline;
  text-decoration-color: var(--ml-line-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--ml-t-base) var(--ml-ease);
}
a:hover, .ml-link:hover {
  text-decoration-color: var(--ml-ink);
}

/* Utilities */
.ml-hr         { border: 0; border-top: 1px solid var(--ml-border); margin: 0; }
.ml-hr-strong  { border: 0; border-top: 1px solid var(--ml-ink); margin: 0; }
.ml-kbd {
  font-family: var(--ml-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--ml-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--ml-r-xs);
  background: var(--ml-surface);
  color: var(--ml-ink);
}