/* =========================================================================
   MasterTasks Design System — Colors & Type
   v1.0 — mirrors Tomorrow.bio Dashboard Design Language

   Two layers:
     :root         — raw tokens (--lm-*, --dx-*)
     semantic /    — element styles (h1, h2, body, code, .pill, etc)
   ========================================================================= */

/* Webfonts ----------------------------------------------------------------- */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand / accent (inherited from LM) ---------- */
  --lm-brand:       #2C3DDA;
  --lm-brand-deep:  #1F2DBE;
  --lm-brand-soft:  #EEF0FF;
  --lm-accent:      var(--lm-brand);
  --lm-accent-deep: var(--lm-brand-deep);
  --lm-accent-soft: var(--lm-brand-soft);

  /* ---------- Neutrals ---------- */
  --lm-ink:      #0B0B12;
  --lm-ink-2:    #2A2A36;
  --lm-muted:    #6B6F80;
  --lm-muted-2:  #A4A8B6;
  --lm-line:     #ECECF1;
  --lm-line-2:   #E1E1E8;
  --lm-bg:       #FAFAFB;
  --lm-bg-2:     #F4F4F6;
  --lm-card:     #FFFFFF;

  /* ---------- Semantic palette ---------- */
  --lm-success:      #15803D;
  --lm-success-soft: #E7F5EC;
  --lm-warning:      #B45309;
  --lm-warning-soft: #FEF3D8;
  --lm-error:        #DC2626;
  --lm-error-soft:   #FDECEC;

  /* ---------- Status alphabet (the only colors that mean anything) ---------- */
  --dx-ok:        var(--lm-success);
  --dx-ok-soft:   var(--lm-success-soft);
  --dx-warn:      var(--lm-warning);
  --dx-warn-soft: var(--lm-warning-soft);
  --dx-crit:      var(--lm-error);
  --dx-crit-soft: var(--lm-error-soft);
  --dx-info:      var(--lm-brand);
  --dx-info-soft: var(--lm-brand-soft);
  --dx-mute:      var(--lm-muted);
  --dx-mute-soft: var(--lm-bg-2);

  /* ---------- Tier palette (intentionally reuses status) ---------- */
  --dx-tier-ultra:      var(--dx-crit);
  --dx-tier-ultra-soft: var(--dx-crit-soft);
  --dx-tier-crit:       var(--dx-warn);
  --dx-tier-crit-soft:  var(--dx-warn-soft);
  --dx-tier-imp:        var(--dx-info);
  --dx-tier-imp-soft:   var(--dx-info-soft);

  /* ---------- Chart palette ---------- */
  --dx-chart-1: #2C3DDA;
  --dx-chart-2: #15803D;
  --dx-chart-3: #B45309;
  --dx-chart-4: #DC2626;
  --dx-chart-5: #6B6F80;

  /* ---------- Grid / divider lines ---------- */
  --dx-grid:   rgba(11, 11, 18, 0.06);
  --dx-grid-2: rgba(11, 11, 18, 0.10);

  /* ---------- Type ---------- */
  --lm-font:      "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --lm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dense type scale (dashboards live between 10–15px) */
  --dx-text-xxs:  10px;
  --dx-text-xs:   11px;
  --dx-text-sm:   12px;
  --dx-text-md:   13px;
  --dx-text-base: 14px;
  --dx-text-lg:   16px;
  --dx-text-xl:   20px;
  --dx-text-2xl:  28px;
  --dx-text-3xl:  40px;
  --dx-text-hero: 56px;

  /* ---------- Spacing ---------- */
  --dx-pad-card:    16px;
  --dx-pad-card-lg: 20px;
  --dx-gap-row:     6px;

  /* ---------- Radii ---------- */
  --dx-radius-card: 14px;
  --dx-radius-pill: 999px;
  --dx-radius-row:  8px;

  /* ---------- Shadows ---------- */
  --dx-shadow-card:       0 1px 2px rgba(13,13,30,0.04), 0 0 0 1px var(--lm-line);
  --dx-shadow-card-hover: 0 4px 12px -4px rgba(13,13,30,0.10), 0 0 0 1px var(--lm-line-2);
  --dx-shadow-pop:        0 12px 32px -8px rgba(13,13,30,0.25);
}

/* =========================================================================
   Base / reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--lm-font);
  font-size: var(--dx-text-base);
  color: var(--lm-ink);
  background: var(--lm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  line-height: 1.45;
}

/* tabular numerals everywhere — IDs / counts / timestamps must align */
body, .dx-num, .dx-mono, td, code, kbd {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Semantic type
   ========================================================================= */
h1, .h1 {
  font-size: var(--dx-text-hero);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--lm-ink);
}
h2, .h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--lm-ink);
}
h3, .h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--lm-ink);
}
h4, .h4 {
  font-size: var(--dx-text-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lm-muted);
}

p, .body {
  font-size: var(--dx-text-base);
  color: var(--lm-ink-2);
  line-height: 1.6;
}

small, .meta {
  font-size: var(--dx-text-xs);
  color: var(--lm-muted);
}

.eyebrow {
  font-family: var(--lm-font-mono);
  font-size: var(--dx-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--lm-accent);
}

.label {
  font-size: var(--dx-text-xxs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lm-muted);
  font-weight: 500;
}

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

code, .dx-mono, .mono {
  font-family: var(--lm-font-mono);
  font-feature-settings: "ss01" 1;
  font-size: var(--dx-text-sm);
  color: var(--lm-ink-2);
  background: var(--lm-bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0;
}

kbd {
  font-family: var(--lm-font-mono);
  font-size: 10px;
  color: var(--lm-muted);
  background: #fff;
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  padding: 2px 6px;
}

strong, b { font-weight: 500; color: var(--lm-ink); }
em { font-style: italic; color: var(--lm-muted); }

button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection { background: var(--lm-accent-soft); color: var(--lm-ink); }