/* Joov — токены. Не править руками: tokens/tokens.json → node tokens/build.mjs */

:root {
  --j-c-ink: #141414;
  --j-c-ink-2: #2a2a2a;
  --j-c-muted: #6e6e6a;
  --j-c-gray: #a3a3a0;
  --j-c-line: #e4e4e0;
  --j-c-line-2: #d6d6d1;
  --j-c-soft: #f5f5f3;
  --j-c-page: #ebebe9;
  --j-c-paper: #ffffff;
  --j-c-night-0: #0e0e0d;
  --j-c-night-1: #141414;
  --j-c-night-2: #1d1d1c;
  --j-c-night-3: #262624;
  --j-c-night-line: #2e2e2c;
  --j-c-night-line-2: #3b3b38;
  --j-c-night-ink: #f2f2ef;
  --j-c-night-muted: #9a9a94;
  --j-c-night-gray: #6b6b67;
  --j-c-ok: #1f8a4c;
  --j-c-ok-soft: #e5f4ea;
  --j-c-ok-night: #4cc985;
  --j-c-run: #e8833a;
  --j-c-run-soft: #fbeadb;
  --j-c-run-text: #b45f1c;
  --j-c-run-night: #f0b98d;
  --j-c-err: #c0392b;
  --j-c-err-soft: #fbe7e4;
  --j-c-err-night: #f08a7e;
  --j-c-halo-a: #f3e2d4;
  --j-c-halo-b: #e3e1f3;
  --j-c-halo-a-night: #3a2f2a;
  --j-c-halo-b-night: #2c2a3d;
  --j-c-role-designer-tint: #f6cdd6;
  --j-c-role-designer-ac: #e85c78;
  --j-c-role-developer-tint: #cbddf6;
  --j-c-role-developer-ac: #345cc4;
  --j-c-role-qa-tint: #ccecd6;
  --j-c-role-qa-ac: #1f8a4c;
  --j-c-role-editor-tint: #e0d5f6;
  --j-c-role-editor-ac: #7652d0;
  --j-c-role-writer-tint: #f6e4cc;
  --j-c-role-writer-ac: #aa6228;
  --j-c-role-secretary-tint: #f8d6c2;
  --j-c-role-secretary-ac: #d06234;
  --j-c-role-architect-tint: #f7e9b4;
  --j-c-role-architect-ac: #d6a014;
  --j-c-role-publisher-tint: #c8eaee;
  --j-c-role-publisher-ac: #188496;
  --j-c-role-analyst-tint: #e4e0f6;
  --j-c-role-analyst-ac: #464096;
  --j-c-role-integrator-tint: #d6e8ce;
  --j-c-role-integrator-ac: #4c803c;
  --j-c-role-marketer-tint: #fbd9c9;
  --j-c-role-marketer-ac: #e2553a;
  --j-c-role-smm-tint: #f9d3ea;
  --j-c-role-smm-ac: #c2338a;
  --j-c-role-seo-tint: #d9ecf9;
  --j-c-role-seo-ac: #1f6fa8;
  --j-c-role-devops-tint: #dfe3e8;
  --j-c-role-devops-ac: #3d4a5c;
  --j-c-role-support-tint: #d3f0ea;
  --j-c-role-support-ac: #13866f;
  --j-c-role-translator-tint: #f3e3f8;
  --j-c-role-translator-ac: #8e3fae;
  --j-c-role-manager-tint: #e6e6e3;
  --j-c-role-manager-ac: #2e2e2c;
  --j-c-role-accountant-tint: #e3f1c9;
  --j-c-role-accountant-ac: #5d8a14;
  --j-c-role-lawyer-tint: #e9dfd3;
  --j-c-role-lawyer-ac: #6b4a2b;
  --j-c-role-videographer-tint: #ffe2c2;
  --j-c-role-videographer-ac: #c46a00;

  --j-bg: var(--j-c-page);
  --j-surface: var(--j-c-paper);
  --j-surface-2: var(--j-c-soft);
  --j-surface-inverse: var(--j-c-ink);
  --j-text: var(--j-c-ink);
  --j-text-2: var(--j-c-muted);
  --j-text-3: var(--j-c-gray);
  --j-text-inverse: var(--j-c-paper);
  --j-line: var(--j-c-line);
  --j-line-2: var(--j-c-line-2);
  --j-accent: var(--j-c-ink);
  --j-accent-hover: var(--j-c-ink-2);
  --j-accent-text: var(--j-c-paper);
  --j-ok: var(--j-c-ok);
  --j-ok-soft: var(--j-c-ok-soft);
  --j-run: var(--j-c-run);
  --j-run-soft: var(--j-c-run-soft);
  --j-run-text: var(--j-c-run-text);
  --j-err: var(--j-c-err);
  --j-err-soft: var(--j-c-err-soft);
  --j-halo-a: var(--j-c-halo-a);
  --j-halo-b: var(--j-c-halo-b);
  --j-focus: var(--j-c-ink);
  --j-scrim: rgba(20, 20, 20, .32);

  --j-font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --j-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --j-weight-light: 300;
  --j-weight-regular: 400;
  --j-weight-medium: 500;
  --j-text-display: clamp(34px, 3.7vw, 56px);
  --j-text-display-fixed: 56px;
  --j-text-display-line: 1.02;
  --j-text-display-tracking: -0.045em;
  --j-text-display-weight: 300;
  --j-text-h1: clamp(28px, 2.9vw, 42px);
  --j-text-h1-fixed: 42px;
  --j-text-h1-line: 1.05;
  --j-text-h1-tracking: -0.04em;
  --j-text-h1-weight: 300;
  --j-text-h2: 30px;
  --j-text-h2-fixed: 30px;
  --j-text-h2-line: 1.1;
  --j-text-h2-tracking: -0.035em;
  --j-text-h2-weight: 300;
  --j-text-h3: 22px;
  --j-text-h3-fixed: 22px;
  --j-text-h3-line: 1.18;
  --j-text-h3-tracking: -0.025em;
  --j-text-h3-weight: 400;
  --j-text-title: 18px;
  --j-text-title-fixed: 18px;
  --j-text-title-line: 1.25;
  --j-text-title-tracking: -0.015em;
  --j-text-title-weight: 400;
  --j-text-lead: clamp(16px, 1.2vw, 18px);
  --j-text-lead-fixed: 18px;
  --j-text-lead-line: 1.5;
  --j-text-lead-tracking: -0.005em;
  --j-text-lead-weight: 300;
  --j-text-body: 16px;
  --j-text-body-fixed: 16px;
  --j-text-body-line: 1.5;
  --j-text-body-tracking: -0.005em;
  --j-text-body-weight: 400;
  --j-text-body-s: 15px;
  --j-text-body-s-fixed: 15px;
  --j-text-body-s-line: 1.45;
  --j-text-body-s-tracking: -0.005em;
  --j-text-body-s-weight: 400;
  --j-text-label: 14px;
  --j-text-label-fixed: 14px;
  --j-text-label-line: 1.3;
  --j-text-label-tracking: 0;
  --j-text-label-weight: 400;
  --j-text-caption: 13px;
  --j-text-caption-fixed: 13px;
  --j-text-caption-line: 1.35;
  --j-text-caption-tracking: 0;
  --j-text-caption-weight: 400;
  --j-text-micro: 11.5px;
  --j-text-micro-fixed: 11.5px;
  --j-text-micro-line: 1.3;
  --j-text-micro-tracking: 0.02em;
  --j-text-micro-weight: 500;
  --j-text-number: 44px;
  --j-text-number-fixed: 44px;
  --j-text-number-line: 1;
  --j-text-number-tracking: -0.05em;
  --j-text-number-weight: 300;
  --j-space-0: 0;
  --j-space-1: 4px;
  --j-space-2: 8px;
  --j-space-3: 12px;
  --j-space-4: 16px;
  --j-space-5: 20px;
  --j-space-6: 24px;
  --j-space-7: 28px;
  --j-space-8: 32px;
  --j-space-10: 40px;
  --j-space-12: 48px;
  --j-space-14: 56px;
  --j-space-16: 64px;
  --j-space-20: 80px;
  --j-space-24: 96px;
  --j-space-30: 120px;
  --j-space-40: 160px;
  --j-space-base: 4px;
  --j-space-0_5: 2px;
  --j-space-1_5: 6px;
  --j-space-2_5: 10px;
  --j-space-3_5: 14px;
  --j-content: 1360px;
  --j-gutter: clamp(16px, 3vw, 40px);
  --j-air: clamp(150px, 19vw, 300px);
  --j-app-sidebar: 248px;
  --j-app-content: 1120px;
  --j-app-gutter-mobile: 16px;
  --j-app-gutter-desktop: 32px;
  --j-tabbar: 64px;
  --j-header: 56px;
  --j-bp-sm: 520px;
  --j-bp-md: 860px;
  --j-bp-lg: 1100px;
  --j-bp-xl: 1440px;
  --j-radius-xs: 6px;
  --j-radius-sm: 10px;
  --j-radius-md: 14px;
  --j-radius-lg: 18px;
  --j-radius-xl: 22px;
  --j-radius-2xl: 28px;
  --j-radius-3xl: 36px;
  --j-radius-pill: 999px;
  --j-shadow-line: 0 0 0 1px var(--j-line);
  --j-shadow-line-2: 0 0 0 1px var(--j-line-2);
  --j-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--j-line);
  --j-shadow-md: 0 10px 30px rgba(0, 0, 0, .08), 0 0 0 1px var(--j-line);
  --j-shadow-lg: 0 18px 44px rgba(0, 0, 0, .12), 0 0 0 1px var(--j-line);
  --j-shadow-float: 0 16px 34px -12px rgba(0, 0, 0, .35);
  --j-shadow-field: 0 0 0 1px var(--j-line-2), 0 18px 40px -18px rgba(20, 20, 20, .25);
  --j-shadow-focus: 0 0 0 2px var(--j-surface), 0 0 0 4px var(--j-focus);
  --j-z-base: 0;
  --j-z-raised: 1;
  --j-z-sticky: 10;
  --j-z-header: 20;
  --j-z-dropdown: 60;
  --j-z-sheet: 80;
  --j-z-modal: 90;
  --j-z-toast: 100;
  --j-z-tooltip: 110;
  --j-dur-instant: 80ms;
  --j-dur-fast: 160ms;
  --j-dur-base: 240ms;
  --j-dur-slow: 400ms;
  --j-dur-slower: 560ms;
  --j-dur-reveal: 1100ms;
  --j-dur-drift: 1400ms;
  --j-ease-out: cubic-bezier(.23, 1, .32, 1);
  --j-ease-soft: cubic-bezier(.16, 1, .3, 1);
  --j-ease-in-out: cubic-bezier(.45, 0, .2, 1);
  --j-ease-linear: linear;
  --j-reveal-distance: 36px;
  --j-reveal-blur: 8px;
  --j-reveal-stagger: 120ms;
  --j-size-control-s: 36px;
  --j-size-control: 44px;
  --j-size-control-l: 52px;
  --j-size-icon: 24px;
  --j-size-icon-s: 18px;
  --j-size-stroke: 1.6;
  --j-size-avatar: 40px;
  --j-size-orb-s: 32px;
  --j-size-orb: 64px;
  --j-size-orb-l: 120px;
  color-scheme: light;
}

/* Тёмная тема: явно [data-theme=dark] или по системе, если тема не задана */
/* Тема работает и на вложенном блоке: <section data-theme="dark"> */
:root[data-theme="dark"], [data-theme="dark"] {
  --j-bg: var(--j-c-night-0);
  --j-surface: var(--j-c-night-1);
  --j-surface-2: var(--j-c-night-2);
  --j-surface-inverse: var(--j-c-night-ink);
  --j-text: var(--j-c-night-ink);
  --j-text-2: var(--j-c-night-muted);
  --j-text-3: var(--j-c-night-gray);
  --j-text-inverse: var(--j-c-night-1);
  --j-line: var(--j-c-night-line);
  --j-line-2: var(--j-c-night-line-2);
  --j-accent: var(--j-c-night-ink);
  --j-accent-hover: #ffffff;
  --j-accent-text: var(--j-c-night-1);
  --j-ok: var(--j-c-ok-night);
  --j-ok-soft: rgba(76, 201, 133, .14);
  --j-run: var(--j-c-run-night);
  --j-run-soft: rgba(240, 185, 141, .14);
  --j-run-text: var(--j-c-run-night);
  --j-err: var(--j-c-err-night);
  --j-err-soft: rgba(240, 138, 126, .14);
  --j-halo-a: var(--j-c-halo-a-night);
  --j-halo-b: var(--j-c-halo-b-night);
  --j-focus: var(--j-c-night-ink);
  --j-scrim: rgba(0, 0, 0, .56);
  --j-shadow-line: 0 0 0 1px var(--j-line);
  --j-shadow-line-2: 0 0 0 1px var(--j-line-2);
  --j-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--j-line);
  --j-shadow-md: 0 10px 30px rgba(0, 0, 0, .08), 0 0 0 1px var(--j-line);
  --j-shadow-lg: 0 18px 44px rgba(0, 0, 0, .12), 0 0 0 1px var(--j-line);
  --j-shadow-float: 0 16px 34px -12px rgba(0, 0, 0, .35);
  --j-shadow-field: 0 0 0 1px var(--j-line-2), 0 18px 40px -18px rgba(20, 20, 20, .25);
  --j-shadow-focus: 0 0 0 2px var(--j-surface), 0 0 0 4px var(--j-focus);
  color-scheme: dark;
}
[data-theme="light"] {
  --j-bg: var(--j-c-page);
  --j-surface: var(--j-c-paper);
  --j-surface-2: var(--j-c-soft);
  --j-surface-inverse: var(--j-c-ink);
  --j-text: var(--j-c-ink);
  --j-text-2: var(--j-c-muted);
  --j-text-3: var(--j-c-gray);
  --j-text-inverse: var(--j-c-paper);
  --j-line: var(--j-c-line);
  --j-line-2: var(--j-c-line-2);
  --j-accent: var(--j-c-ink);
  --j-accent-hover: var(--j-c-ink-2);
  --j-accent-text: var(--j-c-paper);
  --j-ok: var(--j-c-ok);
  --j-ok-soft: var(--j-c-ok-soft);
  --j-run: var(--j-c-run);
  --j-run-soft: var(--j-c-run-soft);
  --j-run-text: var(--j-c-run-text);
  --j-err: var(--j-c-err);
  --j-err-soft: var(--j-c-err-soft);
  --j-halo-a: var(--j-c-halo-a);
  --j-halo-b: var(--j-c-halo-b);
  --j-focus: var(--j-c-ink);
  --j-scrim: rgba(20, 20, 20, .32);
  --j-shadow-line: 0 0 0 1px var(--j-line);
  --j-shadow-line-2: 0 0 0 1px var(--j-line-2);
  --j-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--j-line);
  --j-shadow-md: 0 10px 30px rgba(0, 0, 0, .08), 0 0 0 1px var(--j-line);
  --j-shadow-lg: 0 18px 44px rgba(0, 0, 0, .12), 0 0 0 1px var(--j-line);
  --j-shadow-float: 0 16px 34px -12px rgba(0, 0, 0, .35);
  --j-shadow-field: 0 0 0 1px var(--j-line-2), 0 18px 40px -18px rgba(20, 20, 20, .25);
  --j-shadow-focus: 0 0 0 2px var(--j-surface), 0 0 0 4px var(--j-focus);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --j-bg: var(--j-c-night-0);
    --j-surface: var(--j-c-night-1);
    --j-surface-2: var(--j-c-night-2);
    --j-surface-inverse: var(--j-c-night-ink);
    --j-text: var(--j-c-night-ink);
    --j-text-2: var(--j-c-night-muted);
    --j-text-3: var(--j-c-night-gray);
    --j-text-inverse: var(--j-c-night-1);
    --j-line: var(--j-c-night-line);
    --j-line-2: var(--j-c-night-line-2);
    --j-accent: var(--j-c-night-ink);
    --j-accent-hover: #ffffff;
    --j-accent-text: var(--j-c-night-1);
    --j-ok: var(--j-c-ok-night);
    --j-ok-soft: rgba(76, 201, 133, .14);
    --j-run: var(--j-c-run-night);
    --j-run-soft: rgba(240, 185, 141, .14);
    --j-run-text: var(--j-c-run-night);
    --j-err: var(--j-c-err-night);
    --j-err-soft: rgba(240, 138, 126, .14);
    --j-halo-a: var(--j-c-halo-a-night);
    --j-halo-b: var(--j-c-halo-b-night);
    --j-focus: var(--j-c-night-ink);
    --j-scrim: rgba(0, 0, 0, .56);
    color-scheme: dark;
  }
}

/* Telegram Mini App: <html data-tg> — фон и текст из themeParams (их ставит telegram-web-app.js как --tg-theme-*) */
:root[data-tg], [data-tg] {
  --j-shadow-line: 0 0 0 1px var(--j-line);
  --j-shadow-line-2: 0 0 0 1px var(--j-line-2);
  --j-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--j-line);
  --j-shadow-md: 0 10px 30px rgba(0, 0, 0, .08), 0 0 0 1px var(--j-line);
  --j-shadow-lg: 0 18px 44px rgba(0, 0, 0, .12), 0 0 0 1px var(--j-line);
  --j-shadow-float: 0 16px 34px -12px rgba(0, 0, 0, .35);
  --j-shadow-field: 0 0 0 1px var(--j-line-2), 0 18px 40px -18px rgba(20, 20, 20, .25);
  --j-shadow-focus: 0 0 0 2px var(--j-surface), 0 0 0 4px var(--j-focus);
  --j-bg: var(--tg-theme-secondary-bg-color, var(--j-bg-base));
  --j-surface: var(--tg-theme-bg-color, var(--j-surface-base));
  --j-surface-2: var(--tg-theme-section-bg-color, var(--j-surface-2-base));
  --j-text: var(--tg-theme-text-color, var(--j-text-base));
  --j-text-2: var(--tg-theme-hint-color, var(--j-text-2-base));
  --j-line: var(--tg-theme-section-separator-color, var(--j-line-base));
}
:root {
  --j-bg-base: var(--j-c-page);
  --j-surface-base: var(--j-c-paper);
  --j-surface-2-base: var(--j-c-soft);
  --j-text-base: var(--j-c-ink);
  --j-text-2-base: var(--j-c-muted);
  --j-line-base: var(--j-c-line);
}
:root[data-theme="dark"], [data-theme="dark"] {
  --j-bg-base: var(--j-c-night-0);
  --j-surface-base: var(--j-c-night-1);
  --j-surface-2-base: var(--j-c-night-2);
  --j-text-base: var(--j-c-night-ink);
  --j-text-2-base: var(--j-c-night-muted);
  --j-line-base: var(--j-c-night-line);
}

@media (prefers-reduced-motion: reduce) {
  :root { --j-dur-reveal: 0ms; --j-dur-drift: 0ms; --j-dur-slower: 0ms; --j-dur-slow: 0ms; --j-reveal-distance: 0px; --j-reveal-blur: 0px; }
}