/* ═══════════════════════════════════════════════════════════════════════
   AstraGPT — сайт. Токены оформления.

   Стиль: «стекло и жемчуг» на почти чёрном (владелец 26.09: «неон — это
   нейрослоп»). Фон тёмный, поверх него — спокойное стеклянное переливание:
   крупные мягкие слои перламутра (сирень → барвинок → вода → тёплый жемчуг →
   шалфей) на низкой непрозрачности, медленный диагональный блик, слабые
   каустики и зерно. Поверхности — дымчатое стекло с подсвеченной верхней
   кромкой, нейтральные.

   Правила:
   • цвета в компонентах — только через эти токены;
   • акцент (перламутровая заливка) — только у главной кнопки .btn-primary;
     остальное нейтральное, без цветных свечений;
   • имена токенов (--violet, --cyan, --lime, --aurora*, --glow-*) остались
     от прежней палитры, значения — жемчужные (насыщенность ≲ 45 %);
   • движение 150–320 мс, только transform/opacity, reduced-motion — без него;
   • шрифты: Unbounded — крупные заголовки и логотип, Onest — всё остальное
     (оба с кириллицей).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    /* ── Фон и поверхности ─────────────────────────────────────────────── */
    --bg: #000000;
    --bg-soft: #050507;
    --panel: rgba(14, 14, 20, 0.72);        /* стекло поверх сияния */
    --panel-solid: #0b0b10;
    --panel-2: #111118;
    --panel-3: #181822;
    --panel-4: #20202c;
    --pop-bg: #0e0e14;                      /* всплывающие панели — без просвета */
    --glass-1: rgba(255, 255, 255, 0.035);
    --glass-2: rgba(255, 255, 255, 0.06);
    --glass-3: rgba(255, 255, 255, 0.09);
    --glass-4: rgba(255, 255, 255, 0.13);
    --scrim: rgba(0, 0, 0, 0.72);

    /* Кромки: верх светлее низа — поверхность «освещена» сверху. */
    --line: rgba(255, 255, 255, 0.075);
    --line-2: rgba(255, 255, 255, 0.12);
    --line-3: rgba(255, 255, 255, 0.2);
    --edge: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 60%, rgba(255, 255, 255, 0.06));
    --edge-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.1));

    /* ── Текст ─────────────────────────────────────────────────────────── */
    --text: #f4f4f7;
    --text-2: rgba(244, 244, 247, 0.7);
    --text-3: rgba(244, 244, 247, 0.54);   /* ≥ 4.5:1 на самом светлом стекле (замер 26.09) */
    --text-4: rgba(244, 244, 247, 0.48);   /* подсказки: ≥ 4.5:1 на тёмном фоне */

    /* ── Перламутр (имена прежние, значения — жемчуг) ───────────────────── */
    --violet: #a79fd0;          /* сирень */
    --violet-hi: #cfc8e8;
    --blue: #93a3cf;            /* барвинок */
    --blue-hi: #bfcae6;
    --cyan: #92c4c6;            /* мягкая вода */
    --cyan-hi: #c3e0e0;
    --lime: #b9c7a4;            /* бледный шалфей */
    --lime-hi: #d3dcc4;
    --pink: #d2b0c0;            /* розовый жемчуг */
    --amber: #e0c49a;           /* тёплый жемчуг */
    --peach: #e2c2ae;

    /* Заливка главной кнопки и монеты: светлый перламутр, текст на нём тёмный. */
    --aurora: linear-gradient(100deg, #ddd5f2 0%, #cdd7f0 26%, #cae6e4 52%, #ece0d0 76%, #ddd5f2 100%);
    /* Тонкие линии (подчёркивание вкладки, полосы прогресса, кромки): жемчуг чуть плотнее. */
    --aurora-vivid: linear-gradient(100deg, #b9b0dc 0%, #a9b8dd 34%, #a8d0cf 66%, #d9c4ad 100%);
    --aurora-text: linear-gradient(95deg, #ddd6f3 0%, #c9d4f0 30%, #c8e5e3 62%, #eedfcc 100%);
    /* Для ТЕКУЩЕГО перелива: замкнутый (зеркальный) градиент строго по горизонтали —
       плитки стыкуются без шва, и по тексту не пробегает резкая цветная полоса. */
    --aurora-flow: linear-gradient(90deg, #dcd4f2 0%, #c7d3f0 17%, #c6e5e2 33%, #efe0cc 50%, #c6e5e2 67%, #c7d3f0 83%, #dcd4f2 100%);
    --aurora-conic: conic-gradient(from 210deg, #b9b0dc, #a9b8dd, #a8d0cf, #d9c4ad, #d2b0c0, #b9b0dc);
    --on-aurora: #0b0b12;

    /* Свечения — почти нейтральные и слабые: стекло не «горит». */
    --glow-violet: rgba(214, 208, 238, 0.14);
    --glow-blue: rgba(206, 214, 238, 0.13);
    --glow-cyan: rgba(208, 230, 230, 0.12);
    --glow-lime: rgba(220, 226, 206, 0.1);

    /* ── Смысловые ─────────────────────────────────────────────────────── */
    --success: #3ee08f;
    --danger: #ff5c6c;
    --danger-bg: rgba(255, 92, 108, 0.12);
    --warn: #ffc24d;
    --focus: #cfc8e8;

    /* ── Радиусы ───────────────────────────────────────────────────────── */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-pill: 999px;

    /* ── Отступы (шаг 4) ───────────────────────────────────────────────── */
    --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;
    --s-20: 80px;
    --gutter: clamp(16px, 3vw, 32px);
    --content-w: 1360px;

    /* ── Шрифты ────────────────────────────────────────────────────────── */
    --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: clamp(26px, 3.2vw, 34px);
    --fs-display: clamp(32px, 5.2vw, 64px);
    --fs-hero: clamp(38px, 7vw, 92px);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.05;
    --lh-snug: 1.3;
    --lh-body: 1.55;

    /* ── Движение ──────────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-1: 150ms;
    --dur-2: 220ms;
    --dur-3: 320ms;

    /* ── Тени: всегда с подсветкой сверху ──────────────────────────────── */
    --sh-1: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 20px -6px rgba(0, 0, 0, 0.7);
    --sh-2: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px -12px rgba(0, 0, 0, 0.85);
    --sh-3: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 90px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.04);

    /* ── Слои ──────────────────────────────────────────────────────────── */
    --z-bg: 0;
    --z-content: 1;
    --z-sticky: 50;
    --z-nav: 100;
    --z-menu: 200;
    --z-modal: 400;
    --z-toast: 600;

    --nav-h: 64px;
    --tabs-h: 0px;          /* вторая строка вкладок на телефоне (shell.css) */
}

/* Цвета перламутра страницы. Слои фона берут их в base.css; страница выбирает
   свой набор атрибутом body[data-page]. Тона средние и приглушённые: на
   тёмном они дают мягкий цветной отлив, а не свечение. */
body {
    --a1: #8f86bd;
    --a2: #7d90bd;
    --a3: #6fa4a7;
    --a4: #b59d88;
}
body[data-page="image"]   { --a1: #9a8dc0; --a2: #b894a8; --a3: #8193bf; --a4: #74a6a9; }
body[data-page="video"]   { --a1: #7f8fc0; --a2: #6fa3a8; --a3: #968cc0; --a4: #88ac9c; }
body[data-page="edit"]    { --a1: #b894a8; --a2: #968cc0; --a3: #b89e84; --a4: #74a6a9; }
body[data-page="audio"]   { --a1: #97a986; --a2: #6fa3a8; --a3: #8f86bd; --a4: #88ac9c; }
body[data-page="chat"]    { --a1: #7f90c0; --a2: #938ac0; --a3: #6fa2a6; --a4: #8a99c4; }
body[data-page="games"]   { --a1: #b391a6; --a2: #928abf; --a3: #97a986; --a4: #6fa3a8; }
body[data-page="pricing"] { --a1: #a79fd0; --a2: #b89e84; --a3: #8f86bd; --a4: #6fa3a8; }
/* MCP-C5: «MCP · Плагины» — жемчуг средней насыщенности; экран согласия — спокойнее (A3 §3.1). */
body[data-page="plugins"] { --a1: #978dc4; --a2: #7f93c2; --a3: #6fa5a8; --a4: #b8a08a; }
body[data-page="oauth-consent"] { --a1: #8f86bd; --a2: #7d90bd; --a3: #6fa4a7; --a4: #b59d88; --tabs-h: 0px; }
/* Экран согласия — экран безопасности: в шапке только знак и язык (A3 §5.6).
   Правило здесь, а не в css/pages/oauth.css: тот файл страница грузит сама, и до
   него вкладки разделов успели бы мелькнуть в первом кадре. */
body[data-page="oauth-consent"] .navtabs,
body[data-page="oauth-consent"] .topbar-end > :not(.lang-btn) { display: none; }