/* Сгенерировано `manage.py build_tokens` из static/src/tokens.json — руками не править.
   Значения вне токенов запрещены (ADR-0002 §3). */
:root {
  color-scheme: light dark;
  --color-bg-page: #F3EFE5;
  --color-bg-surface: #EAE5D7;
  --color-bg-sunken: #EFEADE;
  --color-bg-console: #F3EFE5;
  --color-bg-code: #E4DECF;
  --color-ink-primary: #1C1B18;
  --color-ink-secondary: #585449;
  --color-border: #CBC5B4;
  --color-border-strong: #B4AD9B;
  --color-border-control: #857E6D;
  --color-accent: #9C7126;
  --color-accent-ink: #6B4C18;
  --color-accent-soft: rgba(156, 113, 38, 0.12);
  --color-accent-mark: rgba(156, 113, 38, 0.3);
  --color-success: #4E7A38;
  --color-success-soft: rgba(78, 122, 56, 0.12);
  --color-danger: #A6412C;
  --color-danger-soft: rgba(166, 65, 44, 0.13);
  --color-info: #3F6380;
  --color-info-soft: rgba(63, 99, 128, 0.12);
  --color-info-ink: #36566F;
  --color-danger-ink: #96421F;
  --color-success-ink: #27633E;
  --color-warning-ink: #7D5A0A;
  --color-warning-soft: rgba(169, 122, 18, 0.1);
  --color-warning-mark: rgba(169, 122, 18, 0.4);
  --color-level-easy: #4E7A38;
  --color-level-medium: #94690C;
  --color-level-hard: #A6412C;
  --color-level-easy-inverse: #7FA866;
  --color-level-medium-inverse: #D6A640;
  --color-level-hard-inverse: #E07A60;
  --color-border-strong-inverse: #54514A;
  --color-hover: rgba(28, 27, 24, 0.07);
  --color-scrim: rgba(28, 27, 24, 0.32);
  --color-shadow: rgba(28, 27, 24, 0.24);

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.75rem;
  --space-9: 3.5rem;
  --gutter-wide: 2rem;
  --gutter-work: 1.25rem;
  --gutter-article: 2.75rem;
  --gutter-phone: 0.875rem;
  --radius-tag: 3px;
  --radius-control: 5px;
  --radius-card: 6px;
  --radius-overlay: 8px;
  --radius-pill: 999px;
  --font-ui: "Golos Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-micro: 0.6875rem;
  --text-label: 0.71875rem;
  --text-meta: 0.75rem;
  --text-caption: 0.78125rem;
  --text-ui: 0.84375rem;
  --text-term: 0.875rem;
  --text-body: 0.9375rem;
  --text-field: 16px;
  --text-read: 1.0625rem;
  --text-title: 1.1875rem;
  --text-lead: 1.1875rem;
  --text-step-heading: 1.375rem;
  --text-h2: 1.5625rem;
  --text-display: 1.75rem;
  --text-step-title: 2rem;
  --text-step-title-phone: 1.625rem;
  --text-page-title: 2.125rem;
  --text-article: 2.375rem;
  --leading-tight: 1.2;
  --leading-ui: 1.5;
  --leading-term: 1.6;
  --leading-read: 1.7;
  --tracking-caps: 0.08em;
  --tracking-display: -0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --size-page: 1440px;
  --size-sidebar: 252px;
  --size-lab-aside: 472px;
  --size-lesson-aside: 440px;
  --size-drawer-handle: 46px;
  --size-drawer-handle-icon: 24px;
  --size-lesson-strip-progress: 96px;
  --size-lesson-strip: 46px;
  --size-lesson-column: 660px;
  --size-lesson-text: 560px;
  --size-lesson-text-narrow: 480px;
  --size-lesson-gap: 36px;
  --size-course-bar: 70px;
  --size-course-bar-phone: 58px;
  --size-step-row: 48px;
  --size-lesson-bar: 64px;
  --size-step-current: 300px;
  --size-step-current-narrow: 250px;
  --size-step-item: 170px;
  --size-step-item-narrow: 118px;
  --size-terminal-head: 42px;
  --size-goals-bar: 52px;
  --size-lesson-mark: 18px;
  --size-lesson-shift: 10px;
  --size-line-shift: 3px;
  --size-home-aside: 400px;
  --size-measure: 680px;
  --size-prose-table-min: 430px;
  --size-article-aside: 260px;
  --size-tool-aside: 320px;
  --size-cheat-command: 330px;
  --size-panel: 420px;
  --size-list-commands: 280px;
  --size-term-popover: 340px;
  --size-index-name: 176px;
  --size-index-meta: 200px;
  --size-a4: 210mm;
  --size-control-lg: 44px;
  --size-control-md: 38px;
  --size-control-sm: 32px;
  --size-tap: 44px;
  --size-icon: 20px;
  --size-icon-sm: 16px;
  --size-icon-lg: 24px;
  --size-icon-xl: 26px;
  --size-icon-tile-sm: 32px;
  --size-icon-tile-md: 40px;
  --size-icon-tile-lg: 52px;
  --size-icon-tile-xl: 56px;
  --size-icon-tile-xs: 28px;
  --size-icon-tile-menu: 34px;
  --size-level-w: 17px;
  --size-level-h: 14px;
  --size-header: 56px;
  --size-topbar-search-narrow: 260px;
  --size-topbar-search-member: 210px;
  --size-menu: 280px;
  --size-menu-row: 54px;
  --size-menu-arrow: 48px;
  --size-terminal-min: 440px;
  --size-terminal-80: 700px;
  --size-workbench-chrome: 15rem;
  --size-workbench-chrome-phone: 27rem;
  --size-popover: 280px;
  --size-card-min: 280px;
  --size-input-max: 420px;
  --size-scrollbar: 9px;
  --size-step-mark-sm: 16px;
  --size-step-mark-md: 26px;
  --size-goal-mark: 22px;
  --size-checkbox: 17px;
  --size-segment: 36px;
  --size-settings: 760px;
  --size-setting-field: 272px;
  --size-dialog: 520px;
  --size-skills-level: 150px;
  --size-skills-last: 240px;
  --size-skills-next: 220px;
  --size-skill-bar-w: 14px;
  --size-skill-bar-h: 6px;
  --size-sessions-seen: 150px;
  --size-catalog-filters: 268px;
  --size-catalog-filters-narrow: 232px;
  --size-catalog-mark: 34px;
  --size-catalog-track: 168px;
  --size-catalog-level: 152px;
  --size-catalog-time: 120px;
  --size-catalog-status: 132px;
  --size-filter-head: 440px;
  --size-filter-head-narrow: 380px;
  --size-filter-head-field: 48px;
  --size-tools-catalog-label: 220px;
  --size-track-aside: 300px;
  --size-track-progress: 320px;
  --size-track-node: 38px;
  --size-search-main: 880px;
  --size-search-aside: 280px;
  --size-palette: 640px;
  --size-mega-start: 320px;
  --size-mega-map-card: 120px;
  --size-mega-levels: 300px;
  --size-mega-levels-narrow: 260px;
  --size-mega-labs-aside: 380px;
  --size-mega-labs-aside-narrow: 340px;
  --size-mega-wiki-aside: 300px;
  --size-mega-wiki-aside-narrow: 270px;
  --size-profile-aside: 340px;
  --size-profile-track-bar: 220px;
  --size-profile-track-count: 72px;
  --size-profile-track-when: 112px;
  --size-history-track: 184px;
  --size-history-result: 132px;
  --size-history-date: 124px;
  --size-history-attempts: 96px;
  --size-history-time: 64px;
  --size-history-score: 72px;
  --size-history-play: 76px;
  --size-replay-aside: 300px;
  --size-replay-screen: 420px;
  --size-not-found-main: 580px;
  --size-not-found-aside: 400px;
  --size-loading-note: 520px;
  --size-notes-list: 312px;
  --size-note-field: 144px;
  --size-bookmark-kind: 84px;
  --size-bookmark-date: 88px;
  --size-feedback-panel: 440px;
  --size-feedback-field: 120px;
  --size-tickets-list: 360px;
  --size-author-nav: 208px;
  --size-author-list: 340px;
  --size-author-context: 248px;
  --size-stage-dot: 11px;
  --size-notifications: 440px;
  --size-notifications-max: 620px;
  --size-notifications-filter: 220px;
  --size-notification-mark: 28px;
  --size-notification-dot: 8px;
  --size-notification-cell: 120px;
  --size-mailing-body: 220px;
  --size-mailing-stat: 140px;
  --size-tools-options: 360px;
  --size-tools-options-narrow: 330px;
  --size-tools-row: 56px;
  --size-tools-bar: 40px;
  --size-tools-gutter: 42px;
  --size-tools-field: 54px;
  --size-tools-switch-h: 26px;
  --size-tools-work-min: 380px;
  --size-tools-editor-phone: 260px;
  --size-tools-output-phone: 320px;
  --size-tools-field-max: 480px;
  --size-tools-output-max: 440px;
  --size-stats-chart: 240px;
  --size-stats-chart-phone: 176px;
  --size-stats-axis: 44px;
  --size-stats-tip: 196px;
  --size-stats-dot: 10px;
  --size-stats-live: 8px;
  --size-stats-spark: 28px;
  --size-stats-spark-w: 168px;
  --size-stats-tile-min: 148px;
  --size-stats-col: 84px;
  --size-stats-col-narrow: 64px;
  --size-stats-date: 152px;
  --size-stats-now-pages: 260px;
  --elevation-overlay: 0 18px 40px var(--color-shadow);
  --elevation-focus: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-accent);
  --breakpoint-lab: 860px;
  --breakpoint-wide: 820px;
  --breakpoint-phone: 600px;
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-hint: 300ms;
  --motion-slow: 420ms;
  --motion-stagger-lead: 40ms;
  --motion-stagger: 45ms;
  --motion-toggle: 150ms;
  --motion-pulse: 1400ms;
  --motion-stagger-phone: 35ms;
  --motion-step: 340ms;
  --motion-spring: 360ms;
  --motion-line: 180ms;
  --motion-ribbon: 260ms;
  --motion-goal: 380ms;
  --motion-handle-delay: 180ms;
  --motion-pop: 360ms;
  --motion-reveal: 260ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --border-hairline: 1px;
  --border-accent: 2px;
  --border-bar: 3px;
}

/* Системная тёмная тема — если пользователь не выбрал светлую явно. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-page: #23221F;
    --color-bg-surface: #2E2D29;
    --color-bg-sunken: #292825;
    --color-bg-console: #161512;
    --color-bg-code: #383631;
    --color-ink-primary: #EDE7D8;
    --color-ink-secondary: #ACA698;
    --color-border: #444239;
    --color-border-strong: #54514A;
    --color-border-control: #827E73;
    --color-accent: #C79640;
    --color-accent-ink: #DCAE5C;
    --color-accent-soft: rgba(199, 150, 64, 0.12);
    --color-accent-mark: rgba(199, 150, 64, 0.34);
    --color-success: #7FA866;
    --color-success-soft: rgba(127, 168, 102, 0.12);
    --color-danger: #D46C52;
    --color-danger-soft: rgba(212, 108, 82, 0.12);
    --color-info: #8FB3D1;
    --color-info-soft: rgba(143, 179, 209, 0.13);
    --color-info-ink: #8FB3D1;
    --color-danger-ink: #E88B72;
    --color-success-ink: #90B878;
    --color-warning-ink: #D6A640;
    --color-warning-soft: rgba(214, 166, 64, 0.1);
    --color-warning-mark: rgba(214, 166, 64, 0.4);
    --color-level-easy: #7FA866;
    --color-level-medium: #D6A640;
    --color-level-hard: #E07A60;
    --color-level-easy-inverse: #4E7A38;
    --color-level-medium-inverse: #94690C;
    --color-level-hard-inverse: #A6412C;
    --color-border-strong-inverse: #B4AD9B;
    --color-hover: rgba(237, 231, 216, 0.07);
    --color-scrim: rgba(0, 0, 0, 0.5);
    --color-shadow: rgba(0, 0, 0, 0.5);
  }
}

/* Явный выбор темы выигрывает в обе стороны — и на вложенном элементе тоже:
   так каталог компонентов показывает обе темы на одной странице. */
[data-theme="dark"] {
  --color-bg-page: #23221F;
  --color-bg-surface: #2E2D29;
  --color-bg-sunken: #292825;
  --color-bg-console: #161512;
  --color-bg-code: #383631;
  --color-ink-primary: #EDE7D8;
  --color-ink-secondary: #ACA698;
  --color-border: #444239;
  --color-border-strong: #54514A;
  --color-border-control: #827E73;
  --color-accent: #C79640;
  --color-accent-ink: #DCAE5C;
  --color-accent-soft: rgba(199, 150, 64, 0.12);
  --color-accent-mark: rgba(199, 150, 64, 0.34);
  --color-success: #7FA866;
  --color-success-soft: rgba(127, 168, 102, 0.12);
  --color-danger: #D46C52;
  --color-danger-soft: rgba(212, 108, 82, 0.12);
  --color-info: #8FB3D1;
  --color-info-soft: rgba(143, 179, 209, 0.13);
  --color-info-ink: #8FB3D1;
  --color-danger-ink: #E88B72;
  --color-success-ink: #90B878;
  --color-warning-ink: #D6A640;
  --color-warning-soft: rgba(214, 166, 64, 0.1);
  --color-warning-mark: rgba(214, 166, 64, 0.4);
  --color-level-easy: #7FA866;
  --color-level-medium: #D6A640;
  --color-level-hard: #E07A60;
  --color-level-easy-inverse: #4E7A38;
  --color-level-medium-inverse: #94690C;
  --color-level-hard-inverse: #A6412C;
  --color-border-strong-inverse: #B4AD9B;
  --color-hover: rgba(237, 231, 216, 0.07);
  --color-scrim: rgba(0, 0, 0, 0.5);
  --color-shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --color-bg-page: #F3EFE5;
  --color-bg-surface: #EAE5D7;
  --color-bg-sunken: #EFEADE;
  --color-bg-console: #F3EFE5;
  --color-bg-code: #E4DECF;
  --color-ink-primary: #1C1B18;
  --color-ink-secondary: #585449;
  --color-border: #CBC5B4;
  --color-border-strong: #B4AD9B;
  --color-border-control: #857E6D;
  --color-accent: #9C7126;
  --color-accent-ink: #6B4C18;
  --color-accent-soft: rgba(156, 113, 38, 0.12);
  --color-accent-mark: rgba(156, 113, 38, 0.3);
  --color-success: #4E7A38;
  --color-success-soft: rgba(78, 122, 56, 0.12);
  --color-danger: #A6412C;
  --color-danger-soft: rgba(166, 65, 44, 0.13);
  --color-info: #3F6380;
  --color-info-soft: rgba(63, 99, 128, 0.12);
  --color-info-ink: #36566F;
  --color-danger-ink: #96421F;
  --color-success-ink: #27633E;
  --color-warning-ink: #7D5A0A;
  --color-warning-soft: rgba(169, 122, 18, 0.1);
  --color-warning-mark: rgba(169, 122, 18, 0.4);
  --color-level-easy: #4E7A38;
  --color-level-medium: #94690C;
  --color-level-hard: #A6412C;
  --color-level-easy-inverse: #7FA866;
  --color-level-medium-inverse: #D6A640;
  --color-level-hard-inverse: #E07A60;
  --color-border-strong-inverse: #54514A;
  --color-hover: rgba(28, 27, 24, 0.07);
  --color-scrim: rgba(28, 27, 24, 0.32);
  --color-shadow: rgba(28, 27, 24, 0.24);
}

/* Печать — всегда светлой темой, какая бы ни была на экране (linux-labs#67). */
@media print {
  :root:not([data-theme="light"]), [data-theme] {
    color-scheme: light;
    --color-bg-page: #F3EFE5;
    --color-bg-surface: #EAE5D7;
    --color-bg-sunken: #EFEADE;
    --color-bg-console: #F3EFE5;
    --color-bg-code: #E4DECF;
    --color-ink-primary: #1C1B18;
    --color-ink-secondary: #585449;
    --color-border: #CBC5B4;
    --color-border-strong: #B4AD9B;
    --color-border-control: #857E6D;
    --color-accent: #9C7126;
    --color-accent-ink: #6B4C18;
    --color-accent-soft: rgba(156, 113, 38, 0.12);
    --color-accent-mark: rgba(156, 113, 38, 0.3);
    --color-success: #4E7A38;
    --color-success-soft: rgba(78, 122, 56, 0.12);
    --color-danger: #A6412C;
    --color-danger-soft: rgba(166, 65, 44, 0.13);
    --color-info: #3F6380;
    --color-info-soft: rgba(63, 99, 128, 0.12);
    --color-info-ink: #36566F;
    --color-danger-ink: #96421F;
    --color-success-ink: #27633E;
    --color-warning-ink: #7D5A0A;
    --color-warning-soft: rgba(169, 122, 18, 0.1);
    --color-warning-mark: rgba(169, 122, 18, 0.4);
    --color-level-easy: #4E7A38;
    --color-level-medium: #94690C;
    --color-level-hard: #A6412C;
    --color-level-easy-inverse: #7FA866;
    --color-level-medium-inverse: #D6A640;
    --color-level-hard-inverse: #E07A60;
    --color-border-strong-inverse: #54514A;
    --color-hover: rgba(28, 27, 24, 0.07);
    --color-scrim: rgba(28, 27, 24, 0.32);
    --color-shadow: rgba(28, 27, 24, 0.24);
  }
}