/* rozum — design tokens. Source of truth for the lesson pages and the Claude Design system. */
:root {
  /* brand */
  --ink: #14213d;          /* navy outline of the rozum wordmark */
  --ink-2: #4a5672;        /* secondary text */
  --ink-3: #7c859b;        /* hints, captions */
  --sky: #98c1d9;          /* rozum wordmark / brain fill */
  --sky-soft: #e4eef5;
  --coral: #ef7255;        /* app icon */
  --coral-soft: #fde8e1;
  --orange: #f26b1d;       /* "English with Rozzy" lesson word — orange + underline, as in the reel subtitles */
  --orange-soft: #ffe7d6;
  --green: #23875a;        /* correct */
  --green-soft: #dcf1e5;
  --red: #c8412f;          /* wrong */
  --red-soft: #fbe3df;

  /* surfaces */
  --paper: #f7f4ef;
  --card: #ffffff;
  --line: rgba(20, 33, 61, 0.14);

  /* type */
  --font-display: "Rubik", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(56px, 17vw, 88px);
  --fs-h2: 26px;
  --fs-h3: 19px;
  --fs-body: 17px;
  --fs-small: 14px;
  --lh-body: 1.5;

  /* shape */
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --stroke: 2px solid var(--ink);
  --pop: 0 4px 0 var(--ink);         /* sticker shadow, like the wordmark */
  --pop-sm: 0 3px 0 var(--ink);
  --soft: 0 1px 2px rgba(20, 33, 61, 0.06), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --page: 560px;
}

/* scripts without Rubik / Plex coverage */
:root:is([lang="ar"], [lang="fa"]) { --font-body: "Vazirmatn", "IBM Plex Sans", system-ui, sans-serif; --font-display: "Vazirmatn", "Rubik", sans-serif; }
:root[lang="ja"] { --font-body: "IBM Plex Sans", "Noto Sans JP", system-ui, sans-serif; }
:root[lang="ko"] { --font-body: "IBM Plex Sans", "Noto Sans KR", system-ui, sans-serif; }
:root[lang="zh"] { --font-body: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif; }