/* MindShifting brand tokens
   Source: mindshiftingwithmitch.org (Mitch's live site, scraped 2026-05-27)
   Logo: assets/mindshifting-logo.png (720x217 PNG with transparency)
*/
:root {
  /* Primary brand */
  --ms-blue: #188BF6;        /* "Mitch On MindShifting" h1 colour */
  --ms-blue-deep: #0D6FCC;   /* hover / pressed */
  --ms-blue-soft: #E8F2FE;   /* tinted surface */

  /* Calls to action */
  --ms-coral: #FF7E84;       /* primary button — Mitch's pill CTAs */
  --ms-coral-deep: #E96670;  /* hover */
  --ms-green: #37CA37;       /* secondary CTA — "Read About Resourcefulness" */
  --ms-red: #D72A2A;         /* logo "with Mitch" italic accent */

  /* Surfaces */
  --ms-surface: #ffffff;
  --ms-surface-warm: #FFF8F4;     /* warm cream pulled from painting background */
  --ms-border: #E7E2DE;
  --ms-border-strong: #CFC8C2;

  /* Ink */
  --ms-ink: #1A1F2B;
  --ms-ink-2: #3F4756;
  --ms-ink-3: #6F7889;
  --ms-ink-4: #A2A9B6;

  /* Painted background — blue-coral gradient evoking MindShifting palette */
  --ms-bg-painting:
    radial-gradient(at 18% 22%, rgba(24,139,246,0.45) 0%, transparent 55%),
    radial-gradient(at 82% 18%, rgba(255,126,132,0.38) 0%, transparent 50%),
    radial-gradient(at 72% 78%, rgba(55,202,55,0.22) 0%, transparent 55%),
    radial-gradient(at 25% 82%, rgba(13,111,204,0.45) 0%, transparent 55%),
    linear-gradient(135deg, #B6D5F5 0%, #E5D2C0 45%, #FBD5BD 70%, #6FAEDD 100%);

  /* Shape */
  --ms-radius-card: 16px;
  --ms-radius-pill: 999px;
  --ms-radius-input: 10px;

  /* Elevation */
  --ms-shadow-card: 0 8px 32px rgba(20, 38, 68, 0.12);
  --ms-shadow-soft: 0 2px 8px rgba(20, 38, 68, 0.06);

  /* Type */
  --ms-font-display: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --ms-font-body: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
}

/* Brand button — MindShifting pill CTA (coral fill, white text) */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--ms-coral);
  color: #fff;
  border: 0;
  border-radius: var(--ms-radius-pill);
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}
.ms-btn:hover { background: var(--ms-coral-deep); }
.ms-btn:active { transform: translateY(1px); }

.ms-btn-secondary {
  background: var(--ms-blue);
}
.ms-btn-secondary:hover { background: var(--ms-blue-deep); }

.ms-btn-ghost {
  background: transparent;
  color: var(--ms-blue);
  border: 2px solid var(--ms-blue);
}
.ms-btn-ghost:hover { background: var(--ms-blue-soft); }

/* Brand wordmark + symbol header — used on both authoring UI and end-user pages */
.ms-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.ms-brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Full-page painted background */
.ms-painted-bg {
  min-height: 100vh;
  background: var(--ms-bg-painting);
  background-attachment: fixed;
}

/* Centered white card — end-user avatar surface */
.ms-hero-card {
  background: var(--ms-surface);
  border-radius: var(--ms-radius-card);
  box-shadow: var(--ms-shadow-card);
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
}