/**
 * ZERTI design tokens — canonical source for the admin design system.
 * Loaded before zerti-admin.css. Documented in docs/DESIGN-SYSTEM.md.
 *
 * Scope: #zertiAdmin only. Do not use these variables outside the admin shell.
 */

#zertiAdmin {
    /* —— Brand —— */
    --zerti-brand: #712cf9;
    --zerti-brand-hover: #6528e0;
    --zerti-brand-rgb: 113, 44, 249;
    /* Legacy aliases (prefer --zerti-brand in new code) */
    --zerti-bs-purple: var(--zerti-brand);
    --zerti-bs-purple-hover: var(--zerti-brand-hover);

    /* —— Bootstrap bridge (primary = brand) —— */
    --bs-primary: var(--zerti-brand);
    --bs-primary-rgb: var(--zerti-brand-rgb);
    --bs-link-color: var(--zerti-brand);
    --bs-link-color-rgb: var(--zerti-brand-rgb);
    --bs-focus-ring-color: rgba(var(--zerti-brand-rgb), 0.25);

    /* —— Typography —— */
    --zerti-font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zerti-font-size-base: 9pt;
    --zerti-font-size-sm: 0.875em;
    --zerti-line-height-base: 1.5;
    --zerti-line-height-tight: 1.35;

    /* —— Spacing (Bootstrap-aligned rem scale) —— */
    --zerti-space-1: 0.25rem;
    --zerti-space-2: 0.5rem;
    --zerti-space-3: 1rem;
    --zerti-space-4: 1.5rem;
    --zerti-space-5: 3rem;

    /* —— Radius —— */
    --zerti-radius-sm: 0.25rem;
    --zerti-radius-md: 0.375rem;
    --zerti-radius-lg: 0.5rem;
    --zerti-radius-panel: 14px;
    --zerti-component-panel-radius: var(--zerti-radius-panel);
    --zerti-radius-input: var(--zerti-radius-md);
    --zerti-radius-card: 0.75rem;
    --zerti-radius-pill: 999px;

    /* —— Breakpoints (reference; use same values in @media) —— */
    --zerti-bp-sm: 576px;
    --zerti-bp-md: 768px;
    --zerti-bp-lg: 992px;
    --zerti-bp-xl: 1200px;
    --zerti-bp-xxl: 1400px;

    /* —— Chrome controls —— */
    --zerti-control-pill-w: 96px;
    --zerti-control-pill-h: 36px;
    --zerti-color-white-text: color-mix(in srgb, #000000 5%, #ffffff);

    /* —— Buttons (Zerti original defaults) —— */
    --zerti-btn-font-size: inherit;
    --zerti-btn-min-height: 2.125rem;
    --zerti-btn-border-radius: var(--zerti-radius-md);
    --zerti-btn-primary-gradient: linear-gradient(135deg, #4c1d95 0%, #5b21b6 18%, #712cf9 45%, #4c6ef5 72%, #228be6 100%);
    --zerti-btn-primary-hover-shadow: rgba(113, 44, 249, 0.45);
    --zerti-btn-primary-focus-shadow: rgba(113, 44, 249, 0.45);
    --zerti-btn-outline-border-gradient: linear-gradient(135deg, #712cf9 0%, #4c6ef5 45%, #15aabf 100%);
    --zerti-btn-outline-hover-shadow: rgba(113, 44, 249, 0.28);
    --zerti-btn-outline-focus-shadow: rgba(113, 44, 249, 0.35);

    /* —— Semantic accent (surfaces, borders, focus) —— */
    --zerti-docs-accent: var(--zerti-brand);

    /* —— Chart.js (home dashboard) —— */
    --zerti-chart-brand-border: rgba(var(--zerti-brand-rgb), 0.85);
    --zerti-chart-brand-fill: rgba(var(--zerti-brand-rgb), 0.12);
    --zerti-chart-brand-border-dark: rgba(171, 136, 255, 0.95);
    --zerti-chart-brand-fill-dark: rgba(171, 136, 255, 0.15);
    --zerti-chart-grid-dark: rgba(255, 255, 255, 0.08);
    --zerti-chart-grid-light: rgba(33, 37, 41, 0.12);
    --zerti-chart-text-dark: rgba(255, 255, 255, 0.65);
    --zerti-chart-text-light: rgba(33, 37, 41, 0.75);
    --zerti-chart-label-dark: rgba(255, 255, 255, 0.92);
    --zerti-chart-label-light: rgba(33, 37, 41, 0.92);
    --zerti-chart-label-bg-dark: rgba(33, 37, 41, 0.88);
    --zerti-chart-label-bg-light: rgba(255, 255, 255, 0.92);

    /* —— WordPress admin integration —— */
    --wp-admin-theme-color: var(--zerti-brand);
    --wp-admin-border-width-focus: 1.5px;
}

#zertiAdmin[data-bs-theme='dark'] {
    --zerti-docs-bg: #212529;
    --zerti-docs-subtle-bg: #2b3035;
    --zerti-docs-border: #495057;
    --zerti-docs-text: #dee2e6;
    --zerti-docs-muted: #adb5bd;
    --zerti-link-hover-color: #c8cfd6;
    --bs-link-hover-color: var(--zerti-link-hover-color);
    color-scheme: dark;
}

#zertiAdmin[data-bs-theme='light'] {
    --zerti-docs-bg: #ffffff;
    --zerti-docs-subtle-bg: #f8f9fa;
    --zerti-docs-border: #dee2e6;
    --zerti-docs-text: #212529;
    --zerti-docs-muted: #6c757d;
    --zerti-link-hover-color: #6c757d;
    --bs-link-hover-color: var(--zerti-link-hover-color);
    color-scheme: light;
}
