/* ============================================================
   IT‑Career‑Gym — design tokens · «Whiteboard»
   День = маркер на белой доске, ночь = мел на школьной доске.

   Подключается ПЕРЕД platform.css и всеми страничными css.
   Старые имена переменных (--bg, --surface, --accent, --text …) сохранены:
   на них построены platform.css, blog-*.css, legal.css, ai-assistant.css —
   смена палитры здесь перекрашивает весь сайт сразу.
   Тема: html[data-theme="day" | "night"] (includes/theme_boot.html, static/js/theme.js).
   ============================================================ */

:root {
    /* ---- 8pt spacing ---- */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
    --space-9: 64px; --space-10: 72px; --space-11: 80px; --space-12: 96px;
    --gutter: clamp(16px, 4vw, 48px);
    --container: 1200px;

    /* ---- typography ---- */
    --font-head: 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-hand: 'Caveat', 'Comic Sans MS', cursive;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: clamp(1.5rem, 2.4vw, 1.875rem);
    --fs-3xl: clamp(1.75rem, 3.6vw, 2.75rem);
    --fs-4xl: clamp(1.9rem, 3.9vw, 3.25rem);

    /* ---- shape / motion ---- */
    --radius-sm: 8px;
    --radius-card: 14px;
    --radius-btn: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.28s;
    --transition: 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    --header-blur: 10px;
    --header-h: 72px;

    /* ---- theme-independent (стикеры, бренд) ---- */
    --ink: #1c1a10;            /* текст на стикерах и на оранжевой заливке */
    --note-y: #ffe27a;
    --note-b: #cfe0ff;
    --note-g: #d8f0a6;
    --brand: #1a2a6c;          /* фирменный тёмно-синий: Super-билет, иконки */
    --cta: #ff6b2c;            /* главная кнопка */
    --cta-hover: #ff8250;
    --on-cta: #1c1a10;
}

/* ---------------- ДЕНЬ: маркер на белой доске ---------------- */
:root,
:root[data-theme="day"] {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface2: #eceff6;
    --border: #d5dbec;
    --text: #14183a;
    --text2: #454e78;          /* AA на --bg, --surface, --surface2 */
    --text3: #5a6488;
    --accent: #c2410c;         /* ссылки, акцент-как-текст, заливка с белым текстом */
    --accent2: #1a2a6c;
    --gold: #a15c07;
    --green: #2f6b00;
    --red: #b42318;
    --on-accent: #ffffff;

    --ln: rgba(26, 42, 108, 0.6);        /* контур карточек «нарисованный маркером» */
    --ln-soft: rgba(26, 42, 108, 0.2);
    --hl: var(--accent);
    --xp-t: var(--green);
    --dot: rgba(26, 42, 108, 0.16);
    --tape: rgba(26, 42, 108, 0.16);
    --band: rgba(255, 226, 122, 0.8);
    --nav-bg: rgba(246, 247, 249, 0.9);
    --focus: #1a2a6c;
    --shadow: 0 14px 26px -18px rgba(20, 24, 58, 0.5);
    --note-shadow: 0 12px 18px -12px rgba(0, 0, 0, 0.55);
    --overlay: rgba(20, 24, 58, 0.45);
}

/* ---------------- НОЧЬ: мел на школьной доске ---------------- */
:root[data-theme="night"] {
    color-scheme: dark;
    --bg: #16302c;
    --surface: #1d3b36;
    --surface2: #22443e;
    --border: #3a5b54;
    --text: #f3f1e8;
    --text2: #c5d0c8;
    --text3: #a9bab1;
    --accent: #ffa56b;
    --accent2: #f3f1e8;
    --gold: #ffe27a;
    --green: #cdea6a;
    --red: #ff8a80;
    --on-accent: #1c1a10;

    --ln: rgba(243, 241, 232, 0.6);
    --ln-soft: rgba(243, 241, 232, 0.2);
    --dot: rgba(243, 241, 232, 0.12);
    --tape: rgba(243, 241, 232, 0.18);
    --band: rgba(255, 226, 122, 0.3);
    --nav-bg: rgba(22, 48, 44, 0.92);
    --focus: #ffffff;
    --shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.7);
    --overlay: rgba(6, 18, 16, 0.6);
}

/* ============================================================
   СЕМАНТИЧЕСКИЙ СЛОЙ ДИЗАЙН-СИСТЕМЫ (общий API с itcareergym.ru)
   Компоненты g- (ui.css, ui-extra.css, ui.js) берут цвета только отсюда: --color-*.
   Здесь они указывают на палитру Whiteboard. Статусы ложатся на цвета стикеров:
   успех — зелёный стикер, внимание — жёлтый, информация — голубой.
   Контраст текста статуса на своей плашке — от 4,9:1 днём и от 7:1 ночью.
   ============================================================ */
:root {
    --font-heading: var(--font-head);
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --lh-tight: 1.08;
    --lh-heading: 1.15;
    --lh-body: 1.55;
    --tracking-hero: -0.035em;
    --tracking-heading: -0.02em;
    --tracking-mono: -0.01em;
    --radius-md: 12px;
    --radius-xl: 24px;
    --container-narrow: 760px;   /* статья, справка, юр. тексты */
    --container-form: 560px;     /* одна форма: вход, отклик, оплата */
    --ease-out: var(--ease);
    --dur-slow: 0.6s;
    --icon-box: 48px;
    --icon-size: 24px;
    --icon-stroke: 1.75;

    /* высоты контролов: одна шкала, как size s/m/l/xl у Consta и Gravity */
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 48px;
    --control-xl: 56px;

    /* слои: всплывающее поверх модалки, тост поверх всего, кроме подсказки */
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
    --z-tooltip: 1400;
}

/* ---------- ДЕНЬ: белая доска ---------- */
:root,
:root[data-theme="day"] {
    --color-primary: var(--brand);
    --color-primary-tint: #e3e8f7;
    --color-bg: var(--bg);
    --color-bg-soft: var(--surface2);
    --color-surface: var(--surface);
    --color-surface-raised: var(--surface);
    --color-border: var(--border);
    --color-border-strong: var(--ln);
    --color-text: var(--text);
    --color-text-muted: var(--text2);

    --color-accent: var(--cta);
    --color-accent-hover: var(--cta-hover);
    --color-on-accent: var(--on-cta);
    --color-accent-text: var(--accent);
    --color-xp: var(--green);
    --color-xp-text: var(--green);
    --color-streak: var(--cta);
    --color-streak-text: var(--accent);
    --color-icon-bg: transparent;
    --color-icon-fg: var(--accent2);
    --color-focus: var(--focus);
    --color-glow: var(--brand);
    --glow-opacity: 0;                 /* в Whiteboard свечения нет */
    /* игра (ui-game.css): энергия — синий маркер, «кристаллы» на .tech — молнии (жёлтый стикер), премиум — синий билет Super */
    --color-energy: #1f6fb2;
    --color-energy-text: #0b5a91;      /* 6,9:1 на белом */
    --color-on-energy: #ffffff;        /* 5,2:1 на #1f6fb2 */
    --color-gem: #e0a800;
    --color-gem-text: #6b4a00;         /* 8,0:1 на белом */
    --color-on-gem: #1c1a10;
    --color-premium: var(--brand);
    --color-premium-text: var(--brand);

    --color-success: #3f8a00;
    --color-success-text: #2f6b00;
    --color-success-bg: var(--note-g);
    --color-warning: #d89a00;
    --color-warning-text: #7a4a00;
    --color-warning-bg: var(--note-y);
    --color-info: #2f5bd3;
    --color-info-text: #1a2a6c;
    --color-info-bg: var(--note-b);
    --color-danger: #d92d20;
    --color-danger-text: #b42318;
    --color-danger-bg: #ffe0dc;
    --color-neutral-bg: rgba(26, 42, 108, 0.07);

    --color-field: #ffffff;
    --color-field-border: #6b7398;   /* ≥ 3:1 к полю и к карточке (WCAG 1.4.11) */
    --color-overlay: var(--overlay);
    --color-skeleton: #e3e7f1;
    --color-skeleton-hi: #f2f4f9;
    --color-selection: rgba(255, 107, 44, 0.24);

    --shadow-card: 0 6px 0 -3px var(--tape);
    --shadow-hover: 0 14px 0 -6px var(--tape);
    --shadow-pop: var(--shadow);
}

/* ---------- НОЧЬ: мел на школьной доске ---------- */
:root[data-theme="night"] {
    --color-primary: var(--brand);
    --color-primary-tint: #24463f;
    --color-bg-soft: #1a3732;
    --color-surface-raised: var(--surface2);
    --color-accent-text: var(--accent);
    --color-streak-text: var(--accent);
    --color-icon-fg: var(--text);

    --color-success: #cdea6a;
    --color-success-text: #d8f0a6;
    --color-success-bg: rgba(205, 234, 106, 0.14);
    --color-warning: #ffe27a;
    --color-warning-text: #ffe9a3;
    --color-warning-bg: rgba(255, 226, 122, 0.14);
    --color-info: #9fbcff;
    --color-info-text: #cfe0ff;
    --color-info-bg: rgba(159, 188, 255, 0.16);
    --color-danger: #ff8a80;
    --color-danger-text: #ffb4ab;
    --color-danger-bg: rgba(255, 138, 128, 0.15);
    --color-neutral-bg: rgba(243, 241, 232, 0.08);

    --color-field: #132a26;
    --color-field-border: #8fa89f;
    --color-skeleton: #24463f;
    --color-skeleton-hi: #2d5149;
    --color-selection: rgba(255, 165, 107, 0.3);
    --color-energy: #7cc4ff;
    --color-energy-text: #a9d8ff;      /* 8,9:1 на #1d3b36 */
    --color-on-energy: #0b1f2e;
    --color-gem: #f2c94c;
    --color-gem-text: #f6d77a;
    --color-on-gem: #1c1a10;
    --color-premium: #9fb4ff;
    --color-premium-text: #c3d0ff;
}

/* ---------- ПОВЫШЕННАЯ КОНТРАСТНОСТЬ (Gravity UI): <html data-contrast="high"> поверх темы ---------- */
:root[data-contrast="high"]:not([data-theme="night"]) {
    --color-text: #060a24;
    --color-text-muted: #27305a;
    --color-border: #8f9bc4;
    --color-border-strong: #1a2a6c;
    --color-field-border: #3d4775;
    --color-accent-text: #8a2e03;
}
:root[data-theme="night"][data-contrast="high"] {
    --color-text: #ffffff;
    --color-text-muted: #e3ebe6;
    --color-border: #6d8c84;
    --color-border-strong: #f3f1e8;
    --color-field-border: #c5d0c8;
    --color-accent-text: #ffc29a;
    --color-focus: #ffe27a;
}