/* =============================================================
   MMM Framework Design System — Tokens
   Olive-grove palette, modern-minimal type, Bayesian-rigor vibe.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------
     Color: Olive scale — the brand neutral-with-warmth.
     Reads as natural, considered, scientific. Avoids the SaaS-blue trap.
     --------------------------------------------------------------- */
  --olive-50:  #f6f7f0;
  --olive-100: #eaecdc;
  --olive-200: #d6dab9;
  --olive-300: #b8c08c;
  --olive-400: #9ba668;
  --olive-500: #7d8a4e;   /* primary brand */
  --olive-600: #606d3d;
  --olive-700: #4a5532;
  --olive-800: #3a432a;
  --olive-900: #2e3422;
  --olive-950: #1c2014;

  /* ---------------------------------------------------------------
     Color: Warm neutrals — paper / clay / charcoal.
     Pairs with olive without going cold-grey.
     --------------------------------------------------------------- */
  --paper:      #fafaf6;   /* page background, slightly warm */
  --paper-2:    #f3f2ec;   /* recessed surface */
  --canvas:     #ffffff;   /* card / sheet */
  --ink-50:     #f0efe9;
  --ink-100:    #e3e2da;
  --ink-200:    #cdcbc0;
  --ink-300:    #a8a597;
  --ink-400:    #7c7a6e;
  --ink-500:    #595850;   /* body */
  --ink-600:    #3f3f3a;
  --ink-700:    #2b2b27;
  --ink-800:    #1c1c19;   /* headings */
  --ink-900:    #0e0e0c;

  /* ---------------------------------------------------------------
     Color: Accents — used sparingly for posterior/uncertainty bands,
     status, and chart series. All muted to sit beside olive.
     --------------------------------------------------------------- */
  --clay:       #b8643d;   /* warm secondary, mediator pathways */
  --clay-soft:  #e8c8b3;
  --rust:       #8e3b1f;   /* error, negative effect */
  --rust-soft:  #f0d5cb;
  --amber:      #c08a2a;   /* warning, partially observed */
  --amber-soft: #f0e2bd;
  --moss:       #4a7a4f;   /* success, complete */
  --moss-soft:  #cfe0cf;
  --slate:      #5a6b78;   /* info / docs */
  --slate-soft: #cfd8de;
  --plum:       #7a4f6b;   /* rare 4th chart series */

  /* ---------------------------------------------------------------
     Semantic foreground / background tokens
     --------------------------------------------------------------- */
  --bg:         var(--paper);
  --bg-sunken:  var(--paper-2);
  --bg-raised:  var(--canvas);
  --bg-inverse: var(--olive-900);

  --fg:         var(--ink-800);
  --fg-muted:   var(--ink-500);
  --fg-subtle:  var(--ink-400);
  --fg-faint:   var(--ink-300);
  --fg-inverse: var(--paper);

  --brand:         var(--olive-600);
  --brand-hover:   var(--olive-700);
  --brand-press:   var(--olive-800);
  --brand-soft:    var(--olive-100);
  --brand-tint:    var(--olive-50);
  --on-brand:      var(--paper);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-brand:  var(--olive-300);
  --divider:       var(--ink-100);

  --status-success:    var(--moss);
  --status-success-bg: var(--moss-soft);
  --status-warning:    var(--amber);
  --status-warning-bg: var(--amber-soft);
  --status-error:      var(--rust);
  --status-error-bg:   var(--rust-soft);
  --status-info:       var(--slate);
  --status-info-bg:    var(--slate-soft);

  /* Chart series — olive-led palette; ordered for first-3 contrast */
  --chart-1: var(--olive-600);
  --chart-2: var(--clay);
  --chart-3: var(--slate);
  --chart-4: var(--olive-300);
  --chart-5: var(--plum);
  --chart-6: var(--amber);
  --chart-posterior:    var(--olive-300);  /* 94% HDI band */
  --chart-posterior-2:  var(--olive-200);  /* 50% HDI band */
  --chart-mean:         var(--olive-700);

  /* ---------------------------------------------------------------
     Typography
     - Inter:        UI, body, tables, code-adjacent labels
     - Fraunces:     editorial headings, marketing, quotes (humanist serif)
     - JetBrains Mono: code, equations, MFF column names
     --------------------------------------------------------------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif:   'Fraunces', ui-serif, 'Iowan Old Style', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Modular scale — 1.200 (minor third). Calm, dense data UI friendly. */
  --text-xs:    0.75rem;   /* 12px — micro-labels, table captions */
  --text-sm:    0.8125rem; /* 13px — table data, helper text */
  --text-base:  0.9375rem; /* 15px — body, form inputs */
  --text-md:    1.0625rem; /* 17px — large body, lead */
  --text-lg:    1.25rem;   /* 20px — section subhead */
  --text-xl:    1.5rem;    /* 24px — h3 */
  --text-2xl:   1.875rem;  /* 30px — h2 */
  --text-3xl:   2.375rem;  /* 38px — h1 page */
  --text-4xl:   3rem;      /* 48px — hero */
  --text-5xl:   4rem;      /* 64px — display */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-mark:   0.14em;  /* eyebrow / SECTION caps */

  /* ---------------------------------------------------------------
     Spacing — 4px base. Density-aware; data UIs compress.
     --------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   3rem;      /* 48 */
  --space-8:   4rem;      /* 64 */
  --space-9:   6rem;      /* 96 */

  /* ---------------------------------------------------------------
     Radii — soft but not pillowy. Cards 8, inputs 6, pills full.
     --------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* inputs, badges */
  --radius-lg:   8px;     /* cards, panels */
  --radius-xl:   12px;    /* modal, hero */
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------
     Shadows — keep elevation gentle, not foggy. Olive-tinted.
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(46, 52, 34, 0.04);
  --shadow-sm: 0 1px 2px rgba(46, 52, 34, 0.06), 0 1px 1px rgba(46, 52, 34, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(46, 52, 34, 0.08), 0 2px 4px -2px rgba(46, 52, 34, 0.06);
  --shadow-lg: 0 12px 24px -8px rgba(46, 52, 34, 0.12), 0 4px 8px -4px rgba(46, 52, 34, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(46, 52, 34, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(46, 52, 34, 0.06);
  --shadow-focus: 0 0 0 3px rgba(155, 166, 104, 0.35); /* olive-400 @ 35% */

  /* ---------------------------------------------------------------
     Motion — restrained. Decisions, not demos.
     --------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* macOS-like */
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1.2);   /* small overshoot */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* Layout */
  --content-narrow: 640px;
  --content-base:   880px;
  --content-wide:   1120px;
  --content-app:    1440px;
}

/* =============================================================
   Semantic element styles — drop-in on a page.
   ============================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}

h5 {
  font-size: var(--text-md);
  font-weight: 600;
}

h6 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mark);
  color: var(--fg-muted);
}

p {
  margin: 0;
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

small, .text-caption {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}

a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: 'liga' 0;
}

code:not(pre code) {
  background: var(--brand-tint);
  color: var(--olive-800);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--olive-100);
}

pre {
  background: var(--olive-950);
  color: var(--olive-100);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

hr {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: var(--space-6) 0;
}

::selection { background: var(--olive-200); color: var(--olive-900); }

/* Editorial display class — hero / quote / section openers */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

/* Eyebrow / section mark */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mark);
  color: var(--brand);
}

/* Numerics — tabular figures for tables, metrics, equations */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.metric {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}