/* LingoMax design tokens (from the design-system handoff, 10.10.2026) */
:root{
/* Brand */
--yellow-500:#FFD23F;--yellow-300:#FFE27A;--yellow-hover:#FFDC66;
--coral-500:#F26B5B;--coral-600:#C24A3B;--coral-100:#FDE3DF;
--teal-500:#25B3AA;--teal-700:#128279;--teal-300:#7FE0D8;--teal-100:#E3F5F3;
--navy:#14203A;--navy-raised:#1E2C4A;--navy-deep:#0B1222;--navy-line:#2E3D5E;--navy-ink:#070D1A;
--cream:#FFFBF0;--sand:#EADFC2;--white:#FFFFFF;--paper:#EEF1F7;
/* Text tints */
--mist-200:#C9D2E4;--mist-300:#AEB8CC;--mist-400:#9FAAC2;
--slate-600:#4D5872;--slate-700:#2A3550;
--youtube:#C4302B;
/* Semantic */
--surface-page:var(--navy);--surface-raised:var(--navy-raised);--surface-deep:var(--navy-deep);
--surface-light:var(--white);--surface-light-alt:var(--paper);--surface-card-light:var(--white);--surface-accent:var(--yellow-500);
--text-on-dark:var(--white);--text-on-dark-muted:var(--mist-300);--text-on-dark-soft:var(--mist-200);
--text-on-light:var(--navy);--text-on-light-muted:var(--slate-600);--text-on-light-soft:var(--slate-700);
--accent-signature:var(--yellow-500);--link-on-light:var(--teal-700);--link-on-dark:var(--teal-300);
--border-on-dark:rgba(255,255,255,.12);--border-on-dark-strong:rgba(255,255,255,.28);--border-on-light:rgba(20,32,58,.10);
--focus-ring:var(--teal-500);
--level-a1:var(--yellow-500);--level-a2:var(--coral-500);--level-b1:var(--teal-500);--level-b2:var(--mist-200);
}
:root{
--font-display:"Onest",system-ui,sans-serif;
--font-body:"Onest",system-ui,sans-serif;
--font-hand:"Caveat","Segoe Print",cursive;
--fs-display:clamp(42px,6.4vw,72px); /* @kind font */
--fs-h2:clamp(30px,4.2vw,48px); /* @kind font */
--fs-h3:22px;--fs-h4:18px;--fs-lead:19px;--fs-body:17px;--fs-small:15px;--fs-caption:13px;--fs-label:12px;
--lh-display:.98; /* @kind font */
--lh-heading:1.04; /* @kind font */
--lh-title:1.15; /* @kind font */
--lh-body:1.55; /* @kind font */
--ls-display:-.045em; /* @kind font */
--ls-heading:-.04em; /* @kind font */
--ls-title:-.02em; /* @kind font */
--ls-label:.12em; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-18:72px;--space-24:96px;
--wrap-max:1080px;--wrap-pad:20px;--section-pad:72px;
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:24px;--radius-2xl:28px;--radius-device:42px;--radius-pill:999px;
--shadow-float:0 30px 60px -20px rgba(20,32,58,.45);--shadow-card:0 18px 36px -20px rgba(10,16,32,.6);--shadow-dialog:0 30px 60px -20px rgba(0,0,0,.5);
--glow-yellow:0 30px 60px -30px rgba(255,210,63,.35);
--scrim-image:linear-gradient(180deg,rgba(10,16,32,0) 40%,rgba(10,16,32,.9)); /* @kind color */
--scrim-modal:rgba(11,18,34,.72);
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--dur-fast:.12s; /* @kind other */
--dur-base:.2s; /* @kind other */
--dur-slow:.5s; /* @kind other */
}