/* ============================================================
   muddmoney — Design Tokens
   Color, typography, spacing, radii, shadows.
   Import this once at the top of every page that uses the system.
   ============================================================ */

/* Brand type system — two faces, full stop.
     Sofia Pro (Mostardesign) — display, body, UI. Light 300/400, Semi Bold 600/700.
     Caveat — handwritten accents only (margin notes, stamps, annotations).
   No serifs. No third fallback face. If you reach for something else, stop. */


/* Brand fonts served R2-first, local fallback.
   R2 (canonical, single source of truth) → local /fonts (offline-safe).
   Most renders hit R2; local catches the offline / network-degraded case. */

@font-face {
  font-family: 'Caveat';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Caveat-Regular.woff2') format('woff2'),
       url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Caveat-Regular.ttf') format('truetype'),
       url('fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia Pro';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Mostardesign%20-%20Sofia%20Pro%20Light.otf') format('opentype'),
       url('fonts/Mostardesign_-_Sofia_Pro_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Mostardesign%20-%20Sofia%20Pro%20Light%20italic.otf') format('opentype'),
       url('fonts/Mostardesign_-_Sofia_Pro_Light_italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Mostardesign%20-%20Sofia%20Pro%20Semi%20Bold.otf') format('opentype'),
       url('fonts/Mostardesign_-_Sofia_Pro_Semi_Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Alias heavier weight to Semi Bold since that is the supplied bold */
@font-face {
  font-family: 'Sofia Pro';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Mostardesign%20-%20Sofia%20Pro%20Semi%20Bold.otf') format('opentype'),
       url('fonts/Mostardesign_-_Sofia_Pro_Semi_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Alias regular to Light so body text renders as brand-supplied Light */
@font-face {
  font-family: 'Sofia Pro';
  src: url('https://pub-b20df90b555c4d0d84325b86b1bc7810.r2.dev/fonts/Mostardesign%20-%20Sofia%20Pro%20Light.otf') format('opentype'),
       url('fonts/Mostardesign_-_Sofia_Pro_Light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- PALETTE ----------
     Earth-and-paper. Muted, dusty, dignified. Nothing neon.
     Colors lean natural-pigment — like watercolor on butcher paper. */

  /* Neutrals — mostly white, one cream. No tan stack.
     White dominates. Cream #f5efe6 is the single accent surface.
     Ink is warm & soft — never black. */
  --mm-paper:        #ffffff;   /* primary background — white */
  --mm-paper-soft:   #fdfbf7;   /* whisper of warmth, cards on white */
  --mm-paper-deep:   #f5efe6;   /* the one cream — section tint, wells */
  --mm-ink:          #3a332d;   /* primary text — soft warm brown, never #000 */
  --mm-ink-soft:     #6d6258;   /* secondary text, captions */
  --mm-ink-faint:    #9e958c;   /* tertiary text, metadata */
  --mm-rule:         #ede6da;   /* hairline dividers — barely there */

  /* Brand pigments — the canonical five.
     Green, Blue, Orange, Pink — four muted pigments, each paired with a
     near-twin shade for subtle depth. Red is the exception, reserved for
     red-flag usage only (stamps, alerts, debt-urgency). */
  --mm-green:        #d0d6a2;   /* primary pigment — dusty sage */
  --mm-green-alt:    #d1d7ae;   /* near-twin shade */
  --mm-blue:         #c3d1d1;   /* primary pigment — chalk-blue */
  --mm-blue-alt:     #c4d2d2;
  --mm-orange:       #ebbd92;   /* primary pigment — warm clay */
  --mm-orange-alt:   #ecbe93;
  --mm-pink:         #ebbeb3;   /* primary pigment — faded blush */

  /* Red — occasional red-flag use only */
  --mm-red:          #d73620;   /* stamps, alerts, debt-urgency */

  /* Legacy aliases — keep pre-existing kits rendering without color drift.
     All four point at the canonical five. Prefer the named pigments above. */
  --mm-clay:         var(--mm-orange);
  --mm-clay-deep:    #b87a4e;    /* darker shade for type/hover on orange */
  --mm-clay-soft:    var(--mm-orange-alt);
  --mm-ochre:        var(--mm-orange);
  --mm-ochre-soft:   var(--mm-orange-alt);
  --mm-blush:        var(--mm-pink);
  --mm-blush-soft:   var(--mm-pink);
  --mm-moss:         var(--mm-green);
  --mm-moss-soft:    var(--mm-green-alt);
  --mm-slate:        var(--mm-blue);
  --mm-slate-soft:   var(--mm-blue-alt);
  --mm-stamp-red:    var(--mm-red);
  --mm-stamp-red-deep:#a6281a;

  /* Semantic shortcuts */
  --mm-bg:           var(--mm-paper);
  --mm-surface:      var(--mm-paper-soft);
  --mm-surface-deep: var(--mm-paper-deep);
  --mm-text:         var(--mm-ink);
  --mm-text-muted:   var(--mm-ink-soft);
  --mm-text-faint:   var(--mm-ink-faint);
  --mm-accent:       var(--mm-orange);
  --mm-success:      var(--mm-green);
  --mm-warn:         var(--mm-orange);
  --mm-alert:        var(--mm-red);

  /* ---------- TYPE ----------
     Two faces. No substitutes.
       Sofia Pro — display, body, UI. Light (300/400) for running text;
                    Semi Bold (600/700) for headings & emphasis.
       Caveat    — handwritten accent. Margin notes, stamps, annotations.
                    Use SPARINGLY. Never for running text. */

  --mm-font-display: 'Sofia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-body:    'Sofia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-hand:    'Caveat', 'Segoe Script', cursive;

  /* Type scale — modular, 1.25 ratio, rooted at 16px body */
  --mm-text-xs:   0.75rem;   /* 12px — metadata only */
  --mm-text-sm:   0.875rem;  /* 14px — UI small */
  --mm-text-base: 1rem;      /* 16px — body default */
  --mm-text-md:   1.125rem;  /* 18px — body large, lead paragraph */
  --mm-text-lg:   1.375rem;  /* 22px — h5 / card title */
  --mm-text-xl:   1.75rem;   /* 28px — h4 */
  --mm-text-2xl:  2.25rem;   /* 36px — h3 */
  --mm-text-3xl:  3rem;      /* 48px — h2 */
  --mm-text-4xl:  4rem;      /* 64px — h1 */
  --mm-text-5xl:  5.5rem;    /* 88px — hero display */

  /* Leading */
  --mm-leading-tight:  1.1;
  --mm-leading-snug:   1.25;
  --mm-leading-normal: 1.5;
  --mm-leading-loose:  1.7;

  /* Tracking */
  --mm-track-tight: -0.02em;
  --mm-track-normal: 0;
  --mm-track-wide:  0.04em;
  --mm-track-caps:  0.12em;  /* for ALL-CAPS labels */

  /* ---------- SPACING ----------
     4px base, generous at the top end. muddmoney pages BREATHE. */
  --mm-space-0:   0;
  --mm-space-1:   0.25rem;   /* 4 */
  --mm-space-2:   0.5rem;    /* 8 */
  --mm-space-3:   0.75rem;   /* 12 */
  --mm-space-4:   1rem;      /* 16 */
  --mm-space-5:   1.5rem;    /* 24 */
  --mm-space-6:   2rem;      /* 32 */
  --mm-space-7:   3rem;      /* 48 */
  --mm-space-8:   4rem;      /* 64 */
  --mm-space-9:   6rem;      /* 96 */
  --mm-space-10:  8rem;      /* 128 */

  /* ---------- RADII ----------
     Paper-like — barely rounded. Nothing squishy. */
  --mm-radius-sm: 2px;
  --mm-radius:    4px;   /* stamps, badges, buttons */
  --mm-radius-md: 8px;   /* inputs, compact cards */
  --mm-radius-lg: 12px;  /* cards, large wells — max */

  /* ---------- SHADOWS ----------
     Soft, paper-on-paper. No glows, no tech-y drop shadows. */
  --mm-shadow-sm: 0 1px 2px rgba(43, 36, 32, 0.06);
  --mm-shadow:    0 2px 6px rgba(43, 36, 32, 0.08), 0 1px 2px rgba(43, 36, 32, 0.04);
  --mm-shadow-md: 0 6px 18px rgba(43, 36, 32, 0.10), 0 2px 4px rgba(43, 36, 32, 0.05);
  --mm-shadow-lg: 0 18px 40px rgba(43, 36, 32, 0.14), 0 4px 8px rgba(43, 36, 32, 0.06);

  /* ---------- LINES ----------
     Hand-drawn feel. Use var(--mm-rule) for color. */
  --mm-hairline: 1px solid var(--mm-rule);
  --mm-rule-thick: 2px solid var(--mm-ink);

  /* ---------- CONTENT WIDTHS ---------- */
  --mm-width-prose: 68ch;
  --mm-width-wide:  1200px;
  --mm-width-max:   1440px;
}

/* ============================================================
   BASE RESETS & GLOBAL TYPOGRAPHY
   Pages that include this stylesheet inherit muddmoney type defaults.
   Override locally — never fight the base.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 16px;
  line-height: var(--mm-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; background: var(--mm-bg); color: var(--mm-text); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mm-font-display);
  font-weight: 500;
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-track-tight);
  color: var(--mm-ink);
  margin: 0 0 var(--mm-space-4);
  text-wrap: balance;
}

h1 { font-size: var(--mm-text-4xl); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: var(--mm-text-3xl); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: var(--mm-text-2xl); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--mm-text-xl);  font-weight: 600; }
h5 { font-size: var(--mm-text-lg);  font-weight: 600; }
h6 { font-size: var(--mm-text-md);  font-weight: 600;
     text-transform: uppercase; letter-spacing: var(--mm-track-caps); font-family: var(--mm-font-body); }

p { margin: 0 0 var(--mm-space-4); text-wrap: pretty; }
p.lead { font-size: var(--mm-text-md); color: var(--mm-text-muted); line-height: var(--mm-leading-loose); }

a { color: var(--mm-clay-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mm-ink); }

small, .mm-caption { font-size: var(--mm-text-sm); color: var(--mm-text-muted); }
.mm-eyebrow {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--mm-track-caps);
  color: var(--mm-clay-deep);
}
.mm-hand {
  font-family: var(--mm-font-hand);
  font-weight: 500;
  color: var(--mm-ink-soft);
  line-height: 1;
}

hr.mm-rule {
  border: 0;
  height: 1px;
  background: var(--mm-rule);
  margin: var(--mm-space-6) 0;
}
hr.mm-rule-heavy {
  border: 0;
  height: 2px;
  background: var(--mm-ink);
  margin: var(--mm-space-6) 0;
}

/* ---------- UTILITY CLASSES (prefixed) ---------- */
.mm-container { max-width: var(--mm-width-wide); margin: 0 auto; padding: 0 var(--mm-space-5); }
.mm-container-narrow { max-width: var(--mm-width-prose); margin: 0 auto; padding: 0 var(--mm-space-5); }

.mm-bg-paper       { background: var(--mm-paper); }
.mm-bg-paper-soft  { background: var(--mm-paper-soft); }
.mm-bg-paper-deep  { background: var(--mm-paper-deep); }
.mm-bg-ink         { background: var(--mm-ink); color: var(--mm-paper); }
.mm-bg-green       { background: var(--mm-green); color: var(--mm-ink); }
.mm-bg-blue        { background: var(--mm-blue); color: var(--mm-ink); }
.mm-bg-orange      { background: var(--mm-orange); color: var(--mm-ink); }
.mm-bg-pink        { background: var(--mm-pink); color: var(--mm-ink); }
/* legacy aliases */
.mm-bg-clay        { background: var(--mm-orange); color: var(--mm-ink); }
.mm-bg-moss        { background: var(--mm-green); color: var(--mm-ink); }
.mm-bg-ochre       { background: var(--mm-orange); color: var(--mm-ink); }

/* Paper texture — tiny repeating noise on bg */
.mm-texture {
  background-image:
    radial-gradient(rgba(90, 79, 70, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(90, 79, 70, 0.03) 1px, transparent 1px);
  background-size: 24px 24px, 13px 13px;
  background-position: 0 0, 7px 7px;
}

/* ---------- FOCUS STATE — consistent across kit ---------- */
*:focus-visible {
  outline: 2px solid var(--mm-clay-deep);
  outline-offset: 3px;
  border-radius: var(--mm-radius-sm);
}

/* ---------- SELECTION ---------- */
::selection { background: var(--mm-ochre-soft); color: var(--mm-ink); }