/* =========================================================
   Marketlinx DIGITAL — colour & type tokens
   Mirrors mkd-design-system.css using token-name aliases the
   design tooling expects (fg1, fg2, accent, h1, h2, etc.)
   ========================================================= */

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

:root {
  /* ---------- Brand palette (canonical) ---------- */
  --mkd-primary:        #0f1c2e;
  --mkd-primary-lt:     #eff4fb;
  --mkd-accent:         #188bf6;
  --mkd-accent-hover:   #0d72d4;
  --mkd-success:        #37ca37;
  --mkd-success-lt:     #e6f7e6;
  --mkd-warning:        #ffc107;
  --mkd-warning-lt:     #fff8e1;
  --mkd-danger:         #df001b;
  --mkd-danger-lt:      #fde8ea;
  --mkd-text:           #2a2d34;
  --mkd-muted:          #6b7280;
  --mkd-border:         #e5e7eb;
  --mkd-border-strong:  #cbd5e1;
  --mkd-bg:             #fafafa;
  --mkd-surface:        #ffffff;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:   var(--mkd-primary);     /* Primary text — headings, emphasis */
  --fg-2:   var(--mkd-text);        /* Body text */
  --fg-3:   var(--mkd-muted);       /* Captions, hints, secondary */
  --fg-inv: var(--mkd-surface);     /* On dark surfaces */

  --bg-page:    var(--mkd-bg);
  --bg-surface: var(--mkd-surface);
  --bg-tint:    var(--mkd-primary-lt);
  --bg-dark:    var(--mkd-primary);

  --line-1: var(--mkd-border);
  --line-2: var(--mkd-border-strong);

  --accent:        var(--mkd-accent);
  --accent-hover:  var(--mkd-accent-hover);

  /* ---------- Type families ---------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", "Segoe UI", sans-serif;       /* same family, weight does the work */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (semantic, px-based for predictability) ---------- */
  --text-display: 2.5rem;   /* 40 — proposal covers, big stats */
  --text-h1:      2rem;     /* 32 — hero */
  --text-h2:      1.5rem;   /* 24 — section */
  --text-h3:      1.15rem;  /* 18 — subsection / card title */
  --text-body:    0.9rem;   /* 14.4 — body */
  --text-sm:      0.82rem;  /* 13 — labels */
  --text-xs:      0.75rem;  /* 12 — pills, captions */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
}

/* ---------- Semantic element styles ---------- */

.h-display, .mkd-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
}

h1, .h1, .mkd-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2, .mkd-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3, .mkd-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body, .mkd-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
  margin: 0;
}

.label, .mkd-label-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--fg-1);
}

.caption, .hint, .mkd-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

code, .mono, .mkd-mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--fg-1);
}