/* =====================================================================
   AISkillCertificate · learner cabinet · DESIGN TOKENS (v1, 2026-11-14)
   Semantic layer over the «Середина» palette of the live quiz/site
   (aiskillcertificate/site/quiz/app/styles.css). To switch palettes,
   edit only the "brand palette" block; components use semantic names.
   Copied once from SubsBiz/Cabinet/_build (contract L2) with every font and image address made absolute;
   this repo copy is the source of truth now.
   ===================================================================== */

/* ---------- fonts (OFL) ---------- */
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rethink Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/fonts/rethink-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-mono-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/geist-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/geist-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/geist-mono-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Manrope: Cyrillic companion of Rethink Sans (same rule as the certificate): only a Cyrillic name downloads it. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/app/assets/fonts/manrope-cyrillic-wght.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* ---------- brand palette («Середина», same values as the live quiz) ---------- */
  --c-ink: #1e1e1e;
  --c-ink-2: #333330;
  --c-cream: #f9f9f0;
  --c-yellow: #ffd733;
  --c-butter: #ffe88c;
  --c-sand: #f6efb8;
  --c-ivory: #ebecdc;
  --c-powder: #b5cde9;
  --c-powder-soft: #e3ecf6;
  --c-grey: #6b6b66;          /* 5.4:1 on white, 5.1:1 on cream — use for all secondary text */
  --c-line: #e4e4da;
  --c-control: #b1b3b2;
  --c-white: #ffffff;
  --c-green: #0ead63;         /* fills and icons only: 2.9:1 on white, never body text */
  --c-green-soft: #e3f6ec;    /* NEW: "Correct" panel tint */
  --c-green-ink: #0a6a3c;     /* NEW: 5.9:1 on --c-green-soft */
  --c-amber-soft: #fff2d6;    /* NEW: "Not quite" panel tint */
  --c-amber-ink: #7a4a00;     /* NEW: 6.7:1 on --c-amber-soft */
  --c-go: #16a34a;            /* traffic light (always with shape + label) */
  --c-check: #f59e0b;
  --c-stop: #e11d48;

  /* ---------- semantic tokens (components use only these) ---------- */
  --surface: var(--c-white);          /* page, course column */
  --surface-2: var(--c-cream);        /* widget cards, rails, soft panels */
  --surface-3: var(--c-ivory);        /* progress tracks, wells, skeletons */
  --surface-ink: var(--c-ink);        /* dark highlight cards */
  --text: var(--c-ink);
  --text-2: var(--c-grey);
  --text-on-ink: var(--c-cream);
  --line: var(--c-line);
  --line-strong: #1e1e1e33;
  --accent: var(--c-yellow);          /* progress fill, marker, badges: never text on white */
  --accent-soft: var(--c-butter);     /* selected fill, current item */
  --accent-sand: var(--c-sand);       /* chips */
  --tint: var(--c-powder-soft);       /* info panels, quotes */
  --tint-strong: var(--c-powder);
  --action: var(--c-ink);             /* primary button */
  --action-text: var(--c-cream);
  --action-hover: var(--c-ink-2);
  --success: var(--c-green);
  --success-soft: var(--c-green-soft);
  --success-ink: var(--c-green-ink);
  --warn-soft: var(--c-amber-soft);
  --warn-ink: var(--c-amber-ink);
  --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 5px var(--c-ink);
  --overlay: rgba(30, 30, 30, .42);

  /* ---------- type ---------- */
  --font-ui: 'Rethink Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-doc: 'Manrope', 'Rethink Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px;
  --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px;
  --lh-tight: 1.2; --lh-ui: 1.35; --lh-body: 1.55;
  --tracking-head: -0.01em;

  /* ---------- space (4-pt grid) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 24px;                     /* column side padding; 16px at ≤374px */

  /* ---------- radii ---------- */
  --r-6: 6px; --r-10: 10px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-24: 24px; --r-pill: 999px;

  /* ---------- elevation ---------- */
  --sh-1: 0 1px 2px rgba(30, 30, 30, .06);
  --sh-2: 0 6px 20px rgba(30, 30, 30, .08);
  --sh-3: 0 18px 48px rgba(30, 30, 30, .16);

  /* ---------- layout (see §2 «Раскладка») ---------- */
  --col: 500px;                       /* course column = quiz .screen */
  --nav-w: 240px;                     /* desktop menu with labels, ≥1200 */
  --nav-w-icons: 72px;                /* icon-only menu, 768–1199 */
  --rail-w: 340px;                    /* widget column, ≥1024 */
  --zone-gap: 32px;
  --hdr-h: 64px;
  --tabbar-h: 64px;
  --touch: 44px;                      /* minimum tap target */
  --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1200px;   /* documentation only: media/container queries use literals */

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 150ms; --t-base: 220ms; --t-slow: 320ms; --t-fill: 700ms; --t-celebrate: 1400ms;
}

/* ---------- dark theme (same switch as the site: html.dark) ---------- */
html.dark {
  --surface: #171714;
  --surface-2: #20201d;
  --surface-3: #2c2b26;
  --surface-ink: #f9f9f0;
  --text: #f9f9f0;
  --text-2: #f9f9f0b8;
  --text-on-ink: #171714;
  --line: #f9f9f026;
  --line-strong: #f9f9f04d;
  --accent: #ffd733;
  --accent-soft: #3a3729;
  --accent-sand: #33322b;
  --tint: #1f2a36;
  --tint-strong: #2b3c50;
  --action: #ffd733;                  /* the site turns buttons yellow in dark mode */
  --action-text: #171714;
  --action-hover: #ffe066;
  --success-soft: #12301f;
  --success-ink: #8fe5b6;
  --warn-soft: #3a2c12;
  --warn-ink: #ffd27a;
  --focus-ring: 0 0 0 3px #171714, 0 0 0 5px #ffd733;
  --overlay: rgba(0, 0, 0, .6);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .35);
  --sh-3: 0 18px 48px rgba(0, 0, 0, .5);
}

@media (max-width: 374px) { :root { --gutter: 16px; } }