/* eLearning Designer's Academy — Design System — generated from tokens.json */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sticky Notes";
  src: url("/fonts/Sticky_Notes.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="light"] {
  --blue: #2296cf;
  --blue-hover: #0071bc;
  --blue-deep: #0071bc;
  --blue-light: #91cbe7;
  --cyan: #2cc3eb;
  --red: #ee4830;
  --red-hover: #d04725;
  --pink: #ee2354;
  --orange: #f29d1f;
  --purple: #884b9d;
  --green: #34a851;
  --amber: #f29d1f;
  --ink: #404040;
  --ink-soft: #595959;
  --ink-faint: #8a8a8a;
  --line: #e7e9ec;
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --surface-3: #f2f2f2;
  --white: #ffffff;
  --kb-cyan: #28c4eb;
  --kb-pink: #fe0f51;
  --kb-green: #34a852;
  --kb-amber: #f39c13;
  --kb-navy: #1b1464;
  --kb-purple: #8e43ac;
  --kb-teal: #1cbc9d;
  --kb-gold: #e3af34;
  --kb-slate: #34495e;
  --tint-cyan: #d4f3fb;
  --tint-pink: #ffcfdc;
  --tint-green: #d6eedc;
  --tint-amber: #fdebd0;
  --tint-laven: #d1d0e0;
  --tint-purple: #e8d9ee;
  --tint-teal: #d2f2eb;
  --tint-gold: #f9efd6;
  --tint-slate: #d6dbdf;
  --shadow-xs: 0 1px 2px rgba(33,46,64,.06);
  --shadow-sm: 0 2px 8px rgba(33,46,64,.07);
  --shadow-md: 0 8px 24px rgba(33,46,64,.09);
  --shadow-lg: 0 20px 48px rgba(33,46,64,.12);
}

:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-sub: 'Varela Round', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-hand: 'Sticky Notes', 'Caveat', cursive;
}

.eda-display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.eda-h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.eda-h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.eda-h3 {
  font-family: var(--font-sub);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.eda-lead {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}
.eda-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
}
.eda-small {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.eda-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.eda-hand {
  font-family: var(--font-hand);
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
}