@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Nunito:wght@500;700;800;900&display=swap");

:root {
  --mj-blue: #3b82f6;
  --mj-cyan: #22d3ee;
  --mj-yellow: #fbbf24;
  --mj-coral: #fb7185;
  --mj-lime: #84cc16;
  --mj-purple: #a855f7;
  --mj-cream: #fff8ec;
  --mj-sky: #eaf8ff;
  --mj-ink: #10204a;
  --mj-text: #1e293b;

  --mj-white: #ffffff;
  --mj-muted: #475569;
  --mj-soft-text: #64748b;
  --mj-light-bg: #fff8ec;
  --mj-card-bg: #ffffff;
  --mj-line: rgba(16, 32, 74, 0.12);
  --mj-panel: rgba(255, 255, 255, 0.86);
  --mj-panel-strong: #ffffff;
  --mj-shadow-low: 0 5px 0 rgba(59, 130, 246, 0.06), 0 12px 26px rgba(16, 32, 74, 0.08);
  --mj-shadow-medium: 0 7px 0 rgba(59, 130, 246, 0.09), 0 20px 44px rgba(16, 32, 74, 0.12);
  --mj-shadow-high: 0 12px 0 rgba(251, 191, 36, 0.14), 0 30px 68px rgba(16, 32, 74, 0.18);
  --mj-shadow: 0 18px 0 rgba(16, 32, 74, 0.08), 0 28px 64px rgba(59, 130, 246, 0.16);
  --mj-shadow-soft: var(--mj-shadow-medium);
  --mj-radius-sm: 16px;
  --mj-radius: 24px;
  --mj-radius-lg: 34px;
  --mj-content: 1180px;
  --mj-font-heading: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --mj-font-body: "Nunito", ui-rounded, system-ui, sans-serif;

  --page: var(--mj-sky);
  --page-2: var(--mj-cream);
  --panel: var(--mj-panel);
  --panel-strong: var(--mj-panel-strong);
  --ink: var(--mj-ink);
  --muted: var(--mj-muted);
  --soft: var(--mj-soft-text);
  --line: var(--mj-line);
  --lime: var(--mj-lime);
  --blue: var(--mj-blue);
  --purple: var(--mj-purple);
  --pink: var(--mj-coral);
  --danger: var(--mj-coral);
  --shadow: var(--mj-shadow-soft);
  --shadow-glow: 0 0 42px rgba(53, 199, 255, 0.18);
  --radius: var(--mj-radius);
  --content: var(--mj-content);
  --lime-2: #d7ff72;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--mj-ink);
  font-family: var(--mj-font-body);
  line-height: 1.58;
  background:
    radial-gradient(circle at -4% 12%, rgba(251, 191, 36, 0.24) 0 86px, transparent 87px),
    radial-gradient(circle at 104% 8%, rgba(34, 211, 238, 0.27) 0 116px, transparent 117px),
    radial-gradient(circle at 96% 72%, rgba(132, 204, 22, 0.12) 0 124px, transparent 125px),
    linear-gradient(180deg, var(--mj-sky) 0%, #ffffff 34%, var(--mj-cream) 68%, #ffffff 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
.brand-name,
.dash-brand,
.auth-brand {
  color: var(--mj-ink);
  font-family: var(--mj-font-heading);
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

p {
  color: var(--mj-muted);
  line-height: 1.68;
}

.eyebrow {
  color: var(--mj-blue);
  letter-spacing: 0.08em;
}