/* ============================================================
   Muchomota Design System — Colors & Type
   Felt-green quant aesthetic. Bloomberg terminal meets poker table.
   ============================================================ */

/* ---------- Fonts (Google Fonts fallbacks flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Inter:wght@300..800&family=JetBrains+Mono:wght@400..700&display=swap');

:root {
  /* ========== RAW COLOR PALETTE ==========
     Felt green is the brand anchor. Neutrals are cool-leaning.
     Chip accents (gold/red) are accent-only — never area fill.
  */

  /* Felt — brand anchor */
  --felt-50:  #EEF4F0;
  --felt-100: #D4E3DA;
  --felt-200: #A7C5B2;
  --felt-300: #77A48A;
  --felt-400: #4C8566;
  --felt-500: #2B6B49;   /* brand primary */
  --felt-600: #1F553A;
  --felt-700: #17432E;
  --felt-800: #0F3121;
  --felt-900: #0A2418;
  --felt:     var(--felt-500);

  /* Graphite — dark neutral (app chrome) */
  --graphite-50:  #F5F6F7;
  --graphite-100: #E5E7EA;
  --graphite-200: #C8CCD2;
  --graphite-300: #9AA1AB;
  --graphite-400: #6B7480;
  --graphite-500: #454C56;
  --graphite-600: #2E343C;
  --graphite-700: #1E2229;
  --graphite-800: #141821;      /* app background */
  --graphite-900: #0B0E14;      /* deepest */
  --graphite:     var(--graphite-800);

  /* Chalk — light neutral (marketing body) */
  --chalk-50:  #FFFFFF;
  --chalk-100: #FBFAF7;         /* page bg (warm off-white) */
  --chalk-200: #F3F1EC;
  --chalk-300: #E7E4DC;
  --chalk:     var(--chalk-100);

  /* Ink — default foreground on chalk */
  --ink: #0F1410;
  --ink-muted: #4B5550;
  --ink-dim: #7C867F;

  /* Chip accents — emphasis only */
  --chip-gold-100: #F7E9C3;
  --chip-gold-500: #C9A24B;     /* primary accent (CTAs, focus) */
  --chip-gold-700: #8F6F22;
  --chip-gold-900: #4A3810;
  --chip-gold: var(--chip-gold-500);

  --chip-red-100:  #F7D7D2;
  --chip-red-500:  #B3311F;     /* danger / loss */
  --chip-red-700:  #7A1D0E;
  --chip-red-900:  #3E0A04;
  --chip-red: var(--chip-red-500);

  /* Semantic data colors — for charts, EV/ROI markers */
  --data-pos: #2B6B49;          /* felt — profit */
  --data-neg: #B3311F;          /* chip red — loss */
  --data-neu: #6B7480;          /* graphite — flat */
  --data-hi:  #C9A24B;          /* gold — highlight */
  --data-ev:  #3A6EA5;          /* cool blue — EV line (rare cool accent) */

  /* Hairlines */
  --hairline:        rgba(15, 20, 16, 0.10);
  --hairline-strong: rgba(15, 20, 16, 0.18);
  --hairline-dark:   rgba(255, 255, 255, 0.10);

  /* ========== SEMANTIC SURFACES ========== */
  --bg-page:      var(--chalk-100);
  --bg-surface:   var(--chalk-50);
  --bg-sunken:    var(--chalk-200);
  --bg-inverse:   var(--graphite-800);
  --bg-brand:     var(--felt-500);

  --fg-1:         var(--ink);         /* primary text */
  --fg-2:         var(--ink-muted);   /* secondary */
  --fg-3:         var(--ink-dim);     /* tertiary */
  --fg-brand:     var(--felt-500);
  --fg-on-brand:  var(--chalk-50);
  --fg-on-dark:   var(--chalk-100);
  --fg-accent:    var(--chip-gold-700);

  /* ========== RADII ========== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;    /* max — nothing softer */
  --radius-pill: 999px; /* status dots only */

  /* ========== SPACING (8px grid) ========== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ========== SHADOWS ========== */
  --shadow-1: 0 1px 0 rgba(15, 20, 16, 0.04),
              0 1px 2px rgba(15, 20, 16, 0.06);
  --shadow-2: 0 1px 2px rgba(15, 20, 16, 0.06),
              0 4px 12px rgba(15, 20, 16, 0.08);
  --shadow-3: 0 2px 4px rgba(15, 20, 16, 0.08),
              0 16px 32px rgba(15, 20, 16, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Ring for focus */
  --ring-focus: 0 0 0 2px var(--chalk-100),
                0 0 0 4px var(--chip-gold-500);

  /* ========== MOTION ========== */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-micro: 120ms;
  --dur-hover: 200ms;
  --dur-panel: 320ms;
  --dur-page: 480ms;

  /* ========== TYPE SYSTEM ========== */
  --font-serif: 'Source Serif 4', 'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-body:  1.55;
  --lh-loose: 1.72;

  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.02em;
  --tr-label:  0.08em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes directly, OR compose via the var/utility tokens above.
   ============================================================ */

.mm-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.mm-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.mm-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.mm-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.mm-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.mm-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.mm-lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.mm-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.mm-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.mm-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.mm-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.mm-mono-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
}

.mm-numeral {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.mm-numeral-xl {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.mm-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* ============================================================
   BASE ELEMENT DEFAULTS (scoped — apply only when needed)
   ============================================================ */

.mm-root {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mm-root ::selection {
  background: var(--felt-500);
  color: var(--chalk-50);
}

.mm-root h1 { all: unset; display: block; }
.mm-root h2 { all: unset; display: block; }
.mm-root h3 { all: unset; display: block; }
.mm-root code,
.mm-root kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  color: var(--fg-1);
}

.mm-root hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-6) 0;
}

/* ============================================================
   DARK CONTEXT — wrap app chrome in .mm-dark
   ============================================================ */

.mm-dark {
  --bg-page: var(--graphite-800);
  --bg-surface: var(--graphite-700);
  --bg-sunken: var(--graphite-900);
  --fg-1: var(--chalk-100);
  --fg-2: var(--graphite-300);
  --fg-3: var(--graphite-400);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  color: var(--fg-1);
  background: var(--bg-page);
}