/* =========================================================================
   MUSICMIRROR — Colors & Type · v2 (wallpaper book)
   ---
   The first pass was "Hermes in a dark room." Wrong building.
   This pass is "a Grateful Dead wallpaper book with a music visualizer
   embedded as the one dark window into the song."
   ---
   Backgrounds: warm cream PAPER. Headings: Spectral 800 — a warm
   humanist serif at its heaviest weight. Body: Spectral 400. Hand-script
   accents: Caveat. Borders: HEAVY black, 1.5–2 px, like ink. Color is
   used liberally and joyfully — terracotta, blood red, cyan sky, amber,
   forest green — pulled directly from the reference wallpapers. Only
   the stage stays deep-dark.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  /* ---------------------------------------------------------------------
     PAGE — the cream-paper room
     This is the FRAMING surface — the wallpaper book.
     --------------------------------------------------------------------- */
  --mm-paper:        #f8e9d7;   /* cream — the page */
  --mm-paper-deep:   #f0d9b8;   /* shadowed cream — panel base */
  --mm-paper-peach:  #f6caa5;   /* warm cream — highlight surface */
  --mm-bg:           var(--mm-paper);
  --mm-surface:      #fff6e6;   /* lifted-paper card */
  --mm-surface-2:    var(--mm-paper-deep);

  /* ---------------------------------------------------------------------
     STAGE — the one dark window
     The visualization lives here. Only here.
     --------------------------------------------------------------------- */
  --mm-stage:        #0d0a0f;   /* deep night sky */
  --mm-stage-2:      #1a1014;   /* warm dark */
  --mm-stage-radial: radial-gradient(circle at 50% 30%, #1b1018 0%, #0d0a0f 55%, #050204 100%);

  /* ---------------------------------------------------------------------
     INK — text on cream / text on stage
     --------------------------------------------------------------------- */
  --mm-ink:          #1a1410;   /* warm near-black, text on cream */
  --mm-ink-soft:     #4a3c2c;   /* secondary text on cream */
  --mm-ink-muted:    #5c4b35;   /* tertiary / labels on cream */
  --mm-ink-faint:    #8d7c66;   /* fine print on cream */
  --mm-cream:        #f8e9d7;   /* text on stage (was --mm-ink) */
  --mm-cream-soft:   #d6c9b6;   /* secondary on stage */

  /* ---------------------------------------------------------------------
     INK LINES — the heavy outlines that make this feel painted
     --------------------------------------------------------------------- */
  --mm-line:         #1a1410;            /* primary outline — heavy black */
  --mm-line-2:       #3a2c1f;            /* secondary outline — warm dark */
  --mm-line-soft:    rgba(26,20,16,.28); /* hairline */
  --mm-border:       2px solid var(--mm-line);
  --mm-border-thick: 3px solid var(--mm-line);
  --mm-border-hair:  1px solid var(--mm-line-soft);
  --mm-border-dashed:2px dashed var(--mm-line);

  /* ---------------------------------------------------------------------
     COLOR — channel accents
     Pulled from the wallpaper palette. Each is BOUND to a band or role.
     --------------------------------------------------------------------- */
  --mm-bass:        #841810;   /* BOTTOM · bass · kick · body — deep blood */
  --mm-bass-soft:   #c2483b;
  --mm-mid:         #1a1410;   /* MIDDLE · vocal · melody · story — ink */
  --mm-top:         #178cca;   /* TOP · hats · air · chrome — sky blue */
  --mm-top-soft:    #30b9d9;   /* cyan highlight */
  --mm-gold:        #d88a44;   /* GOLD · live energy · onset · time — warm amber */
  --mm-gold-deep:   #b4691d;
  --mm-amber:       #f4a83f;   /* hot / warning */

  /* Secondary palette — for surface tints, mode accents, illustration */
  --mm-red-hot:     #f41608;   /* sharp red, used very sparingly (alarm, danger) */
  --mm-red-blood:   #841810;
  --mm-terracotta:  #d74d27;
  --mm-forest:      #224841;   /* deep forest green */
  --mm-sage:        #788977;
  --mm-mist:        #bfc7bf;
  --mm-sky:         #178cca;
  --mm-cyan:        #30b9d9;

  /* ---------------------------------------------------------------------
     TRUTH LEDGER — measured / modeled / interpreted
     --------------------------------------------------------------------- */
  --mm-measured:    var(--mm-forest);     /* deep green — fact, calm */
  --mm-modeled:     var(--mm-gold);       /* amber — model, warm */
  --mm-interpreted: var(--mm-terracotta); /* terracotta — art, alive */

  --mm-signal:      var(--mm-forest);
  --mm-danger:      var(--mm-red-hot);

  /* ---------------------------------------------------------------------
     STAGE-ONLY CHANNEL TINTS — for the dark canvas inside the stage
     Brighter, more luminous versions that survive on near-black.
     --------------------------------------------------------------------- */
  --mm-stage-bass:  #ff5147;   /* glowing red on black */
  --mm-stage-mid:   #f8e9d7;   /* cream */
  --mm-stage-top:   #50d6ff;   /* glowing cyan on black */
  --mm-stage-gold:  #ffa950;   /* glowing amber on black */

  /* ---------------------------------------------------------------------
     TYPE — three families
     --------------------------------------------------------------------- */
  --mm-display:    'Spectral', ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mm-display-sc: 'Spectral', ui-serif, 'Iowan Old Style', Georgia, serif;
  --mm-serif:      'Spectral', ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mm-hand:    'Caveat', 'Bradley Hand', cursive;
  /* Legacy alias — old code that used --mm-mono gets serif now. No mono. */
  --mm-mono:    var(--mm-serif);

  /* ---------------------------------------------------------------------
     TYPE — scale (rem-based, 16px root)
     Display is chunky so sizes go bigger than the Hermes pass.
     --------------------------------------------------------------------- */
  --mm-fs-xs:    0.75rem;    /* 12 — small labels */
  --mm-fs-sm:    0.8125rem;  /* 13 — labels */
  --mm-fs-base:  0.9375rem;  /* 15 — body */
  --mm-fs-md:    1rem;       /* 16 — italic caption */
  --mm-fs-lg:    1.25rem;    /* 20 — sublabel */
  --mm-fs-xl:    1.5rem;     /* 24 — metric value */
  --mm-fs-2xl:   1.875rem;   /* 30 — bigline */
  --mm-fs-3xl:   2.5rem;     /* 40 — section title */
  --mm-fs-4xl:   3.25rem;    /* 52 — hero title */
  --mm-fs-5xl:   4.5rem;     /* 72 — landing display */
  --mm-fs-6xl:   6rem;       /* 96 — full-bleed display */

  /* Tracking */
  --mm-track-display: -0.015em;   /* Spectral 800 at display sizes */
  --mm-track-tight:   -0.015em;
  --mm-track-normal:  0;
  --mm-track-wide:    0.05em;
  --mm-track-label:   0.08em;     /* Spectral SC labels — gentler than 0.22em */

  /* Leading */
  --mm-lh-display: 0.95;
  --mm-lh-tight:   1.1;
  --mm-lh-body:    1.55;
  --mm-lh-loose:   1.7;

  /* ---------------------------------------------------------------------
     SPACING — base 4px (same as before)
     --------------------------------------------------------------------- */
  --mm-space-1:  4px;
  --mm-space-2:  8px;
  --mm-space-3:  12px;
  --mm-space-4:  16px;
  --mm-space-5:  20px;     /* signature gutter — bumped from 18 to 20, breathes more */
  --mm-space-6:  24px;
  --mm-space-7:  32px;
  --mm-space-8:  48px;
  --mm-space-9:  64px;
  --mm-space-10: 96px;

  /* ---------------------------------------------------------------------
     RADIUS — soft, illustrated. Curves on cards mirror Spectral's ink-traps.
     --------------------------------------------------------------------- */
  --mm-radius-0: 0;
  --mm-radius-1: 6px;       /* cards */
  --mm-radius-2: 10px;      /* panels */
  --mm-radius-3: 18px;      /* large blocks */
  --mm-radius-pill: 999px;  /* tags, badges, live indicator */

  /* ---------------------------------------------------------------------
     SHADOW — chunky ink "letterpress" offset, not soft drop-shadow.
     Always solid color, slightly offset, no blur.
     --------------------------------------------------------------------- */
  --mm-press:        4px 4px 0 0 var(--mm-line);            /* chunky offset */
  --mm-press-sm:     2px 2px 0 0 var(--mm-line);
  --mm-press-gold:   4px 4px 0 0 var(--mm-gold);
  --mm-press-red:    4px 4px 0 0 var(--mm-bass);
  --mm-press-forest: 4px 4px 0 0 var(--mm-forest);

  /* Glow — ONLY inside the dark stage */
  --mm-glow-bass: 0 0 24px rgba(255,81,71,0.55),  0 0 1px rgba(255,81,71,0.7);
  --mm-glow-top:  0 0 24px rgba(80,214,255,0.55), 0 0 1px rgba(80,214,255,0.7);
  --mm-glow-gold: 0 0 24px rgba(255,169,80,0.55), 0 0 1px rgba(255,169,80,0.7);
  --mm-glow-cream:0 0 18px rgba(248,233,215,0.4);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --mm-ease-attack:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --mm-ease-release: cubic-bezier(0.4, 0, 0.6, 1);
  --mm-ease-breath:  cubic-bezier(0.45, 0, 0.55, 1);
  --mm-dur-fast:   140ms;
  --mm-dur-base:   240ms;
  --mm-dur-slow:   480ms;
  --mm-dur-breath: 4200ms;

  /* ---------------------------------------------------------------------
     PAPER GRAIN — overlay this on cream surfaces for the painted feel.
     Use as background-image alongside the cream fill.
     --------------------------------------------------------------------- */
  --mm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================================
   SEMANTIC TYPE
   ========================================================================= */

.mm-display {
  font-family: var(--mm-display);
  font-weight: 800;
  font-size: var(--mm-fs-5xl);
  line-height: var(--mm-lh-display);
  letter-spacing: var(--mm-track-display);
  color: var(--mm-ink);
}

.mm-h1 {
  font-family: var(--mm-display);
  font-weight: 800;
  font-size: var(--mm-fs-4xl);
  line-height: var(--mm-lh-display);
  letter-spacing: var(--mm-track-display);
  color: var(--mm-ink);
}

.mm-h2 {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: var(--mm-fs-3xl);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-track-display);
  color: var(--mm-ink);
}

.mm-bigline {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: var(--mm-fs-2xl);
  line-height: 1.15;
  letter-spacing: var(--mm-track-tight);
  color: var(--mm-ink);
}

.mm-caption {
  font-family: var(--mm-serif);
  font-style: italic;
  font-size: var(--mm-fs-md);
  color: var(--mm-ink-muted);
  line-height: var(--mm-lh-body);
}

.mm-body {
  font-family: var(--mm-serif);
  font-weight: 400;
  font-size: var(--mm-fs-base);
  line-height: var(--mm-lh-body);
  color: var(--mm-ink);
}

.mm-label,
.mm-eyebrow {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: var(--mm-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--mm-track-label);
  color: var(--mm-ink-muted);
}

.mm-tag {
  font-family: var(--mm-serif);
  font-weight: 600;
  font-size: var(--mm-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--mm-track-label);
  color: var(--mm-ink-muted);
}

.mm-metric-value {
  font-family: var(--mm-display);
  font-size: var(--mm-fs-xl);
  font-weight: 800;
  letter-spacing: var(--mm-track-tight);
  color: var(--mm-ink);
}
.mm-metric-value small {
  font-family: var(--mm-serif);
  font-size: var(--mm-fs-xs);
  color: var(--mm-ink-muted);
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
}

.mm-hand {
  font-family: var(--mm-hand);
  font-weight: 600;
  font-size: var(--mm-fs-lg);
  color: var(--mm-ink);
}

/* Truth ledger */
.mm-truth {
  font-family: var(--mm-serif);
  font-size: var(--mm-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--mm-track-label);
  font-weight: 700;
}
.mm-truth--measured    { color: var(--mm-measured); }
.mm-truth--modeled     { color: var(--mm-modeled); }
.mm-truth--interpreted { color: var(--mm-interpreted); }

/* =========================================================================
   BASE PAGE
   ========================================================================= */
.mm-canvas {
  background-color: var(--mm-paper);
  background-image: var(--mm-grain);
  color: var(--mm-ink);
  font-family: var(--mm-serif);
  font-size: var(--mm-fs-base);
  line-height: var(--mm-lh-body);
  -webkit-font-smoothing: antialiased;
}