@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
}

/* V3 "WALL.DEV Learn" tokens: the single source for light and dark themes. */
:root {
  color-scheme: light;
  --font-ui: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --font-numbers: var(--font-ui);
  --canvas: #f8f7fd;
  --surface: #ffffff;
  --surface-soft: #f3f0fb;
  --ink: #1b1631;
  --muted: #6b6585;
  --line: #ece8fa;
  --line-strong: #b9b3d3;
  --indigo: #7655eb;
  --action: #7655eb;
  --action-hover: #6448e0;
  --action-pressed: #5b3fd1;
  --indigo-soft: #f1edff;
  --blue: #537bff;
  --blue-soft: #eaf1ff;
  --teal: #20b887;
  --teal-ink: #0f766e;
  --teal-soft: #e5f8f3;
  --amber: #ffb454;
  --amber-ink: #92400e;
  --amber-soft: #fff4dc;
  --navy: #111827;
  --stage: #17233d;
  --stage-line: #35415c;
  --stage-muted: #b8c4dc;
  --danger: #b4233c;
  --danger-soft: #fff0f2;
  --focus: #5b3fd1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --shadow-card: 0 6px 24px #4c34aa14;
  --shadow-hover: 0 10px 28px #4c34aa1f;
  --sidebar-width: 224px;
  --motion-fast: 160ms;
  --motion-enter: 220ms;
  --streak: #f59e0b;
  --streak-soft: #fff4dc;
  --coral: #e2557a;
  --coral-soft: #fdecf1;
  --bottom-bar-height: 68px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #121024;
  --surface: #1c1936;
  --surface-soft: #26223f;
  --ink: #f4f2ff;
  --muted: #b8b3d1;
  --line: #332e52;
  --line-strong: #6e698e;
  --indigo-soft: #2b2350;
  --action: #a78bfa;
  --action-hover: #bda5ff;
  --action-pressed: #cdbaff;
  --teal-soft: #173d36;
  --teal-ink: #88e4ca;
  --amber-soft: #3d3024;
  --amber-ink: #ffd19b;
  --blue-soft: #222e50;
  --danger-soft: #462436;
  --danger: #ffa4bc;
  --focus: #c4b1ff;
  --streak: #ffc062;
  --streak-soft: #3d3024;
  --coral: #ff9bb0;
  --coral-soft: #46202d;
  --shadow-card: 0 6px 24px #0000002e;
}

[data-level="A1"] { --level-ink: #0f766e; --level-soft: #e5f8f3; --level-accent: #14b8a6; }
[data-level="A2"] { --level-ink: #1d4ed8; --level-soft: #eaf1ff; --level-accent: #2563eb; }
[data-level="B1"] { --level-ink: #4937b9; --level-soft: #eeedff; --level-accent: #6366f1; }
[data-level="B2"] { --level-ink: #92400e; --level-soft: #fff4dc; --level-accent: #f59e0b; }

[data-area="grammar"] { --area-ink: #4937b9; --area-soft: #eeedff; }
[data-area="vocabulary"] { --area-ink: #92400e; --area-soft: #fff4dc; }
[data-area="speaking"], [data-area="pronunciation"] { --area-ink: #0f766e; --area-soft: #e5f8f3; }
[data-area="listening"], [data-area="real-life"] { --area-ink: #1d4ed8; --area-soft: #eaf1ff; }
[data-area="reading"], [data-area="writing"] { --area-ink: #4937b9; --area-soft: #eeedff; }

[data-team-index="0"] { --team-color: #2563eb; --team-soft: #eaf1ff; --team-name: "Blue"; }
[data-team-index="1"] { --team-color: #0f766e; --team-soft: #e5f8f3; --team-name: "Teal"; }
[data-team-index="2"] { --team-color: #b45309; --team-soft: #fff4dc; --team-name: "Amber"; }
[data-team-index="3"] { --team-color: #6d28d9; --team-soft: #f3ecff; --team-name: "Violet"; }
[data-team-index="4"] { --team-color: #be123c; --team-soft: #fff0f3; --team-name: "Rose"; }
[data-team-index="5"] { --team-color: #475569; --team-soft: #edf1f6; --team-name: "Slate"; }