/*
    Общие переменные оформления: цвета, размеры, тени, шрифты.
    Файл подключается и в CMS, и в Swagger — там из app.css берутся только
    токены, иначе стили CMS перебили бы вёрстку Swagger UI.
*/

:root {
    --brand: #EF4123;
    --brand-hover: #d1331c;
    --brand-ink: #b32c14;
    --brand-soft: rgba(239, 65, 35, .1);
    --brand-ring: rgba(239, 65, 35, .22);

    --bg: #E6E7E8;
    --surface: #fff;
    --surface-2: #f7f7f8;
    --surface-3: #E6E7E8;
    --line: #D1D3D4;
    --line-strong: #b5b7b9;
    --text: #000;
    --text-2: #58595B;
    --muted: #58595B;

    --ok: #1f9d63;
    --ok-ink: #10693f;
    --ok-bg: rgba(31, 157, 99, .1);
    --warn: #d98314;
    --warn-ink: #8a4f00;
    --warn-bg: rgba(217, 131, 20, .12);
    --danger: #EF4123;
    --danger-ink: #a92718;
    --danger-bg: rgba(217, 58, 43, .1);
    --info: #2f7fd1;
    --info-ink: #1c5c9e;
    --info-bg: rgba(47, 127, 209, .1);

    --get: #2f7fd1;
    --get-bg: rgba(47, 127, 209, .1);
    --post: #1f9d63;
    --post-bg: rgba(31, 157, 99, .1);
    --put: #d98314;
    --put-bg: rgba(217, 131, 20, .12);
    --delete: #d93a2b;
    --delete-bg: rgba(217, 58, 43, .1);
    --patch: #12a594;

    --radius: 8px;
    --radius-sm: 4px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(24, 28, 36, .05);
    --shadow: 0 1px 2px rgba(24, 28, 36, .06), 0 6px 16px rgba(24, 28, 36, .05);
    --shadow-pop: 0 8px 24px rgba(24, 28, 36, .16);

    --control-h: 32px;
    --control-h-sm: 28px;
    --page-w: 1180px;
    --topbar: #000;
    --tip-bg: #16181d;
    --tip-text: #fff;
    --tip-line: rgba(255, 255, 255, .12);

    --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;

    /* Совместимость со старыми именами в разметке и в стилях Swagger. */
    --swagger-text: var(--text);
    --swagger-muted: var(--muted);
    --swagger-line: var(--line);
    --swagger-bg: var(--bg);
    --swagger-white: var(--surface);
    --swagger-topbar: var(--topbar);
    --swagger-execute: var(--info);
    --swagger-execute-hover: var(--info-ink);
    --navy: var(--topbar);
    --white: var(--surface);
}

html[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1d2128;
    --surface-3: #242932;
    --line: #2c313b;
    --line-strong: #3c434f;
    --text: #e8eaef;
    --text-2: #c2c8d2;
    --muted: #98a0ad;

    --brand-soft: rgba(239, 65, 35, .18);
    --brand-ring: rgba(239, 65, 35, .3);
    --brand-ink: #ff8a72;

    --ok: #34b87a;
    --ok-ink: #7fdcae;
    --ok-bg: rgba(52, 184, 122, .14);
    --warn: #e0952c;
    --warn-ink: #f0c07a;
    --warn-bg: rgba(224, 149, 44, .14);
    --danger: #e4574a;
    --danger-ink: #f5a29a;
    --danger-bg: rgba(228, 87, 74, .14);
    --info: #4f9de0;
    --info-ink: #9fc9ee;
    --info-bg: rgba(79, 157, 224, .14);

    --get: #4f9de0;
    --get-bg: rgba(79, 157, 224, .14);
    --post: #34b87a;
    --post-bg: rgba(52, 184, 122, .14);
    --put: #e0952c;
    --put-bg: rgba(224, 149, 44, .14);
    --delete: #e4574a;
    --delete-bg: rgba(228, 87, 74, .14);

    --topbar: #0b0d10;
    /* На тёмном фоне подсказка светлая, иначе сливается со страницей. */
    --tip-bg: #e8eaef;
    --tip-text: #16181d;
    --tip-line: rgba(0, 0, 0, .18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .55);
}