/* ==========================================================
   Vendor Dashboard Design System — "Admin Panel" edition
   CSS Custom Properties for the vendor/seller dashboard.
   Light sidebar + brand palette (slate #253237, green #80b435)
   with pastel KPI tints, inspired by modern admin templates.
   ========================================================== */

:root {
    /* --- Primary Colors (from Ecolife theme) --- */
    --vd-primary: #253237;
    --vd-primary-hover: #1a2327;
    --vd-primary-light: rgba(37, 50, 55, 0.06);
    --vd-primary-rgb: 37, 50, 55;

    /* --- Secondary / CTA (from Ecolife theme) --- */
    --vd-secondary: #80b435;
    --vd-secondary-hover: #6a9a2d;
    --vd-secondary-light: rgba(128, 180, 53, 0.1);

    /* --- Neutral / Background Colors --- */
    --vd-bg-body: #f5f7fa;
    --vd-bg-card: #ffffff;
    --vd-bg-header: #ffffff;
    --vd-bg-table-header: #f8f9fb;
    --vd-bg-table-hover: #f8fafc;

    /* --- Sidebar (light) --- */
    --vd-bg-sidebar: #ffffff;
    --vd-bg-sidebar-hover: #f5f7fa;
    --vd-bg-sidebar-active: rgba(128, 180, 53, 0.14);
    --vd-text-sidebar: #5b6b73;
    --vd-text-sidebar-hover: #253237;
    --vd-text-sidebar-active: #4e7a1d;
    --vd-sidebar-section-label: #9ca3af;
    --vd-sidebar-border: #eef1f4;

    /* --- Topbar (admin chrome) --- */
    --vd-bg-topbar: #ffffff;
    --vd-topbar-height: 56px;
    --vd-topbar-shadow: 0 1px 4px rgba(37, 50, 55, 0.08);

    /* --- Text Colors --- */
    --vd-text-primary: #253237;
    --vd-text-secondary: #6c757d;
    --vd-text-muted: #9ca3af;
    --vd-text-link: #007185;

    /* --- Status Colors --- */
    --vd-success: #28a745;
    --vd-success-light: #d4edda;
    --vd-warning: #ffc107;
    --vd-warning-light: #fff3cd;
    --vd-danger: #dc3545;
    --vd-danger-light: #f8d7da;
    --vd-info: #17a2b8;
    --vd-info-light: #d1ecf1;

    /* --- Status pills (bg + fg pairs) --- */
    --vd-pill-success-bg: #e3f5e9;
    --vd-pill-success-fg: #1e7a3c;
    --vd-pill-warning-bg: #fdf3dd;
    --vd-pill-warning-fg: #9a6c10;
    --vd-pill-danger-bg: #fde7e5;
    --vd-pill-danger-fg: #b3362b;
    --vd-pill-neutral-bg: #eef1f4;
    --vd-pill-neutral-fg: #5b6b73;

    /* --- Summary Box Colors (existing KB color classes) --- */
    --vd-stat-blue: #3498db;
    --vd-stat-purple: #9b59b6;
    --vd-stat-green: #27ae60;
    --vd-stat-yellow: #f39c12;
    --vd-stat-red: #e74c3c;

    /* --- Pastel KPI tints (Dashtar-style card backgrounds) --- */
    --vd-tint-blue: #e3f0fa;
    --vd-tint-blue-fg: #2471a3;
    --vd-tint-purple: #efe9f9;
    --vd-tint-purple-fg: #7d3c98;
    --vd-tint-green: #e8f3d8;
    --vd-tint-green-fg: #4e7a1d;
    --vd-tint-amber: #fdf3dd;
    --vd-tint-amber-fg: #b9770e;
    --vd-tint-red: #fde7e5;
    --vd-tint-red-fg: #b3362b;

    /* --- Border --- */
    --vd-border: #e2e7ec;
    --vd-border-light: #eef1f4;

    /* --- Spacing & Layout --- */
    --vd-sidebar-width: 260px;
    --vd-card-radius: 12px;
    --vd-card-radius-sm: 8px;
    --vd-card-shadow: 0 1px 4px rgba(37, 50, 55, 0.06);
    --vd-card-shadow-hover: 0 6px 18px rgba(37, 50, 55, 0.1);
    --vd-card-padding: 20px;
    --vd-card-padding-sm: 15px;

    /* --- Typography --- */
    --vd-font-family: inherit;
    --vd-font-size-xs: 11px;
    --vd-font-size-sm: 12px;
    --vd-font-size-base: 14px;
    --vd-font-size-lg: 16px;
    --vd-font-size-xl: 20px;
    --vd-font-size-h1: 24px;
    --vd-font-size-h2: 20px;
    --vd-font-size-stat: 26px;

    /* --- Transitions --- */
    --vd-transition: all 0.2s ease;
    --vd-transition-slow: all 0.3s ease;

    /* --- Z-index Scale --- */
    --vd-z-sidebar: 100;
    --vd-z-header: 200;
    --vd-z-modal-overlay: 1050;
    --vd-z-modal: 1060;
    --vd-z-tooltip: 1100;
}