/* ── Neft Teacher — Shared Design Tokens ── */

:root {
  /* Primary palette */
  --navy: #12355b;
  --navy-light: #18466f;
  --teal: #1fa6a2;
  --teal-light: #dff2ee;
  /* AA-grade "ink" variants for accent-colored TEXT / CTA fills on light
     surfaces (>=4.5:1). Use these when teal/amber is a foreground color;
     keep --teal/--amber for decorative fills, borders, and gradients, and
     keep gold-on-navy accents (XP, stars, certificates) as-is. */
  --teal-ink: #0c6f6b; /* ~6:1 on white; white text ~6:1 on this fill */
  --amber: #f2c15b;
  --amber-light: #fef7e0;
  --amber-ink: #8a5a00; /* ~5.9:1 on white — amber-toned text on light */
  --cream: #f7f4ec;
  --coral: #d9795d;
  --coral-light: #fce6de;

  /* Semantic */
  --bg: var(--cream);
  --card: #ffffff;
  --ink: #21313f;
  --muted: #5f6f80;
  --line: #d7e2ed;
  --success: #0f7c4a;
  --success-bg: #e6f7ef;
  --error: #b64e2f;
  --error-bg: #fef0ec;
  --hint: #875f00;
  --hint-bg: #fef7e0;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Typography — Outfit display + Hanken Grotesk body (matches family homework) */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", Calibri, "Segoe UI", system-ui, sans-serif;
}