/* ===== Mafy design system -tokenit =====
   Kopio aiai-repon shared/tokens.css:stä, jotta opettaja käyttää samaa
   visuaalista ilmettä. Tänne kuuluvat vain muuttujat — ei komponenttisääntöjä. */

/* ===== Design system tokens (VocabularyBoost) =====
   Additive token set. Components opt in via var(--token); the client view maps
   its semantic variables onto these tokens (see body.client-view below). */
:root {
  /* Blue (primary brand) */
  --blue-50: #eff6ff;
  --blue-100: #cde4ff;
  --blue-200: #a8d1ff;
  --blue-300: #7db8ff;
  --blue-400: #54a2fd;
  --blue-500: #2d8dfd;
  --blue-600: #0066fd;
  --blue-700: #0043a8;
  --blue-800: #023880;
  --blue-900: #01317d;

  /* Gray (neutrals) */
  --gray-50: #f8fafc;
  --gray-100: #f7f9fc;
  --gray-200: #edf1f5;
  --gray-300: #e2e8f0;
  --gray-400: #cbd5e1;
  --gray-500: #94a3b8;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Accent (warm / orange) */
  --accent-50: #fffbf5;
  --accent-100: #faeed9;
  --accent-200: #f7ddb3;
  --accent-300: #f7ca73;
  --accent-400: #fdba2d;
  --accent-500: #fdab04;
  --accent-600: #d99003;
  --accent-700: #884e04;
  --accent-800: #6b4005;
  --accent-900: #683d05;

  /* Green (success / progress) */
  --green-50: #f0fdf4;
  --green-100: #e7f6ed;
  --green-200: #c1e4cf;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #058337;
  --green-800: #046c2d;
  --green-900: #0f5132;

  /* Red (error / danger) */
  --red-50: #fef2f2;
  --red-100: #ffe5e5;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #b00020;
  --red-900: #7f1d1d;

  /* Yellow (warning) */
  --yellow-50: #fffbeb;
  --yellow-100: #fff8e5;
  --yellow-200: #ffe2a8;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --yellow-700: #b45309;
  --yellow-800: #8a5700;
  --yellow-900: #78350f;

  /* Teal (mastery) */
  --teal-50: #dff6f6;
  --teal-100: #c2f8fc;
  --teal-200: #80f0f5;
  --teal-300: #4fdbe1;
  --teal-400: #21c0c7;
  --teal-500: #219ea4;
  --teal-600: #188084;
  --teal-700: #11696c;
  --teal-800: #0d5255;
  --teal-900: #0a2828;

  --white: #ffffff;
  --black: #000000;

  /* Semantic */
  --color-success: var(--green-700);
  --color-success-hover: var(--green-800);
  --color-success-bg: var(--green-100);
  --color-success-border: var(--green-200);
  --color-success-text: var(--green-900);
  --color-error: var(--red-800);
  --color-error-hover: var(--red-900);
  --color-error-bg: var(--red-100);
  --color-error-border: #f5c2c7;
  --color-error-text: var(--red-800);
  --color-warning: var(--yellow-500);
  --color-warning-hover: var(--yellow-600);
  --color-warning-bg: var(--yellow-100);
  --color-warning-border: var(--yellow-200);
  --color-warning-text: var(--yellow-800);
  --color-info: var(--blue-600);
  --color-info-hover: var(--blue-700);
  --color-info-bg: var(--blue-100);
  --color-info-border: var(--blue-200);
  --color-info-text: var(--blue-900);
  --color-feedback-bg: var(--yellow-100);
  --color-feedback-border: var(--yellow-200);
  --color-feedback-text: var(--color-warning-text);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 2rem;
  --space-4xl: 2.5rem;
  --space-5xl: 3rem;
  --space-6xl: 5rem;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1rem;
  --text-lg: 1.05rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.75rem;
  --text-5xl: 2.4rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 18px 45px rgba(15, 30, 55, 0.18);
  --shadow-3xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-button: 0px 3px 6px rgba(0, 0, 0, 0.12);
  --shadow-button-hover: 0px 5px 12px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.06);
}