/*
 * Дизайн-токены портала аналитики. Единый источник правды для 3 тем:
 *   .pg-theme-clarity  — светлая (акцент amber)
 *   .pg-theme-glass    — светлая-премиум, стекло (акцент золото)
 *   .pg-theme-midnight — тёмная (акцент amber + teal), требует html.dark
 *
 * Токены — обычные CSS custom properties, потребляются компонентами (pg-ui-kit.css)
 * и переопределяются на уровне body.pg-theme-*. Не зависят от сборки Vite.
 */

:root {
    /* Типографика */
    --app-font-head: "Syne", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --app-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

    /* Радиусы */
    --app-radius-sm: 0.5rem;
    --app-radius-md: 0.75rem;
    --app-radius-lg: 1rem;
    --app-radius-xl: 1.25rem;
    --app-radius-pill: 999px;

    /* Спейсинг (шаг 4px) */
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
    --app-space-8: 2rem;

    /* Движение */
    --app-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --app-dur: 180ms;
}

/* ============================================================
 * CLARITY — светлая, минимализм, акцент amber
 * ============================================================ */
.pg-theme-clarity,
body.pg-theme-clarity {
    --app-bg: #f8fafc;
    --app-bg-image: none;
    --app-surface: #ffffff;
    --app-surface-2: #f1f5f9;
    --app-surface-hover: #f8fafc;
    --app-border: #e2e8f0;
    --app-border-strong: #cbd5e1;
    --app-text: #0f172a;
    --app-text-muted: #64748b;
    --app-text-subtle: #94a3b8;

    --app-accent: #d97706;
    --app-accent-strong: #b45309;
    --app-accent-soft: rgba(217, 119, 6, 0.12);
    --app-accent-border: rgba(217, 119, 6, 0.35);
    --app-on-accent: #ffffff;

    --app-series-1: #d97706;
    --app-series-2: #0f766e;
    --app-series-3: #0ea5e9;
    --app-series-4: #22c55e;
    --app-series-5: #e11d48;
    --app-series-6: #7c3aed;

    --app-success: #16a34a;
    --app-info: #0ea5e9;
    --app-warning: #d97706;
    --app-danger: #dc2626;

    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --app-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --app-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.12);

    /* В clarity стекло = обычная поверхность */
    --app-glass-bg: var(--app-surface);
    --app-glass-blur: 0px;
    --app-glass-border: var(--app-border);
    --app-glass-highlight: transparent;

    --app-card-radius: var(--app-radius-lg);
}

/* ============================================================
 * GLASS — светлая-премиум, стекло, акцент золото
 * ============================================================ */
.pg-theme-glass,
body.pg-theme-glass {
    --app-bg: #f4eee2;
    --app-bg-image:
        radial-gradient(1200px 600px at 12% -5%, rgba(224, 180, 74, 0.22), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(148, 163, 184, 0.22), transparent 55%),
        linear-gradient(160deg, #f7f1e6 0%, #eef1f6 100%);
    --app-surface: rgba(255, 255, 255, 0.62);
    --app-surface-2: rgba(255, 255, 255, 0.42);
    --app-surface-hover: rgba(255, 255, 255, 0.78);
    --app-border: rgba(255, 255, 255, 0.6);
    --app-border-strong: rgba(148, 163, 184, 0.45);
    --app-text: #1f2937;
    --app-text-muted: #5b6675;
    --app-text-subtle: #8a93a3;

    --app-accent: #c79a35;
    --app-accent-strong: #a37f24;
    --app-accent-soft: rgba(224, 180, 74, 0.2);
    --app-accent-border: rgba(199, 154, 53, 0.4);
    --app-on-accent: #2a2310;

    --app-series-1: #c79a35;
    --app-series-2: #3b5b82;
    --app-series-3: #0f766e;
    --app-series-4: #2f9e6f;
    --app-series-5: #c2603f;
    --app-series-6: #6d5bd0;

    --app-success: #2f9e6f;
    --app-info: #3b5b82;
    --app-warning: #c79a35;
    --app-danger: #c2603f;

    --app-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --app-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.1);
    --app-shadow-lg: 0 22px 55px rgba(15, 23, 42, 0.14);

    --app-glass-bg: rgba(255, 255, 255, 0.55);
    --app-glass-blur: 16px;
    --app-glass-border: rgba(255, 255, 255, 0.6);
    --app-glass-highlight: rgba(255, 255, 255, 0.7);

    --app-card-radius: var(--app-radius-xl);
}

/* ============================================================
 * MIDNIGHT — тёмная, командный центр, акцент amber + teal
 * (применяется вместе с html.dark для нативных компонентов Filament)
 * ============================================================ */
.pg-theme-midnight,
body.pg-theme-midnight {
    --app-bg: #0b1120;
    --app-bg-image:
        radial-gradient(1100px 520px at 8% -8%, rgba(245, 158, 11, 0.1), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(45, 212, 191, 0.1), transparent 55%);
    --app-surface: #0f172a;
    --app-surface-2: #131c2e;
    --app-surface-hover: #16203a;
    --app-border: rgba(148, 163, 184, 0.18);
    --app-border-strong: rgba(148, 163, 184, 0.32);
    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-text-subtle: #64748b;

    --app-accent: #f59e0b;
    --app-accent-strong: #fbbf24;
    --app-accent-soft: rgba(245, 158, 11, 0.16);
    --app-accent-border: rgba(245, 158, 11, 0.4);
    --app-on-accent: #1a1304;

    --app-accent-2: #2dd4bf;

    --app-series-1: #f59e0b;
    --app-series-2: #2dd4bf;
    --app-series-3: #8b5cf6;
    --app-series-4: #34d399;
    --app-series-5: #38bdf8;
    --app-series-6: #fb7185;

    --app-success: #34d399;
    --app-info: #38bdf8;
    --app-warning: #f59e0b;
    --app-danger: #fb7185;

    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --app-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --app-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);

    --app-glass-bg: rgba(15, 23, 42, 0.55);
    --app-glass-blur: 14px;
    --app-glass-border: rgba(148, 163, 184, 0.22);
    --app-glass-highlight: rgba(255, 255, 255, 0.06);

    --app-card-radius: var(--app-radius-lg);
}