/* Lingo — shared design tokens. Duolingo-archetype palette (dossier §4, §essence).
   Open rounded faces stand in for Feather Bold/DIN (dossier honesty §5). */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap');

:root{
  /* brand + currency colors, exact from dossier §4 */
  --feather:#58cc02;      /* Feather Green */
  --feather-dk:#58a700;   /* button bottom-border / pressed */
  --feather-tint:#d7ffb8; /* success flood */
  --mask-green:#89e219;   /* lighter accent */
  --xp:#ffc800;           /* XP yellow */
  --xp-dk:#e6a100;
  --streak:#ff9600;       /* streak orange */
  --heart:#ff4b4b;        /* hearts red */
  --heart-dk:#e63f3f;
  --heart-tint:#ffdfe0;   /* fail flood */
  --gem:#1cb0f6;          /* gems blue */
  --gem-dk:#1899d6;
  --league:#ce82ff;       /* leagues purple */
  --gold:#feb700;

  /* neutrals — designed, not default gray */
  --eel:#4b4b4b;          /* primary text */
  --wolf:#afafaf;         /* disabled / secondary */
  --swan:#e5e5e5;         /* borders */
  --polar:#f7f7f7;        /* panel bg */
  --snow:#ffffff;
  --hare:#777777;

  --ink:#3c3c3c;
  --radius:16px;
  --radius-sm:12px;
  --tap:cubic-bezier(.34,1.56,.64,1); /* spring overshoot for hops */
  --ease:cubic-bezier(.25,.1,.25,1);

  --shadow-key:0 4px 0; /* the 3D bottom-border trick uses solid, not blur */
  --maxw:1080px;
  --font-display:'Baloo 2',system-ui,sans-serif;
  --font-ui:'Nunito',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  color:var(--eel);
  background:var(--snow);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.05;color:var(--eel);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--gem);outline-offset:2px;border-radius:6px}

/* ---- the signature 3D button ---- */
.btn3d{
  --c:var(--feather); --cd:var(--feather-dk); --tx:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-weight:800;font-size:15px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--tx);background:var(--c);
  padding:14px 22px;border-radius:var(--radius);
  box-shadow:var(--shadow-key) var(--cd);
  transition:transform .06s var(--ease),box-shadow .06s var(--ease),filter .15s;
  user-select:none;-webkit-user-select:none;white-space:nowrap;
}
.btn3d:hover{filter:brightness(1.04)}
.btn3d:active,.btn3d.pressed{transform:translateY(4px);box-shadow:0 0 0 var(--cd)}
.btn3d[disabled],.btn3d.is-disabled{--c:var(--swan);--cd:var(--swan);--tx:var(--wolf);box-shadow:none;cursor:default;pointer-events:none}
.btn3d.blue{--c:var(--gem);--cd:var(--gem-dk)}
.btn3d.red{--c:var(--heart);--cd:var(--heart-dk)}
.btn3d.gold{--c:var(--xp);--cd:var(--xp-dk);--tx:var(--eel)}
.btn3d.ghost{--c:#fff;--cd:var(--swan);--tx:var(--gem);border:2px solid var(--swan)}
.btn3d.purple{--c:var(--league);--cd:#a568cc}
.btn3d.lg{font-size:17px;padding:16px 28px}
.btn3d.wide{width:100%}

/* ---- utility ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.card{background:#fff;border:2px solid var(--swan);border-radius:var(--radius);}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;border-radius:999px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono-eyebrow{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:13px;color:var(--feather)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.05s !important}
}