/* ==========================================================================
   mindboost. — Freedom brand theme (LIGHT)
   --------------------------------------------------------------------------
   The single source of brand truth for the lesson shell. Both the menu
   (index.html) and the content pages (module.html) link this file — that
   shared link IS the menu<->page connection. Each page keeps its own
   layout CSS on top, so they stay visually distinct.

   Vendored from the mindboost Design System (light-theme/colors_and_type.css).
   mindboost is a LIGHT system: white / warm-grey paper canvas, #0d0d0d ink
   reserved for type, hot pink (#E91E63) doing ~25% of the work. No dark theme.
   Sources matched: mindboostlearning.com (live), calebfoster.ai (sister).

   Client themes (e.g. themes/baxter-storey.css) override the tokens below;
   they do not replace this file.
   ========================================================================== */

/* Archivo Black + Poppins 300/800/900 stay on the CDN (no local files for
   those weights). Poppins 400/500/600/700 are self-hosted below. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;800;900&family=Archivo+Black&display=swap");

/* ── Self-hosted Poppins (brand upload) ───────────────────────────────── */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
}

:root {

  /* ── Brand / Base palette ────────────────────────────────────────── */
  --mb-pink:              #E91E63;
  --mb-pink-soft:         rgba(233,30,99,0.08);
  --mb-pink-tint:         #FFF5F8;          /* paper-pink — tinted surface */
  --mb-pink-strong:       #C81254;          /* hover state */

  --mb-slate:             #455A64;
  --mb-slate-soft:        rgba(69,90,100,0.10);
  --mb-slate-strong:      #37474F;

  /* Light neutrals — the new editorial canvas */
  --mb-ink:               #0d0d0d;          /* structural dark for type & contrast bands */
  --mb-surface:           #ffffff;          /* default card surface */
  --mb-surface-raised:    #FAFAFA;          /* hovered / lifted */
  --mb-surface-1a:        #F2F2F0;          /* alt-row surface (warm light grey) */

  /* Hairlines + borders */
  --mb-border:            rgba(13,13,13,0.08);
  --mb-border-strong:     rgba(13,13,13,0.20);
  --mb-border-accent:     rgba(233,30,99,0.45);

  /* Pure */
  --mb-white:             #ffffff;
  --mb-black:             #000000;

  /* Text on light */
  --mb-text:              #0d0d0d;
  --mb-text-muted:        rgba(13,13,13,0.55);
  --mb-text-subtle:       rgba(13,13,13,0.30);
  --mb-text-faint:        rgba(13,13,13,0.10);

  /* Studio team colors — internal tooling only */
  --mb-role-caleb:        #2A6FDB;          /* slightly deeper for AA on white */
  --mb-role-amanda:       #E91E63;
  --mb-role-lily:         #7C5AE0;
  --mb-role-owen:         #C58200;
  --mb-role-stu:          #0C8A5B;

  /* Validation — readable on light surfaces */
  --mb-success:           #0C8A5B;
  --mb-success-fg:        #064A30;
  --mb-error:             #C62828;
  --mb-error-fg:          #8A1A1A;
  --mb-warning:           #C56800;
  --mb-warning-fg:        #6B3A00;

  /* ── Semantic tokens ─────────────────────────────────────────────── */

  --mb-accent:            var(--mb-pink);
  --mb-accent-inverted:   var(--mb-white);
  --mb-accent-soft:       var(--mb-pink-soft);
  --mb-accent-hover:      var(--mb-pink-strong);

  --mb-bg:                var(--mb-white);
  --mb-fg:                var(--mb-text);
  --mb-fg-muted:          var(--mb-text-muted);
  --mb-fg-subtle:         var(--mb-text-subtle);

  --mb-card-bg:           var(--mb-surface);
  --mb-card-border:       var(--mb-border);
  --mb-card-bg-hover:     var(--mb-surface-raised);
  --mb-card-border-hover: var(--mb-border-accent);

  --mb-btn-bg:            var(--mb-accent);
  --mb-btn-fg:            var(--mb-accent-inverted);
  --mb-btn-bg-hover:      var(--mb-accent-hover);

  --mb-btn-ghost-bg:      transparent;
  --mb-btn-ghost-fg:      var(--mb-ink);
  --mb-btn-ghost-border:  var(--mb-ink);

  --mb-btn-disabled:      #E5E5E3;
  --mb-btn-disabled-fg:   rgba(13,13,13,0.30);

  --mb-progress:          var(--mb-accent);
  --mb-progress-bg:       rgba(13,13,13,0.10);
  --mb-focus-ring:        var(--mb-accent);


  /* ── Typography — base ───────────────────────────────────────────── */

  /* Display can be overridden per-page (Poppins 900 tight, Archivo Black, etc.)
     by setting --mb-font-display on a wrapper. */
  --mb-font-heading:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-display:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-body:         "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-mono:         ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;

  --mb-fs-xs:             0.625rem;          /* 10 — eyebrow */
  --mb-fs-sm:             0.75rem;
  --mb-fs-base:           0.875rem;
  --mb-fs-md:             1rem;
  --mb-fs-lg:             1.25rem;
  --mb-fs-xl:             1.75rem;
  --mb-fs-2xl:            clamp(2rem, 5vw, 3.2rem);
  --mb-fs-3xl:            clamp(2.4rem, 6.5vw, 4.5rem);

  --mb-fw-regular:        400;
  --mb-fw-medium:         500;
  --mb-fw-semibold:       600;
  --mb-fw-bold:           700;
  --mb-fw-heavy:          800;
  --mb-fw-black:          900;

  /* Display weight — overridable by the type-variant tweak */
  --mb-fw-display:        800;
  /* Display tracking — overridable */
  --mb-tracking-display:  -0.025em;

  --mb-tracking-hero:     -0.04em;
  --mb-tracking-h1:       -0.025em;
  --mb-tracking-body:     0;
  --mb-tracking-label:    0.15em;
  --mb-tracking-eyebrow:  0.2em;

  --mb-lh-tight:          1.02;
  --mb-lh-snug:           1.15;
  --mb-lh-normal:         1.5;
  --mb-lh-relaxed:        1.65;


  /* ── Shape / shadow / motion ─────────────────────────────────────── */

  --mb-radius-sm:         8px;
  --mb-radius:            12px;
  --mb-radius-md:         16px;
  --mb-radius-lg:         20px;
  --mb-radius-xl:         30px;
  --mb-radius-pill:       9999px;

  /* Pink-tinted lift — replaces the heavy black drop-shadow of dark theme */
  --mb-shadow-sm:         0 4px 12px rgba(13,13,13,0.06);
  --mb-shadow-md:         0 16px 48px rgba(233,30,99,0.12), 0 4px 12px rgba(13,13,13,0.04);
  --mb-shadow-lg:         0 24px 64px rgba(233,30,99,0.18), 0 8px 24px rgba(13,13,13,0.06);
  --mb-shadow-pink:       0 0 0 1px rgba(233,30,99,0.20), 0 20px 56px rgba(233,30,99,0.18);

  --mb-transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --mb-transition:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --mb-transition-slow:   0.55s cubic-bezier(0.4, 0, 0.2, 1);


  /* ── Spacing ─────────────────────────────────────────────────────── */

  --mb-space-2xs:         0.25rem;
  --mb-space-xs:          0.5rem;
  --mb-space-sm:          0.75rem;
  --mb-space-md:          1rem;
  --mb-space-lg:          1.5rem;
  --mb-space-xl:          2.5rem;
  --mb-space-2xl:         4rem;
  --mb-space-3xl:         6rem;

}


/* ============================================================================
   Element-level defaults
   ============================================================================ */

html, body {
  background: var(--mb-bg);
  color: var(--mb-fg);
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-md);
  line-height: var(--mb-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mb-font-heading);
  color: var(--mb-fg);
  line-height: var(--mb-lh-snug);
  letter-spacing: var(--mb-tracking-h1);
  font-weight: var(--mb-fw-heavy);
}

/* Mega display — uses --mb-font-display so it can be re-skinned per page */
.mb-display, h1.mb-display {
  font-family: var(--mb-font-display);
  font-size: var(--mb-fs-3xl);
  font-weight: var(--mb-fw-display);
  line-height: var(--mb-lh-tight);
  letter-spacing: var(--mb-tracking-display);
}

h1  { font-family: var(--mb-font-display); font-size: var(--mb-fs-2xl); font-weight: var(--mb-fw-display); letter-spacing: var(--mb-tracking-display); line-height: var(--mb-lh-tight); }
h2  { font-size: 1.6rem; font-weight: var(--mb-fw-heavy); letter-spacing: var(--mb-tracking-h1); }
h3  { font-size: var(--mb-fs-xl); font-weight: var(--mb-fw-bold);  }
h4  { font-size: var(--mb-fs-lg); font-weight: var(--mb-fw-bold);  }

p { color: var(--mb-fg); line-height: var(--mb-lh-relaxed); }
p.mb-lede { font-size: var(--mb-fs-lg); color: var(--mb-fg-muted); max-width: 60ch; }

/* The mindboostlearning.com emphasis signature — colour, not italic. */
.mb-pink, h1 .mb-pink, h2 .mb-pink, h3 .mb-pink { color: var(--mb-accent); }
.mb-pink-italic { color: var(--mb-accent); font-style: italic; }

/* Eyebrows */
.mb-eyebrow {
  font-size: var(--mb-fs-xs);
  font-weight: var(--mb-fw-heavy);
  text-transform: uppercase;
  letter-spacing: var(--mb-tracking-eyebrow);
  color: var(--mb-accent);
}
.mb-label {
  font-size: var(--mb-fs-sm);
  font-weight: var(--mb-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mb-tracking-label);
  color: var(--mb-fg-muted);
}

.mb-wordmark {
  font-family: var(--mb-font-heading);
  font-weight: var(--mb-fw-heavy);
  letter-spacing: var(--mb-tracking-h1);
  color: var(--mb-fg);
}
.mb-wordmark .dot { color: var(--mb-accent); }

a { color: var(--mb-accent); text-decoration: none; }
a:hover { color: var(--mb-accent-hover); }

code, pre, kbd { font-family: var(--mb-font-mono); font-size: 0.9em; }

::selection { background: var(--mb-accent); color: var(--mb-accent-inverted); }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mb-transition-fast: 0ms;
    --mb-transition:      0ms;
    --mb-transition-slow: 0ms;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ============================================================================
   Lesson-shell compatibility + background treatments
   ----------------------------------------------------------------------------
   The static pages predate this theme and reference a few token names that the
   DS expresses differently. Alias them here so linking this file is a drop-in
   replacement for each page's old inline :root block.
   ============================================================================ */

:root {
  /* Card lift aliases (pages use --mb-shadow-card / --mb-shadow-hover) */
  --mb-shadow-card:   var(--mb-shadow-md);
  --mb-shadow-hover:  var(--mb-shadow-lg);

  /* Single brand transition alias used by the menu/page layout CSS */
  --mb-transition-default: var(--mb-transition);

  /* ── Background scrims (from the DS image-overlay rules) ──────────────────
     media.js sets the *image* (--*-bg-image) and the scrim *strength*
     (--*-bg-scrim, 0–1) per the lesson config; these gradients use them so
     text/cards stay legible over photography. A strength of 0 = no scrim. */

  /* Hero: light ink wash head-to-foot, plus a stronger bottom gradient. */
  --mb-scrim-hero:
    linear-gradient(rgba(13,13,13,0.10), rgba(13,13,13,0.40));
  --mb-scrim-hero-foot:
    linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%);

  /* Menu card image overlay: clear at top, dark at the caption. */
  --mb-scrim-card:
    linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.60) 100%);
}