/* ============================================================
   MEDIA BOARD — Design Tokens
   colors_and_type.css
   ------------------------------------------------------------
   The brand is built from the logo: a thin-line network graph
   with chartreuse-green signal nodes, set against deep ink
   black. The system reads as "calm infrastructure" — confident,
   technical, modern. Green is used sparingly, as a signal — not
   as a fill.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ─── BRAND CORE ────────────────────────────────────────── */
  --mb-signal-50:  #F5FBDD;
  --mb-signal-100: #E9F6B5;
  --mb-signal-200: #D8EE85;
  --mb-signal-300: #C6E45A;
  --mb-signal-400: #B5DC3C;   /* PRIMARY — sampled from logo */
  --mb-signal-500: #9DC526;
  --mb-signal-600: #7FA31B;
  --mb-signal-700: #5F7B14;

  /* ─── INK (NEUTRAL SCALE) ───────────────────────────────── */
  --mb-ink-0:   #FFFFFF;
  --mb-ink-50:  #F7F8F4;     /* canvas tint */
  --mb-ink-100: #EEEFEA;
  --mb-ink-200: #DFE1D9;
  --mb-ink-300: #C2C5BA;
  --mb-ink-400: #8E928A;
  --mb-ink-500: #5B5F58;
  --mb-ink-600: #3A3D38;
  --mb-ink-700: #232521;
  --mb-ink-800: #141513;
  --mb-ink-900: #0A0B09;     /* near-black, used for logo + display */

  /* ─── DEEP / NIGHT MODE ─────────────────────────────────── */
  --mb-night-bg:    #0E120B;  /* very dark, faint green undertone */
  --mb-night-card:  #161B12;
  --mb-night-line:  #232A1D;

  /* ─── SEMANTIC ──────────────────────────────────────────── */
  --mb-success: #6AB04C;
  --mb-warn:    #E0A93E;
  --mb-danger:  #D64545;
  --mb-info:    #3B82F6;

  /* ─── FOREGROUND / BACKGROUND ROLES ─────────────────────── */
  --mb-fg-1: var(--mb-ink-900);          /* primary text */
  --mb-fg-2: var(--mb-ink-600);          /* secondary text */
  --mb-fg-3: var(--mb-ink-400);          /* tertiary / meta */
  --mb-fg-on-signal: var(--mb-ink-900);  /* text on lime accents */
  --mb-fg-on-dark:   var(--mb-ink-50);

  --mb-bg-1: var(--mb-ink-0);            /* page */
  --mb-bg-2: var(--mb-ink-50);           /* subtle surface */
  --mb-bg-3: var(--mb-ink-100);          /* cards on tinted bg */
  --mb-bg-inverse: var(--mb-ink-900);

  --mb-border-1: var(--mb-ink-200);      /* default hairline */
  --mb-border-2: var(--mb-ink-300);      /* stronger divider */
  --mb-border-strong: var(--mb-ink-900); /* logo-style 2px line */

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --mb-font-display: "Sora", "Inter", system-ui, sans-serif;
  --mb-font-body:    "DM Sans", "Inter", system-ui, sans-serif;
  --mb-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Weights — display is thin/light, body is normal/medium */
  --mb-w-thin:     200;
  --mb-w-light:    300;
  --mb-w-regular:  400;
  --mb-w-medium:   500;
  --mb-w-semibold: 600;
  --mb-w-bold:     700;

  /* Type ramp (clamped for fluid scale on marketing pages) */
  --mb-fs-display: clamp(48px, 6.5vw, 96px);
  --mb-fs-h1: clamp(36px, 4vw, 56px);
  --mb-fs-h2: clamp(28px, 2.6vw, 40px);
  --mb-fs-h3: 24px;
  --mb-fs-h4: 18px;
  --mb-fs-eyebrow: 12px;       /* uppercase label */
  --mb-fs-body-lg: 18px;
  --mb-fs-body: 16px;
  --mb-fs-body-sm: 14px;
  --mb-fs-caption: 12px;
  --mb-fs-mono: 13px;

  /* Letter-spacing — the wordmark is wide-tracked, we mirror that on display + labels */
  --mb-ls-display: -0.01em;
  --mb-ls-wordmark: 0.22em;    /* wide track for "MEDIA BOARD"-style headings */
  --mb-ls-eyebrow: 0.16em;
  --mb-ls-body: 0;

  --mb-lh-tight: 1.05;
  --mb-lh-snug:  1.2;
  --mb-lh-body:  1.55;
  --mb-lh-loose: 1.7;

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

  /* ─── RADIUS — restrained, hardware-feeling ─────────────── */
  --mb-radius-xs: 4px;
  --mb-radius-sm: 8px;
  --mb-radius-md: 12px;
  --mb-radius-lg: 18px;
  --mb-radius-xl: 28px;
  --mb-radius-pill: 999px;
  --mb-radius-card: 14px;      /* default for cards */

  /* ─── SHADOWS — soft, low; this is a flat-ish system ────── */
  --mb-shadow-1: 0 1px 0 0 rgba(10,11,9,.04), 0 1px 2px rgba(10,11,9,.04);
  --mb-shadow-2: 0 2px 6px rgba(10,11,9,.06), 0 8px 24px -8px rgba(10,11,9,.08);
  --mb-shadow-3: 0 8px 24px -6px rgba(10,11,9,.10), 0 24px 48px -16px rgba(10,11,9,.12);
  --mb-shadow-signal: 0 0 0 4px rgba(181,220,60,.20);  /* focus halo */
  --mb-shadow-inset: inset 0 0 0 1px var(--mb-border-1);

  /* ─── STROKES — logo-derived ────────────────────────────── */
  --mb-stroke-hairline: 1px;
  --mb-stroke-line:     2px;     /* matches the logo's circle stroke */
  --mb-stroke-bold:     3px;

  /* ─── MOTION ────────────────────────────────────────────── */
  --mb-ease-out: cubic-bezier(.22, .61, .36, 1);
  --mb-ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --mb-dur-1: 120ms;             /* tap feedback */
  --mb-dur-2: 200ms;             /* hover, small UI */
  --mb-dur-3: 360ms;             /* page-level reveal */
  --mb-dur-4: 720ms;             /* network/pulse animations */

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --mb-container: 1240px;
  --mb-container-narrow: 880px;
  --mb-gutter: clamp(20px, 4vw, 56px);
}

/* ============================================================
   SEMANTIC TYPE — drop these classes into HTML directly.
   ============================================================ */

.mb-display {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-w-light);
  font-size: var(--mb-fs-display);
  line-height: var(--mb-lh-tight);
  letter-spacing: var(--mb-ls-display);
  color: var(--mb-fg-1);
}

.mb-h1 {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-w-light);
  font-size: var(--mb-fs-h1);
  line-height: var(--mb-lh-tight);
  letter-spacing: var(--mb-ls-display);
  color: var(--mb-fg-1);
}

.mb-h2 {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-w-regular);
  font-size: var(--mb-fs-h2);
  line-height: var(--mb-lh-snug);
  letter-spacing: var(--mb-ls-display);
  color: var(--mb-fg-1);
}

.mb-h3 {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-w-medium);
  font-size: var(--mb-fs-h3);
  line-height: var(--mb-lh-snug);
  color: var(--mb-fg-1);
}

.mb-h4 {
  font-family: var(--mb-font-body);
  font-weight: var(--mb-w-semibold);
  font-size: var(--mb-fs-h4);
  line-height: var(--mb-lh-snug);
  color: var(--mb-fg-1);
}

/* Wordmark-style heading — wide tracked, uppercase, thin.
   Use sparingly: section starters, hero overlays, captions on imagery. */
.mb-wordmark {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-w-light);
  text-transform: uppercase;
  letter-spacing: var(--mb-ls-wordmark);
  line-height: 1.1;
}

.mb-eyebrow {
  font-family: var(--mb-font-body);
  font-weight: var(--mb-w-medium);
  font-size: var(--mb-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--mb-ls-eyebrow);
  color: var(--mb-fg-2);
}

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

.mb-body {
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body);
  line-height: var(--mb-lh-body);
  color: var(--mb-fg-1);
}

.mb-body-sm {
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body-sm);
  line-height: var(--mb-lh-body);
  color: var(--mb-fg-2);
}

.mb-caption {
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-caption);
  line-height: 1.4;
  color: var(--mb-fg-3);
}

.mb-mono {
  font-family: var(--mb-font-mono);
  font-size: var(--mb-fs-mono);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--mb-fg-1);
}

/* ============================================================
   BASE
   ============================================================ */

html, body {
  background: var(--mb-bg-1);
  color: var(--mb-fg-1);
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body);
  line-height: var(--mb-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--mb-signal-300);
  color: var(--mb-ink-900);
}