/**
 * Admin Design System — tokens (foundation layer).
 * Меняйте только здесь для глобального рескина.
 * Компоненты: admin-components.css | Shell: admin-ui.css
 *
 * Тема: html[data-admin-theme="light|dark"] (дефолт dark через anti-FOUC в HTML).
 */

:root,
html[data-admin-theme="dark"] {
    /*
     * Elevation ladder — расширенная дельта между слоями (~10–14 RGB на шаг).
     * L0 canvas → L4 card; wells — inset ниже карточки.
     */
    --admin-bg: #0e0e10;
    --admin-bg-elevated: #161618;
    --admin-surface: #1c1c1f;
    --admin-surface-muted: #232326;
    --admin-surface-card: #303033;
    --admin-surface-hover: #3c3c40;
    --admin-surface-glass: rgba(255, 255, 255, 0.1);
    --admin-surface-glass-subtle: rgba(255, 255, 255, 0.05);

    --admin-preview-well: #18181a;
    --admin-preview-well-deep: #121214;

    /* Separators — усилены для читаемости границ панелей */
    --admin-border-subtle: rgba(255, 255, 255, 0.08);
    --admin-border: rgba(255, 255, 255, 0.14);
    --admin-border-strong: rgba(255, 255, 255, 0.2);
    --admin-border-solid: #48484c;

    /* Text */
    --admin-text: rgba(255, 255, 255, 0.92);
    --admin-text-secondary: rgba(255, 255, 255, 0.72);
    --admin-text-muted: rgba(255, 255, 255, 0.5);
    --admin-text-faint: rgba(255, 255, 255, 0.34);

    /* Accent */
    --admin-accent: rgba(255, 255, 255, 0.92);
    --admin-accent-line: rgba(255, 255, 255, 0.82);
    --admin-primary: #2563eb;
    --admin-primary-hover: #1d4ed8;
    --admin-on-primary: #ffffff;
    --admin-on-danger: #ffffff;
    --admin-brand: #ef3124;

    /* Status */
    --admin-danger: #ff6b6b;
    --admin-danger-hover: #ef4444;
    --admin-danger-muted: rgba(255, 107, 107, 0.14);
    --admin-danger-border: rgba(255, 107, 107, 0.35);
    --admin-success: #6ee7a0;
    --admin-success-muted: rgba(110, 231, 160, 0.12);
    --admin-success-border: rgba(110, 231, 160, 0.35);
    --admin-warning: #fbbf24;
    --admin-warning-muted: rgba(251, 191, 36, 0.12);
    --admin-warning-border: rgba(251, 191, 36, 0.4);
    --admin-info: #93c5fd;
    --admin-info-muted: rgba(37, 99, 235, 0.14);
    --admin-info-border: rgba(96, 165, 250, 0.45);
    --admin-primary-border: rgba(96, 165, 250, 0.5);
    --admin-primary-ring: rgba(37, 99, 235, 0.25);

    /* Interactive fills (rail / chips) */
    --admin-hover-fill: rgba(255, 255, 255, 0.04);
    --admin-active-fill: rgba(255, 255, 255, 0.07);
    --admin-chip-fill: rgba(255, 255, 255, 0.05);
    --admin-chip-fill-strong: rgba(255, 255, 255, 0.08);

    /* Spacing scale (4px base) */
    --admin-space-1: 4px;
    --admin-space-2: 8px;
    --admin-space-3: 12px;
    --admin-space-4: 16px;
    --admin-space-5: 20px;
    --admin-space-6: 24px;
    --admin-space-8: 32px;

    /* Radius */
    --admin-radius-sm: 8px;
    --admin-radius-md: 12px;
    --admin-radius-lg: 16px;

    /* Shadow */
    --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --admin-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
    --admin-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.28);

    /* Layout */
    --admin-content: 1200px;
    --admin-wide: 1440px;
    --admin-mobile-max: 900px;
    --admin-header-height: 64px;
    --admin-tabs-height: 48px;
    --editor-mobile-chrome: 220px;

    /* Focus */
    --admin-focus-ring: rgba(255, 255, 255, 0.38);

    /* Typography */
    --admin-font-size-xs: 11px;
    --admin-font-size-sm: 12px;
    --admin-font-size-md: 14px;
    --admin-font-size-lg: 16px;
    --admin-font-weight-medium: 600;
    --admin-font-weight-semibold: 650;
    --admin-font-weight-bold: 700;

    /* Editor */
    --admin-editor-canvas: #000000;
    --admin-editor-panel: var(--admin-surface-muted);
    --admin-editor-chrome: var(--admin-surface);
    --admin-editor-popover: rgba(30, 30, 33, 0.96);

    /*
     * SLE bundle bridge — legacy имена в svg-layout-editor.bundle.css.
     * Переопределяются на #adminSvgEditorMount.sle-mounted в admin-editor-layout.css.
     */
    --sle-bg-app: var(--admin-bg);
    --sle-bg-chrome: var(--admin-editor-chrome);
    --sle-bg-panel: var(--admin-editor-panel);
    --sle-bg-panel-strong: var(--admin-surface);
    --sle-stroke: var(--admin-border);
    --sle-stroke-subtle: var(--admin-border-subtle);

    /* SLE content: текст и заливки контролов (bundle использует c fallback).
     * Маппинг на admin-токены — следуют теме автоматически. */
    --sle-text: var(--admin-text);
    --sle-text-secondary: var(--admin-text-secondary);
    --sle-text-muted: var(--admin-text-muted);
    --sle-btn-fill: rgba(255, 255, 255, 0.1);
    --sle-btn-fill-hover: rgba(255, 255, 255, 0.2);
    --sle-input-bg: rgba(0, 0, 0, 0.35);

    /* Overlay */
    --admin-overlay: rgba(14, 14, 16, 0.8);

    color-scheme: dark;
}

/* ——— Light theme — Tabler palette (https://tabler.io)
 * body #f6f8fb, surface #fff, text #182433, muted #6c7a91,
 * border #dce1e7, primary #066fd1
 */
html[data-admin-theme="light"] {
    --admin-bg: #f6f8fb;
    --admin-bg-elevated: #ffffff;
    --admin-surface: #ffffff;
    --admin-surface-muted: #eef3f6;
    --admin-surface-card: #ffffff;
    --admin-surface-hover: #eef3f6;
    --admin-surface-glass: rgba(4, 32, 69, 0.06);
    --admin-surface-glass-subtle: rgba(4, 32, 69, 0.04);

    --admin-preview-well: #eef3f6;
    --admin-preview-well-deep: #dce1e7;

    --admin-border-subtle: rgba(4, 32, 69, 0.08);
    --admin-border: #dce1e7;
    --admin-border-strong: #b8c4d4;
    --admin-border-solid: #b8c4d4;

    /*
     * Текст темнее, чем в стоковом Tabler: станция работает при дневном
     * свете, вторичный текст обязан держать ≥4.5:1 на белом.
     */
    --admin-text: #182433;
    --admin-text-secondary: #2f3e51;
    --admin-text-muted: #56677f;
    --admin-text-faint: #74839b;

    --admin-accent: #182433;
    --admin-accent-line: #3a4859;
    --admin-primary: #066fd1;
    --admin-primary-hover: #0559a7;
    --admin-on-primary: #ffffff;
    --admin-on-danger: #ffffff;
    --admin-brand: #ef3124;

    /* Статусные цвета затемнены: используются и как текст на пастельных фонах */
    --admin-danger: #c22f2f;
    --admin-danger-hover: #a82828;
    --admin-danger-muted: #f7d7d7;
    --admin-danger-border: #ecb8b8;
    --admin-success: #1a7f33;
    --admin-success-muted: #d5f0da;
    --admin-success-border: #a8dcb5;
    --admin-warning: #a8530a;
    --admin-warning-muted: #fde1cd;
    --admin-warning-border: #f3c39e;
    --admin-info: #1c6dc2;
    --admin-info-muted: #d9ebf9;
    --admin-info-border: #a9cef0;

    --admin-hover-fill: #eef3f6;
    --admin-active-fill: #cde2f6;
    --admin-chip-fill: #eef3f6;
    --admin-chip-fill-strong: #dce1e7;

    --admin-shadow-sm: 0 1px 2px rgba(24, 36, 51, 0.04), 0 1px 3px rgba(24, 36, 51, 0.06);
    --admin-shadow-md: 0 0.5rem 1.5rem rgba(24, 36, 51, 0.08);
    --admin-shadow-inset: none;

    --admin-focus-ring: rgba(6, 111, 209, 0.35);

    /* Редактор следует светлой теме (Tabler) */
    --admin-editor-canvas: #eef3f6;
    --admin-editor-panel: #ffffff;
    --admin-editor-chrome: #ffffff;
    --admin-editor-popover: #ffffff;

    --sle-bg-app: #f6f8fb;
    --sle-bg-chrome: #ffffff;
    --sle-bg-panel: #ffffff;
    --sle-bg-panel-strong: #eef3f6;
    --sle-stroke: #dce1e7;
    --sle-stroke-subtle: rgba(4, 32, 69, 0.08);

    --sle-btn-fill: rgba(4, 32, 69, 0.06);
    --sle-btn-fill-hover: rgba(4, 32, 69, 0.12);
    --sle-input-bg: #ffffff;

    --admin-overlay: rgba(24, 36, 51, 0.45);

    color-scheme: light;
}