/* GENERATED by scripts/sync-tokens.sh from KreateMind Design System/tokens. Do not edit. */
/* ---- colors.css ---- */
:root{
/* ---- Brand palette, sampled from the KreateMind brand guideline PDF ---- */
--km-violet:#4b2fbd;        /* primary brand colour: logo tile, headings, CTAs */
--km-violet-ink:#2f1c7a;    /* pressed / deep violet, derived */
--km-violet-soft:#ede9fc;   /* violet tint surface, derived */
--km-amber:#fcb305;         /* logo "M" + star */
--km-amber-warm:#fea501;    /* palette amber */
--km-orange:#fd4f04;
--km-green:#01a664;
--km-pink:#fd558b;
--km-sky:#9dc4ee;           /* logo face / cloud */
--km-sky-pale:#cadcfd;
--km-blue-light:#9cc2fb;
--km-cream:#fef7ec;
--km-mint:#afdcd8;
--km-ink:#383838;
--km-ink-soft:#6b6b6b;      /* derived */
--km-paper:#fcfbff;         /* near-white used in the logo + layouts */
--km-off-white:#f7f7f7;
--km-black:#000000;         /* only for the face features in the mark */

/* ---- Semantic aliases ---- */
--surface-page:var(--km-paper);
--surface-page-warm:var(--km-cream);
--surface-card:#ffffff;
--surface-sunken:var(--km-off-white);
--surface-brand:var(--km-violet);
--surface-brand-soft:var(--km-violet-soft);
--surface-sunny:var(--km-amber);
--surface-sky:var(--km-sky-pale);
--surface-mint:var(--km-mint);

--text-heading:var(--km-violet);
--text-body:var(--km-ink);
--text-muted:var(--km-ink-soft);
--text-on-brand:var(--km-paper);
--text-on-sunny:var(--km-violet);
--text-link:var(--km-violet);
--text-link-hover:var(--km-violet-ink);

--border-soft:#e6e2f5;
--border-strong:var(--km-violet);

--accent-play:var(--km-pink);
--accent-build:var(--km-orange);
--accent-grow:var(--km-green);
--accent-imagine:var(--km-sky);
--accent-learn:var(--km-amber);

--state-hover-brand:#5b3dd4;   /* violet, lightened */
--state-active-brand:var(--km-violet-ink);
--state-hover-sunny:#ffc02e;
--state-active-sunny:#e39f00;
--focus-ring:var(--km-amber);
}

/* ---- typography.css ---- */
:root{
--font-display:'Baloo 2','Nunito',system-ui,sans-serif; /* substitute for "Superbusy" */
--font-body:'Nunito',system-ui,sans-serif;

--text-3xl:56px;
--text-2xl:42px;
--text-xl:32px;
--text-lg:24px;
--text-md:18px;
--text-sm:16px;
--text-xs:13px;
--text-eyebrow:12px;

--weight-regular:400;
--weight-semibold:600;
--weight-bold:700;
--weight-extrabold:800;

--leading-tight:1.08;
--leading-snug:1.25;
--leading-body:1.55;

--tracking-wordmark:0.22em;  /* the guideline sets the wordmark as K r e a t e M i n d */
--tracking-eyebrow:0.18em;
--tracking-tight:-0.01em;
}

/* ---- spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--gutter-page:32px;
--max-content:1160px;
}

/* ---- shape.css ---- */
:root{
/* The logo tile radius is 51.06 on a 522.67 square = 9.8% — the brand's "soft square". */
--radius-sm:8px;
--radius-md:14px;
--radius-lg:24px;
--radius-tile:9.8%;
--radius-pill:999px;

--border-width:2px;

--shadow-soft:0 6px 18px rgba(75,47,189,.10);
--shadow-lift:0 14px 34px rgba(75,47,189,.16);
--shadow-inset-sunny:inset 0 -3px 0 rgba(0,0,0,.10);
}

/* ---- motion.css ---- */
:root{
--ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:360ms; /* @kind other */
--hover-lift:translateY(-2px); /* @kind other */
--press-scale:scale(.97); /* @kind other */
}