/* WPG Analytics — Design Tokens */

@font-face {
    font-family: WPGFont;
    src: url("/fonts/IRANYekanWPGNumFa.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: WPGFont;
    src: url("/fonts/IRANYekanWPGNumFa.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: WPGFont;
    src: url("/fonts/IRANYekanWPGNumFa.woff") format("woff");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    --wpg-font: WPGFont, "Segoe UI", system-ui, sans-serif;

    /* Brand */
    --wpg-accent: #3b82f6;
    --wpg-accent-2: #06b6d4;
    --wpg-accent-3: #8b5cf6;
    --wpg-gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 55%, #8b5cf6 100%);
    --wpg-gradient-soft: linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(6,182,212,.08) 100%);
    --wpg-header-glass: rgba(255,255,255,.82);
    --wpg-loader-overlay: rgba(255,255,255,.72);
    --wpg-empty-icon-bg: linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(6,182,212,.08) 100%);
    --wpg-empty-icon-border: rgba(59,130,246,.12);

    /* Light shell */
    --wpg-bg: #f4f6fb;
    --wpg-bg-mesh: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(59,130,246,.07), transparent 55%),
                   radial-gradient(ellipse 60% 50% at 90% 10%, rgba(139,92,246,.06), transparent 50%),
                   #f4f6fb;
    --wpg-surface: #ffffff;
    --wpg-surface-2: #f8fafc;
    --wpg-border: rgba(15, 23, 42, 0.08);
    --wpg-border-strong: rgba(15, 23, 42, 0.12);
    --wpg-text: #0f172a;
    --wpg-text-muted: #64748b;
    --wpg-text-soft: #94a3b8;

    /* Dark sidebar */
    --wpg-sidebar-bg: #0b0f1a;
    --wpg-sidebar-bg-2: #111827;
    --wpg-sidebar-text: #94a3b8;
    --wpg-sidebar-text-active: #f8fafc;
    --wpg-sidebar-border: rgba(255,255,255,.06);
    --wpg-sidebar-hover: rgba(255,255,255,.05);
    --wpg-sidebar-active: rgba(59,130,246,.15);

    /* Admin accent */
    --wpg-admin-accent: #6366f1;
    --wpg-admin-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);

    /* Elevation */
    --wpg-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --wpg-shadow-sm: 0 4px 16px rgba(15,23,42,.06);
    --wpg-shadow-md: 0 12px 40px rgba(15,23,42,.08);
    --wpg-shadow-lg: 0 24px 64px rgba(15,23,42,.12);
    --wpg-shadow-glow: 0 0 0 1px rgba(59,130,246,.08), 0 8px 32px rgba(59,130,246,.12);

    /* Radius */
    --wpg-radius-sm: 10px;
    --wpg-radius: 14px;
    --wpg-radius-lg: 20px;
    --wpg-radius-xl: 24px;

    /* Layout */
    --wpg-header-h: 64px;
    --wpg-sidebar-w: 260px;
    --wpg-transition: .2s cubic-bezier(.4,0,.2,1);

    /* Z-index scale */
    --wpg-z-sidebar-overlay: 1035;
    --wpg-z-header: 1040;
    --wpg-z-sidebar: 1045;
    --wpg-z-modal-backdrop: 1050;
    --wpg-z-modal: 1055;
    --wpg-z-datepicker: 1065;
    --wpg-z-page-overlay: 1075;
    --wpg-z-toast: 1085;

    /* Scrollbars */
    --wpg-scrollbar-size: 5px;
    --wpg-scrollbar-thumb: rgba(15, 23, 42, 0.22);
    --wpg-scrollbar-thumb-hover: rgba(15, 23, 42, 0.38);
    --wpg-scrollbar-track: transparent;
}

/* ─── Dark theme (customer + admin content) ─── */
html[data-wpg-theme="dark"] {
    color-scheme: dark;

    --wpg-bg: #0a0e17;
    --wpg-bg-mesh: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(59,130,246,.08), transparent 55%),
                   radial-gradient(ellipse 60% 50% at 90% 10%, rgba(139,92,246,.06), transparent 50%),
                   #0a0e17;
    --wpg-surface: #111827;
    --wpg-surface-2: #1a2234;
    --wpg-border: rgba(255,255,255,.08);
    --wpg-border-strong: rgba(255,255,255,.12);
    --wpg-text: #f1f5f9;
    --wpg-text-muted: #94a3b8;
    --wpg-text-soft: #64748b;

    --wpg-shadow-xs: 0 1px 2px rgba(0,0,0,.25);
    --wpg-shadow-sm: 0 4px 16px rgba(0,0,0,.35);
    --wpg-shadow-md: 0 12px 40px rgba(0,0,0,.4);
    --wpg-shadow-lg: 0 24px 64px rgba(0,0,0,.5);
    --wpg-shadow-glow: 0 0 0 1px rgba(59,130,246,.15), 0 8px 32px rgba(59,130,246,.2);

    --wpg-sidebar-bg: #060912;
    --wpg-sidebar-bg-2: #0b0f1a;

    --wpg-gradient-soft: linear-gradient(135deg, rgba(59,130,246,.2) 0%, rgba(6,182,212,.12) 100%);
    --wpg-header-glass: rgba(17,24,39,.9);
    --wpg-loader-overlay: rgba(10,14,23,.78);
    --wpg-empty-icon-bg: linear-gradient(135deg, rgba(59,130,246,.22) 0%, rgba(6,182,212,.14) 100%);
    --wpg-empty-icon-border: rgba(59,130,246,.25);

    --wpg-scrollbar-thumb: rgba(148, 163, 184, 0.32);
    --wpg-scrollbar-thumb-hover: rgba(148, 163, 184, 0.52);
}