/* ============================================================
 * Mycelium Protocol — Colors & Type
 * Source of truth for the design system.
 *
 * Reverse-engineered from mushroom.github.io (white-paper.html,
 * Roadmap.html, index.html). The site speaks two visual dialects:
 *   1. Whitepaper / marketing — saturated purple-blue mycelial
 *      gradient backgrounds + bright multi-hue card accents,
 *      heavy use of glassmorphism (rgba whites + backdrop-blur).
 *   2. Roadmap / docs — neutral light surface, Inter type, blue
 *      action accent. The "serious" reading layer underneath the
 *      marketing chrome.
 * Both share Inter, the mushroom motif, and the four-stop
 * mycelium gradient.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- BLEX MONO NERD FONT (brand mono) ----------
 * IBM Plex Mono base + Nerd Font icon glyphs. The shipping mono family
 * for code, timeline chips, mono UI numerals, and anywhere we need
 * developer-tooling typography. Two sub-families:
 *  - BlexMonoNerdFontMono  : true monospace (default)
 *  - BlexMonoNerdFontPropo : proportional variant (display use only)
 */







:root {
  /* ---------- BRAND / SIGNATURE GRADIENTS ---------- */
  /* The "mycelium" gradient — used full-bleed on marketing surfaces. */
  --mp-grad-mycelium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* The four-stop "spore" gradient that crowns each whitepaper card. */
  --mp-grad-spore: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  /* Wordmark gradient — clipped to text on hero headers. */
  --mp-grad-wordmark: linear-gradient(45deg, #2b5876, #4e4376);

  /* ---------- ILLUSTRATION GRADIENTS (card medallions) ---------- */
  --mp-grad-whitepaper: linear-gradient(135deg, #667eea, #764ba2);
  --mp-grad-milestone:  linear-gradient(135deg, #f093fb, #f5576c);
  --mp-grad-gtoken:     linear-gradient(135deg, #4facfe, #00f2fe);
  --mp-grad-dao:        linear-gradient(135deg, #43e97b, #38f9d7);
  --mp-grad-demo:       linear-gradient(135deg, #fa709a, #fee140);
  --mp-grad-more:       linear-gradient(135deg, #a8edea, #fed6e3);

  /* ---------- PRIMARY PALETTE ---------- */
  --mp-purple-500: #667eea;   /* primary indigo-violet */
  --mp-purple-700: #764ba2;   /* deep violet */
  --mp-purple-900: #4e4376;   /* wordmark deep */
  --mp-indigo-800: #2b5876;   /* wordmark counter */

  /* Accent hues from the spore gradient. */
  --mp-coral:   #ff6b6b;
  --mp-teal:    #4ecdc4;
  --mp-sky:     #45b7d1;
  --mp-sage:    #96ceb4;

  /* Mushroom-cap red (logo) — used sparingly, e.g. notification dot. */
  --mp-mushroom-red:  #d4322a;
  --mp-mushroom-cream: #f2e3c2;

  /* ---------- NEUTRALS (from Roadmap.html, Bootstrap-derived) ---------- */
  --mp-gray-50:  #f8f9fa;   /* page background, soft surface */
  --mp-gray-100: #f1f3f5;   /* logic-block fill */
  --mp-gray-200: #e9ecef;   /* code chip, dividers */
  --mp-gray-300: #dee2e6;   /* borders, hairlines */
  --mp-gray-500: #6c757d;   /* secondary text */
  --mp-gray-600: #495057;   /* body emphasis, code text */
  --mp-gray-700: #343a40;   /* phase body text */
  --mp-gray-800: #2c3e50;   /* card heading */
  --mp-gray-900: #212529;   /* primary body text */
  --mp-slate-body: #5a6c7d; /* card paragraph (whitepaper) */

  /* ---------- ACTION ---------- */
  --mp-action:        #007bff;  /* roadmap lang switcher */
  --mp-action-hover:  #0056b3;
  --mp-link-hover:    #cf9818;  /* honey-gold link hover on index.html */

  /* ---------- SEMANTIC ---------- */
  --mp-fg-1: var(--mp-gray-900);     /* primary text on light */
  --mp-fg-2: var(--mp-gray-700);     /* body */
  --mp-fg-3: var(--mp-gray-500);     /* secondary / meta */
  --mp-fg-inverse: #ffffff;          /* text on purple/gradient */
  --mp-fg-inverse-2: rgba(255,255,255,0.8); /* footer text */

  --mp-bg-canvas: var(--mp-gray-50);
  --mp-bg-surface: #ffffff;
  --mp-bg-marketing: var(--mp-grad-mycelium);
  --mp-bg-glass: rgba(255,255,255,0.95);     /* card */
  --mp-bg-glass-soft: rgba(255,255,255,0.2); /* lang toggle */
  --mp-bg-glass-line: rgba(255,255,255,0.3); /* glass border */

  --mp-border: var(--mp-gray-300);
  --mp-border-soft: var(--mp-gray-200);

  /* ---------- ELEVATION (whitepaper card system) ---------- */
  --mp-shadow-card:       0 15px 35px rgba(0,0,0,0.10);
  --mp-shadow-card-hover: 0 25px 50px rgba(0,0,0,0.15);
  --mp-shadow-button:     0 5px 15px rgba(102, 126, 234, 0.4);
  --mp-shadow-pill:       0 2px 8px rgba(0, 0, 0, 0.1);

  /* ---------- RADII ---------- */
  --mp-radius-xs: 4px;     /* code chip */
  --mp-radius-sm: 6px;     /* logic block */
  --mp-radius-md: 15px;    /* footer container */
  --mp-radius-lg: 20px;    /* card, button group */
  --mp-radius-pill: 25px;  /* CTA button, lang pill */
  --mp-radius-full: 9999px;

  /* ---------- SPACING (loose 4px scale, derived from observed paddings) ---------- */
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;
  --mp-space-10: 40px;
  --mp-space-15: 60px;

  /* ---------- BLUR (glassmorphism) ---------- */
  --mp-blur-card: blur(10px);

  /* ---------- TYPE FAMILIES ---------- */
  --mp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
  --mp-font-display: 'Helvetica Neue', 'Inter', Arial, sans-serif; /* hero h1 */
  --mp-font-cjk: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
                 'Inter', sans-serif;
  --mp-font-mono: 'BlexMono Nerd Font', 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --mp-font-mono-propo: 'BlexMono Nerd Font Propo', 'BlexMono Nerd Font', monospace;

  /* ---------- TYPE SCALE (rem-based, matches observed sizes) ---------- */
  --mp-text-xs:   12px;
  --mp-text-sm:   14px;
  --mp-text-base: 16px;
  --mp-text-md:   17.6px;  /* 1.1rem — card meta */
  --mp-text-lg:   20px;    /* phase body */
  --mp-text-xl:   24px;    /* card heading 1.5rem */
  --mp-text-2xl:  28.8px;  /* 1.8rem subhead */
  --mp-text-3xl:  32px;    /* h2 2rem */
  --mp-text-display: 72px; /* hero h1 4.5rem */

  /* ---------- WEIGHTS ---------- */
  --mp-weight-light: 300;
  --mp-weight-regular: 400;
  --mp-weight-medium: 500;
  --mp-weight-semibold: 600;
  --mp-weight-bold: 700;
  --mp-weight-extrabold: 800;

  /* ---------- LINE HEIGHTS ---------- */
  --mp-lh-tight: 1.15;
  --mp-lh-snug: 1.3;
  --mp-lh-body: 1.6;

  /* ---------- LETTER SPACING ---------- */
  --mp-tracking-tight: -1px;  /* hero display */
  --mp-tracking-normal: 0;

  /* ---------- MOTION ---------- */
  --mp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mp-dur-fast: 0.15s;
  --mp-dur-base: 0.3s;
  --mp-dur-slow: 0.6s;
  --mp-float-cycle: 6s;        /* mushroom drift */
}

/* ============================================================
 * SEMANTIC TYPE — drop into any page to get the canonical look.
 * ============================================================ */

body {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-text-base);
  line-height: var(--mp-lh-body);
  color: var(--mp-fg-1);
  background: var(--mp-bg-canvas);
  margin: 0;
}

/* Display — hero, white-paper headers. Use with class .mp-on-grad to clip the
   wordmark gradient onto the text. */
.mp-display,
h1.mp-display {
  font-family: var(--mp-font-display);
  font-size: var(--mp-text-display);
  font-weight: var(--mp-weight-bold);
  letter-spacing: var(--mp-tracking-tight);
  line-height: var(--mp-lh-tight);
  margin: 0 0 var(--mp-space-4) 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.mp-display.mp-on-grad {
  background: var(--mp-grad-wordmark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mp-subhead,
h2.mp-subhead {
  font-size: var(--mp-text-2xl);
  font-weight: var(--mp-weight-light);
  opacity: 0.9;
  margin: 0;
}

h1, .mp-h1 {
  font-size: 48px;
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-lh-tight);
  letter-spacing: -0.5px;
  margin: 0 0 var(--mp-space-5) 0;
}

h2, .mp-h2 {
  font-size: var(--mp-text-3xl);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-lh-snug);
  border-bottom: 1px solid var(--mp-border);
  padding-bottom: var(--mp-space-2);
  margin: 0 0 var(--mp-space-4) 0;
}

h3, .mp-h3 {
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-lh-snug);
  color: var(--mp-gray-800);
  margin: 0 0 var(--mp-space-4) 0;
}

p, .mp-body {
  font-size: var(--mp-text-base);
  line-height: var(--mp-lh-body);
  color: var(--mp-fg-2);
  margin: 0 0 var(--mp-space-4) 0;
}

.mp-body-lg {
  font-size: var(--mp-text-lg);
  color: var(--mp-gray-600);
  margin-bottom: var(--mp-space-8);
}

.mp-meta {
  font-size: var(--mp-text-md);
  color: var(--mp-fg-3);
}

code, .mp-code {
  font-family: var(--mp-font-mono);
  font-size: 0.9em;
  background: var(--mp-gray-200);
  color: var(--mp-gray-600);
  padding: 0.2rem 0.5rem;
  border-radius: var(--mp-radius-xs);
}

/* ============================================================
 * SIGNATURE COMPONENT STYLES (re-use across UI kits)
 * ============================================================ */

.mp-card {
  background: var(--mp-bg-glass);
  border: 1px solid var(--mp-bg-glass-line);
  border-radius: var(--mp-radius-lg);
  padding: 30px;
  box-shadow: var(--mp-shadow-card);
  backdrop-filter: var(--mp-blur-card);
  position: relative;
  overflow: hidden;
  transition: all var(--mp-dur-base) var(--mp-ease);
}
.mp-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--mp-shadow-card-hover);
}
.mp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--mp-grad-spore);
}

.mp-btn {
  display: inline-block;
  padding: 12px 25px;
  background: var(--mp-grad-mycelium);
  color: var(--mp-fg-inverse);
  text-decoration: none;
  border-radius: var(--mp-radius-pill);
  font-weight: var(--mp-weight-medium);
  border: 0;
  cursor: pointer;
  transition: all var(--mp-dur-base) var(--mp-ease);
}
.mp-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-button);
}

.mp-glass-pill {
  background: var(--mp-bg-glass-soft);
  border: 1px solid var(--mp-bg-glass-line);
  border-radius: var(--mp-radius-pill);
  backdrop-filter: var(--mp-blur-card);
  padding: 8px;
}

/* Medallion — the circular illustration container atop each card. */
.mp-medallion {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform var(--mp-dur-base) var(--mp-ease);
}
.mp-medallion:hover { transform: scale(1.1) rotate(5deg); }