/* ==========================================================
   ADMIN DESIGN SYSTEM
   File : base/variables.css
   Version : 2.0.0
   Description : Global Design Tokens
   Author : Alal Miah
========================================================== */

:root{

/* ==========================================================
   LAYOUT
========================================================== */

    --header-height:60px;
    --topbar-height:60px;

    --sidebar-width:260px;
    --sidebar-collapse-width:72px;

    --container-width:1600px;
    --content-max-width:1600px;

    --footer-height:60px;

    --page-padding:2px;
    --section-gap:24px;

    --grid-gap:20px;


/* ==========================================================
   Z INDEX
========================================================== */

    --z-dropdown:1000;
    --z-sticky:1020;
    --z-fixed:1030;
    --z-sidebar:1040;
    --z-header:1050;
    --z-backdrop:1060;
    --z-modal:1070;
    --z-popover:1080;
    --z-tooltip:1090;
    --z-toast:1100;


/* ==========================================================
   PRIMARY COLOR PALETTE
========================================================== */

    --primary:#3f9ad6;
    --primary-50:#f2f9fd;
    --primary-100:#d7edf7;
    --primary-200:#bbdfed;
    --primary-300:#8fc8e3;
    --primary-400:#63b2dc;
    --primary-500:#3f9ad6;
    --primary-600:#2d7eb4;
    --primary-700:#256995;
    --primary-800:#1f5577;
    --primary-900:#18445f;

    --primary-light:var(--primary-100);
    --primary-dark:var(--primary-700);
    --primary-hover:var(--primary-600);


/* ==========================================================
   SUCCESS COLORS
========================================================== */

    --success:#16a34a;

    --success-50:#f0fdf4;
    --success-100:#dcfce7;
    --success-200:#bbf7d0;
    --success-300:#86efac;
    --success-400:#4ade80;
    --success-500:#22c55e;
    --success-600:#16a34a;
    --success-700:#15803d;
    --success-800:#166534;
    --success-900:#14532d;

    --success-light:var(--success-100);
    --success-dark:var(--success-700);
    --success-hover:var(--success-700);


/* ==========================================================
   INFO COLORS
========================================================== */

    --info:#0ea5e9;

    --info-50:#ecfeff;
    --info-100:#cffafe;
    --info-200:#a5f3fc;
    --info-300:#67e8f9;
    --info-400:#22d3ee;
    --info-500:#06b6d4;
    --info-600:#0891b2;
    --info-700:#0e7490;
    --info-800:#155e75;
    --info-900:#164e63;

    --info-light:var(--info-100);
    --info-dark:var(--info-700);
    --info-hover:var(--info-600);


/* ==========================================================
   WARNING COLORS
========================================================== */

    --warning:#f59e0b;

    --warning-50:#fffbeb;
    --warning-100:#fef3c7;
    --warning-200:#fde68a;
    --warning-300:#fcd34d;
    --warning-400:#fbbf24;
    --warning-500:#f59e0b;
    --warning-600:#d97706;
    --warning-700:#b45309;
    --warning-800:#92400e;
    --warning-900:#78350f;

    --warning-light:var(--warning-100);
    --warning-dark:var(--warning-700);
    --warning-hover:var(--warning-600);


/* ==========================================================
   DANGER COLORS
========================================================== */

    --danger:#dc2626;

    --danger-50:#fef2f2;
    --danger-100:#fee2e2;
    --danger-200:#fecaca;
    --danger-300:#fca5a5;
    --danger-400:#f87171;
    --danger-500:#ef4444;
    --danger-600:#dc2626;
    --danger-700:#b91c1c;
    --danger-800:#991b1b;
    --danger-900:#7f1d1d;

    --danger-light:var(--danger-100);
    --danger-dark:var(--danger-700);
    --danger-hover:var(--danger-700);


/* ==========================================================
   SECONDARY COLORS
========================================================== */

    --secondary:#64748b;

    --secondary-50:#f8fafc;
    --secondary-100:#f1f5f9;
    --secondary-200:#e2e8f0;
    --secondary-300:#cbd5e1;
    --secondary-400:#94a3b8;
    --secondary-500:#64748b;
    --secondary-600:#475569;
    --secondary-700:#334155;
    --secondary-800:#1e293b;
    --secondary-900:#0f172a;

    --secondary-light:var(--secondary-100);
    --secondary-dark:var(--secondary-700);
    --secondary-hover:var(--secondary-600);


/* ==========================================================
   BASIC COLORS
========================================================== */

    --white:#ffffff;
    --black:#000000;

    --transparent:transparent;

    --facebook:#1877f2;
    --twitter:#1da1f2;
    --youtube:#ff0000;
    --instagram:#e4405f;
    --linkedin:#0a66c2;
    --github:#24292e;
    --whatsapp:#25d366;


/* ==========================================================
   GRAYSCALE
========================================================== */

    --gray-50:#f9fafb;
    --gray-100:#f3f4f6;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-400:#9ca3af;
    --gray-500:#6b7280;
    --gray-600:#4b5563;
    --gray-700:#374151;
    --gray-800:#1f2937;
    --gray-900:#111827;


/* ==========================================================
   TEXT COLORS
========================================================== */

    --text-primary:#0f172a;
    --text-secondary:#334155;
    --text-muted:#64748b;
    --text-light:#94a3b8;
    --text-disabled:#cbd5e1;

    --text-white:#ffffff;
    --text-black:#000000;

    --text-link:var(--primary);
    --text-link-hover:var(--primary-dark);

    --text-success:var(--success);
    --text-info:var(--info);
    --text-warning:var(--warning);
    --text-danger:var(--danger);

    --heading-color:#0f172a;
    --paragraph-color:#475569;


/* ==========================================================
   BACKGROUND COLORS
========================================================== */

    --body-bg:#f8fafc;

    --bg-primary:#ffffff;
    --bg-secondary:#f8fafc;
    --bg-light:#ffffff;
    --bg-dark:#0f172a;

    --card-bg:#ffffff;
    --card-header-bg:#ffffff;
    --card-footer-bg:#f8fafc;

    --table-bg:#ffffff;
    --table-hover:#f8fbff;
    --table-head:#3f9ad6;



/* ==========================================================
   BORDER SYSTEM
========================================================== */

    --border:#e5e7eb;

    --border-light:#eef2f7;
    --border-soft:#f1f5f9;
    --border-dark:#cbd5e1;

    --border-primary:var(--primary);
    --border-success:var(--success);
    --border-info:var(--info);
    --border-warning:var(--warning);
    --border-danger:var(--danger);

    --border-width:1px;
    --border-width-md:2px;
    --border-width-lg:3px;

    --divider-color:#edf2f7;


/* ==========================================================
   SHADOW SYSTEM
========================================================== */

    --shadow-none:none;

    --shadow-xs:
        0 1px 2px rgba(15,23,42,.04);

    --shadow-sm:
        0 2px 6px rgba(15,23,42,.06);

    --shadow-md:
        0 8px 20px rgba(15,23,42,.08);

    --shadow-lg:
        0 14px 34px rgba(15,23,42,.10);

    --shadow-xl:
        0 20px 48px rgba(15,23,42,.12);

    --shadow-2xl:
        0 28px 70px rgba(15,23,42,.18);

    --shadow-card:
        0 8px 24px rgba(15,23,42,.06);

    --shadow-dropdown:
        0 12px 32px rgba(15,23,42,.10);

    --shadow-modal:
        0 24px 60px rgba(15,23,42,.18);

    --shadow-navbar:
        0 2px 12px rgba(15,23,42,.08);

    --shadow-sidebar:
        2px 0 20px rgba(15,23,42,.08);

    --shadow-button:
        0 8px 18px rgba(15,23,42,.12);

    --shadow-focus:
        0 0 0 4px rgba(63,154,214,.18);


/* ==========================================================
   BORDER RADIUS
========================================================== */

    --radius-none:0;

    --radius-xs:4px;
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-xl:16px;
    --radius-2xl:20px;
    --radius-3xl:28px;

    --radius-round:999px;
    --radius-circle:50%;


/* ==========================================================
   SPACING SCALE
========================================================== */

    --space-0:0;

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:28px;
    --space-8:32px;
    --space-9:36px;
    --space-10:40px;
    --space-11:48px;
    --space-12:56px;
    --space-13:64px;
    --space-14:72px;
    --space-15:80px;


/* ==========================================================
   FONT FAMILY
========================================================== */

    --font-family-base:
        "Inter",
        "SolaimanLipi",
        sans-serif;

    --font-family-heading:
        "Inter",
        "SolaimanLipi",
        sans-serif;

    --font-family-mono:
        Consolas,
        Monaco,
        monospace;


/* ==========================================================
   FONT SIZE
========================================================== */

    --font-xs:12px;
    --font-sm:13px;
    --font-md:14px;
    --font-lg:16px;
    --font-xl:18px;
    --font-2xl:20px;
    --font-3xl:24px;
    --font-4xl:28px;
    --font-5xl:34px;

    --font-title:30px;
    --font-subtitle:18px;


/* ==========================================================
   FONT WEIGHT
========================================================== */

    --fw-thin:100;
    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:900;


/* ==========================================================
   LINE HEIGHT
========================================================== */

    --lh-xs:1;
    --lh-sm:1.2;
    --lh-md:1.4;
    --lh-lg:1.6;
    --lh-xl:1.8;
    --lh-2xl:2;


/* ==========================================================
   LETTER SPACING
========================================================== */

    --tracking-tight:-.03em;
    --tracking-normal:0;
    --tracking-wide:.03em;
    --tracking-wider:.06em;


/* ==========================================================
   OPACITY
========================================================== */

    --opacity-0:0;
    --opacity-10:.1;
    --opacity-20:.2;
    --opacity-30:.3;
    --opacity-40:.4;
    --opacity-50:.5;
    --opacity-60:.6;
    --opacity-70:.7;
    --opacity-80:.8;
    --opacity-90:.9;
    --opacity-100:1;


/* ==========================================================
   BLUR
========================================================== */

    --blur-xs:2px;
    --blur-sm:4px;
    --blur-md:8px;
    --blur-lg:12px;
    --blur-xl:18px;


/* ==========================================================
   TRANSITIONS
========================================================== */

    --transition-fast:.15s ease;

    --transition:.25s ease;

    --transition-slow:.4s ease;

    --transition-bounce:
        .35s cubic-bezier(.34,1.56,.64,1);

    --transition-linear:
        .25s linear;


/* ==========================================================
   GRADIENTS
========================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #3f9ad6 0%,
            #2d7eb4 100%
        );

    --gradient-success:
        linear-gradient(
            135deg,
            #22c55e 0%,
            #15803d 100%
        );

    --gradient-info:
        linear-gradient(
            135deg,
            #0ea5e9 0%,
            #0284c7 100%
        );

    --gradient-warning:
        linear-gradient(
            135deg,
            #f59e0b 0%,
            #d97706 100%
        );

    --gradient-danger:
        linear-gradient(
            135deg,
            #ef4444 0%,
            #b91c1c 100%
        );

    --gradient-secondary:
        linear-gradient(
            135deg,
            #64748b 0%,
            #334155 100%
        );

    --gradient-light:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #334155 0%,
            #0f172a 100%
        );

    --gradient-sidebar:
        linear-gradient(
            180deg,
            #1e293b 0%,
            #0f172a 100%
        );

    --gradient-header:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #eaf6fc 100%
        );

    --gradient-card:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    --gradient-page:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef6fc 100%
        );
        
        /* ==========================================================
   BUTTON SYSTEM
========================================================== */

    /* Button Size */

    --btn-height-xs:30px;
    --btn-height-sm:36px;
    --btn-height:42px;
    --btn-height-lg:48px;
    --btn-height-xl:56px;

    /* Button Padding */

    --btn-padding-x-xs:10px;
    --btn-padding-x-sm:14px;
    --btn-padding-x:18px;
    --btn-padding-x-lg:24px;
    --btn-padding-x-xl:32px;

    --btn-padding-y-xs:4px;
    --btn-padding-y-sm:6px;
    --btn-padding-y:10px;
    --btn-padding-y-lg:12px;
    --btn-padding-y-xl:14px;

    /* Typography */

    --btn-font-size-xs:12px;
    --btn-font-size-sm:13px;
    --btn-font-size:14px;
    --btn-font-size-lg:15px;
    --btn-font-size-xl:16px;

    --btn-font-weight:600;

    /* Radius */

    --btn-radius-sm:6px;
    --btn-radius:8px;
    --btn-radius-lg:12px;
    --btn-radius-pill:999px;

    /* Shadow */

    --btn-shadow:
        0 8px 18px rgba(15,23,42,.10);

    --btn-shadow-hover:
        0 12px 24px rgba(15,23,42,.14);

    /* Animation */

    --btn-hover-scale:1.02;
    --btn-hover-translate:-2px;

    --btn-transition:var(--transition);

    /* Colors */

    --btn-text:#ffffff;

    --btn-primary:var(--primary);
    --btn-primary-hover:var(--primary-hover);

    --btn-success:var(--success);
    --btn-success-hover:var(--success-hover);

    --btn-info:var(--info);
    --btn-info-hover:var(--info-hover);

    --btn-warning:var(--warning);
    --btn-warning-hover:var(--warning-hover);

    --btn-danger:var(--danger);
    --btn-danger-hover:var(--danger-hover);

    --btn-secondary:var(--secondary);
    --btn-secondary-hover:var(--secondary-hover);

    --btn-light:#ffffff;
    --btn-light-hover:#f8fafc;

    --btn-dark:#0f172a;
    --btn-dark-hover:#1e293b;


/* ==========================================================
   FORM SYSTEM
========================================================== */

    --form-gap:18px;

    --form-label-size:14px;
    --form-label-weight:600;
    --form-label-color:var(--text-primary);

    --form-help-size:12px;
    --form-help-color:var(--text-muted);

    --form-error-size:12px;
    --form-error-color:var(--danger);

    --form-radius:8px;


/* ==========================================================
   INPUT
========================================================== */

    --input-height:42px;
    --input-height-lg:48px;

    --input-padding-x:14px;
    --input-padding-y:10px;

    --input-radius:8px;

    --input-bg:#ffffff;
    --input-color:var(--text-primary);

    --input-border:#d1d5db;

    --input-placeholder:#94a3b8;

    --input-focus:var(--primary);

    --input-disabled-bg:#f3f4f6;
    --input-disabled-text:#9ca3af;

    --input-shadow:none;

    --input-focus-shadow:
        0 0 0 4px rgba(63,154,214,.15);


/* ==========================================================
   TEXTAREA
========================================================== */

    --textarea-min-height:120px;

    --textarea-padding:14px;

    --textarea-radius:8px;


/* ==========================================================
   SELECT BOX
========================================================== */

    --select-height:42px;

    --select-radius:8px;

    --select-bg:#ffffff;

    --select-border:#d1d5db;

    --select-focus:var(--primary);


/* ==========================================================
   SEARCH BOX
========================================================== */

    --search-height:42px;

    --search-radius:999px;

    --search-bg:#ffffff;

    --search-border:#dbe2ea;

    --search-icon:#64748b;

    --search-focus:var(--primary);


/* ==========================================================
   CHECKBOX
========================================================== */

    --checkbox-size:18px;

    --checkbox-radius:4px;

    --checkbox-bg:#ffffff;

    --checkbox-border:#cbd5e1;

    --checkbox-active:var(--primary);


/* ==========================================================
   RADIO
========================================================== */

    --radio-size:18px;

    --radio-border:#cbd5e1;

    --radio-active:var(--primary);

    --radio-bg:#ffffff;


/* ==========================================================
   TOGGLE SWITCH
========================================================== */

    --switch-width:46px;

    --switch-height:24px;

    --switch-radius:999px;

    --switch-bg:#cbd5e1;

    --switch-active:var(--primary);

    --switch-knob:#ffffff;


/* ==========================================================
   FILE INPUT
========================================================== */

    --file-height:44px;

    --file-radius:8px;

    --file-bg:#ffffff;

    --file-border:#d1d5db;


/* ==========================================================
   ACTION BUTTONS
========================================================== */

    --action-size:38px;

    --action-radius:8px;

    --action-color:#ffffff;

    --action-shadow:
        0 6px 16px rgba(15,23,42,.10);

    --action-transition:var(--transition);

    /* View */

    --action-view:var(--info);
    --action-view-hover:var(--info-hover);

    /* Edit */

    --action-edit:var(--success);
    --action-edit-hover:var(--success-hover);

    /* Delete */

    --action-delete:var(--danger);
    --action-delete-hover:var(--danger-hover);

    /* Print */

    --action-print:#8b5cf6;
    --action-print-hover:#7c3aed;

    /* Download */

    --action-download:#f59e0b;
    --action-download-hover:#d97706;

    /* Upload */

    --action-upload:#0ea5e9;
    --action-upload-hover:#0284c7;

    /* Copy */

    --action-copy:#475569;
    --action-copy-hover:#334155;

    /* Share */

    --action-share:#14b8a6;
    --action-share-hover:#0f766e;

    /* Archive */

    --action-archive:#6366f1;
    --action-archive-hover:#4338ca;


/* ==========================================================
   LOADER
========================================================== */

    --loader-size:40px;

    --loader-border:4px;

    --loader-color:var(--primary);

    --loader-bg:#e5e7eb;


/* ==========================================================
   FOCUS RING
========================================================== */

    --focus-ring:
        0 0 0 4px rgba(63,154,214,.18);

    --focus-outline:none;
    
    /* ==========================================================
   CARD SYSTEM
========================================================== */

    --card-bg:#ffffff;
    --card-header-bg:#ffffff;
    --card-footer-bg:#f8fafc;

    --card-border:#e5e7eb;
    --card-border-hover:#dbe4ef;

    --card-radius:14px;
    --card-radius-lg:18px;

    --card-padding:20px;
    --card-padding-lg:24px;

    --card-shadow:var(--shadow-sm);
    --card-shadow-hover:var(--shadow-lg);

    --card-transition:var(--transition);

    --card-title-size:18px;
    --card-title-weight:600;
    --card-title-color:var(--text-primary);

    --card-subtitle-size:13px;
    --card-subtitle-color:var(--text-muted);

    --card-text-color:var(--text-secondary);


/* ==========================================================
   TABLE SYSTEM
========================================================== */

    --table-bg:#ffffff;

    --table-border:#e5e7eb;

    --table-radius:12px;

    --table-padding-y:12px;
    --table-padding-x:16px;

    --table-font-size:14px;

    --table-header-bg:var(--primary);
    --table-header-color:#ffffff;

    --table-header-height:48px;

    --table-row-bg:#ffffff;

    --table-row-hover:#f8fbff;

    --table-striped:#f9fbfd;

    --table-footer-bg:#fafafa;

    --table-shadow:var(--shadow-xs);


/* ==========================================================
   STATUS COLORS
========================================================== */

    --status-font-size:12px;

    --status-font-weight:600;

    --status-radius:999px;

    --status-padding-y:5px;

    --status-padding-x:12px;

    --status-active-bg:#dcfce7;
    --status-active-color:#166534;

    --status-pending-bg:#fef3c7;
    --status-pending-color:#92400e;

    --status-processing-bg:#dbeafe;
    --status-processing-color:#1d4ed8;

    --status-complete-bg:#dcfce7;
    --status-complete-color:#15803d;

    --status-cancel-bg:#fee2e2;
    --status-cancel-color:#b91c1c;

    --status-inactive-bg:#e5e7eb;
    --status-inactive-color:#475569;
    
    --status-success:#dcfce7;
--status-success-text:#166534;

--status-info:#e0f2fe;
--status-info-text:#075985;

--status-warning:#fef3c7;
--status-warning-text:#92400e;

--status-danger:#fee2e2;
--status-danger-text:#991b1b;

--status-dark:#334155;
--status-dark-text:#ffffff;

--status-light:#f8fafc;
--status-light-text:#475569;


/* ==========================================================
   BADGE
========================================================== */

    --badge-radius:999px;

    --badge-font-size:12px;

    --badge-font-weight:600;

    --badge-padding-y:5px;

    --badge-padding-x:10px;

    --badge-shadow:none;


/* ==========================================================
   ALERT
========================================================== */

    --alert-radius:10px;

    --alert-padding:16px;

    --alert-border-width:1px;

    --alert-font-size:14px;

    --alert-title-weight:600;

    --alert-success-bg:#ecfdf5;
    --alert-success-border:#bbf7d0;
    --alert-success-color:#166534;

    --alert-danger-bg:#fef2f2;
    --alert-danger-border:#fecaca;
    --alert-danger-color:#991b1b;

    --alert-warning-bg:#fffbeb;
    --alert-warning-border:#fde68a;
    --alert-warning-color:#92400e;

    --alert-info-bg:#ecfeff;
    --alert-info-border:#a5f3fc;
    --alert-info-color:#155e75;


/* ==========================================================
   MODAL
========================================================== */

    --modal-width:600px;

    --modal-radius:16px;

    --modal-bg:#ffffff;

    --modal-border:#e5e7eb;

    --modal-shadow:var(--shadow-xl);

    --modal-header-bg:#ffffff;

    --modal-footer-bg:#fafafa;

    --modal-padding:24px;

    --modal-backdrop:rgba(15,23,42,.55);


/* ==========================================================
   DROPDOWN
========================================================== */

    --dropdown-bg:#ffffff;

    --dropdown-border:#e5e7eb;

    --dropdown-radius:10px;

    --dropdown-shadow:var(--shadow-lg);

    --dropdown-padding:8px;

    --dropdown-item-padding:10px 14px;

    --dropdown-item-hover:#f8fbff;

    --dropdown-item-radius:6px;


/* ==========================================================
   TOOLTIP
========================================================== */

    --tooltip-bg:#1e293b;

    --tooltip-color:#ffffff;

    --tooltip-radius:6px;

    --tooltip-padding:6px 10px;

    --tooltip-font-size:12px;

    --tooltip-shadow:var(--shadow-md);


/* ==========================================================
   POPOVER
========================================================== */

    --popover-bg:#ffffff;

    --popover-border:#e5e7eb;

    --popover-radius:12px;

    --popover-shadow:var(--shadow-lg);

    --popover-padding:18px;


/* ==========================================================
   PAGINATION
========================================================== */

    --pagination-size:38px;

    --pagination-radius:8px;

    --pagination-bg:#ffffff;

    --pagination-border:#dbe4ef;

    --pagination-color:var(--text-secondary);

    --pagination-hover-bg:#f1f5f9;

    --pagination-active-bg:var(--primary);

    --pagination-active-color:#ffffff;


/* ==========================================================
   BREADCRUMB
========================================================== */

    --breadcrumb-font-size:13px;

    --breadcrumb-color:#64748b;

    --breadcrumb-active:#0f172a;

    --breadcrumb-divider:#cbd5e1;


/* ==========================================================
   TABS
========================================================== */

    --tab-height:46px;

    --tab-radius:8px;

    --tab-bg:#ffffff;

    --tab-border:#e5e7eb;

    --tab-color:#475569;

    --tab-hover-bg:#f8fbff;

    --tab-hover-color:var(--primary);

    --tab-active-bg:var(--primary);

    --tab-active-color:#ffffff;

    --tab-font-weight:600;


/* ==========================================================
   ACCORDION
========================================================== */

    --accordion-bg:#ffffff;

    --accordion-border:#e5e7eb;

    --accordion-radius:10px;

    --accordion-header-bg:#fafafa;

    --accordion-header-hover:#f3f4f6;

    --accordion-content-bg:#ffffff;


/* ==========================================================
   PROGRESS BAR
========================================================== */

    --progress-height:8px;

    --progress-radius:999px;

    --progress-bg:#e5e7eb;

    --progress-primary:var(--primary);

    --progress-success:var(--success);

    --progress-warning:var(--warning);

    --progress-danger:var(--danger);


/* ==========================================================
   SKELETON LOADER
========================================================== */

    --skeleton-bg:#e5e7eb;

    --skeleton-highlight:#f8fafc;

    --skeleton-radius:8px;

    --skeleton-animation:1.5s ease infinite;
    
    /* ==========================================================
   HEADER
========================================================== */

    --header-height:60px;

    --header-bg:#ffffff;

    --header-color:var(--text-primary);

    --header-border:var(--border);

    --header-shadow:var(--shadow-sm);

    --header-padding-x:24px;

    --header-padding-y:5px;

    --header-logo-width:180px;
    --admin-header-logo-width:60px;

    --header-icon-size:20px;

    --header-avatar-size:40px;


/* ==========================================================
   NAVBAR
========================================================== */

    --navbar-height:60px;

    --navbar-bg:#ffffff;

    --navbar-color:var(--text-secondary);

    --navbar-hover:var(--primary);

    --navbar-active:var(--primary);

    --navbar-border:var(--border);

    --navbar-shadow:var(--shadow-sm);

    --navbar-item-padding-y:18px;

    --navbar-item-padding-x:18px;

    --navbar-radius:8px;


/* ==========================================================
   SIDEBAR
========================================================== */

    --sidebar-width:260px;

    --sidebar-collapse-width:72px;

    --sidebar-bg:#1e293b;

    --sidebar-bg-hover:#273449;

    --sidebar-border:#334155;

    --sidebar-shadow:var(--shadow-sidebar);

    --sidebar-text:#cbd5e1;

    --sidebar-text-hover:#ffffff;

    --sidebar-active-bg:rgba(63,154,214,.18);

    --sidebar-active-color:#ffffff;

    --sidebar-icon-size:18px;

    --sidebar-menu-height:46px;

    --sidebar-radius:10px;

    --sidebar-padding:18px;

    --sidebar-group-title:#94a3b8;

    --sidebar-divider:#334155;


/* ==========================================================
   FOOTER
========================================================== */

    --footer-height:60px;

    --footer-bg:#ffffff;

    --footer-border:var(--border);

    --footer-text:#64748b;

    --footer-heading:#0f172a;

    --footer-shadow:var(--shadow-xs);


/* ==========================================================
   PAGE
========================================================== */

    --page-bg:#f8fafc;

    --page-title-size:26px;

    --page-title-weight:700;

    --page-title-color:#0f172a;

    --page-subtitle-size:14px;

    --page-subtitle-color:#64748b;


/* ==========================================================
   DASHBOARD
========================================================== */

    --dashboard-gap:24px;

    --dashboard-card-radius:16px;

    --dashboard-card-shadow:var(--shadow-md);

    --dashboard-card-hover:var(--shadow-lg);

    --dashboard-widget-padding:22px;

    --dashboard-widget-gap:18px;


/* ==========================================================
   STATISTICS CARD
========================================================== */

    --stats-icon-size:56px;

    --stats-icon-radius:16px;

    --stats-value-size:32px;

    --stats-value-weight:700;

    --stats-title-size:14px;

    --stats-title-color:#64748b;

    --stats-change-size:13px;


/* ==========================================================
   CHART
========================================================== */

    --chart-height:340px;

    --chart-grid:#eef2f7;

    --chart-axis:#64748b;

    --chart-label:#334155;

    --chart-tooltip-bg:#0f172a;

    --chart-tooltip-color:#ffffff;


/* ==========================================================
   CHART COLORS
========================================================== */

    --chart-blue:#3f9ad6;

    --chart-green:#16a34a;

    --chart-red:#dc2626;

    --chart-orange:#f59e0b;

    --chart-purple:#8b5cf6;

    --chart-cyan:#06b6d4;

    --chart-pink:#ec4899;

    --chart-indigo:#6366f1;


/* ==========================================================
   CALENDAR
========================================================== */

    --calendar-bg:#ffffff;

    --calendar-border:#e5e7eb;

    --calendar-radius:14px;

    --calendar-header:#f8fafc;

    --calendar-hover:#f8fbff;

    --calendar-today:#3f9ad6;

    --calendar-selected:#2563eb;


/* ==========================================================
   TIMELINE
========================================================== */

    --timeline-line:#dbe4ef;

    --timeline-dot:#3f9ad6;

    --timeline-dot-size:14px;

    --timeline-card-bg:#ffffff;

    --timeline-card-shadow:var(--shadow-sm);


/* ==========================================================
   AVATAR
========================================================== */

    --avatar-xs:28px;

    --avatar-sm:36px;

    --avatar-md:44px;

    --avatar-lg:56px;

    --avatar-xl:72px;

    --avatar-radius:50%;

    --avatar-border:#ffffff;


/* ==========================================================
   USER PROFILE
========================================================== */

    --profile-cover-height:220px;

    --profile-card-radius:18px;

    --profile-avatar-border:4px solid #ffffff;


/* ==========================================================
   NOTIFICATION
========================================================== */

    --notification-width:360px;

    --notification-bg:#ffffff;

    --notification-border:#e5e7eb;

    --notification-radius:14px;

    --notification-shadow:var(--shadow-xl);

    --notification-unread:#eff6ff;


/* ==========================================================
   MESSAGE
========================================================== */

    --message-radius:12px;

    --message-sent:#dbeafe;

    --message-received:#f8fafc;


/* ==========================================================
   TOAST
========================================================== */

    --toast-width:340px;

    --toast-radius:12px;

    --toast-shadow:var(--shadow-xl);

    --toast-success:#16a34a;

    --toast-danger:#dc2626;

    --toast-warning:#f59e0b;

    --toast-info:#0ea5e9;


/* ==========================================================
   LOADING
========================================================== */

    --loading-overlay:rgba(255,255,255,.65);

    --spinner-size:44px;

    --spinner-border:4px;

    --spinner-color:#3f9ad6;


/* ==========================================================
   SCROLLBAR
========================================================== */

    --scrollbar-width:10px;

    --scrollbar-track:#eef2f7;

    --scrollbar-thumb:#cbd5e1;

    --scrollbar-thumb-hover:#94a3b8;


/* ==========================================================
   PRINT
========================================================== */

    --print-bg:#ffffff;

    --print-text:#000000;

    --print-border:#d1d5db;


/* ==========================================================
   OVERLAY
========================================================== */

    --overlay-light:rgba(255,255,255,.60);

    --overlay-dark:rgba(15,23,42,.55);

    --overlay-black:rgba(0,0,0,.65);


/* ==========================================================
   END OF ROOT
========================================================== */

}

/* ==========================================================
   DARK THEME
   Usage:
   <html data-theme="dark">
   or
   <body data-theme="dark">
========================================================== */

[data-theme="dark"]{

/* ==========================================================
   BASIC COLORS
========================================================== */

    --body-bg:#0f172a;
    --page-bg:#0f172a;

    --white:#ffffff;
    --black:#000000;


/* ==========================================================
   BACKGROUND
========================================================== */

    --bg-primary:#111827;
    --bg-secondary:#1e293b;
    --bg-light:#334155;
    --bg-dark:#020617;

    --card-bg:#1e293b;
    --card-header-bg:#1e293b;
    --card-footer-bg:#172033;

    --table-bg:#1e293b;
    --table-row-bg:#1e293b;
    --table-hover:#273449;

    --modal-bg:#1e293b;
    --dropdown-bg:#1e293b;
    --popover-bg:#1e293b;

    --calendar-bg:#1e293b;

    --footer-bg:#1e293b;
    --header-bg:#1e293b;


/* ==========================================================
   TEXT
========================================================== */



    /* Base Text */
    --text-primary:#f8fafc;
    --text-secondary:#e2e8f0;
    --text-tertiary:#cbd5e1;
    --text-muted:#94a3b8;
    --text-light:#64748b;
    --text-disabled:#475569;

    /* Semantic */
    --heading-color:var(--text-primary);
    --paragraph-color:var(--text-tertiary);
    --caption-color:var(--text-muted);
    --label-color:var(--text-secondary);

    /* Link */
    --link-color:#60a5fa;
    --link-hover:#93c5fd;
    --link-active:#bfdbfe;
    --link-visited:#c4b5fd;

    /* Footer */
    --footer-text:var(--text-tertiary);
    --footer-heading:var(--text-primary);
    --footer-link:var(--text-secondary);
    --footer-link-hover:var(--text-primary);




/* ==========================================================
   BORDER
========================================================== */

    --border:#334155;
    --border-light:#475569;
    --border-dark:#64748b;

    --table-border:#334155;
    --card-border:#334155;
    --dropdown-border:#334155;
    --modal-border:#334155;


/* ==========================================================
   HEADER
========================================================== */

    --header-bg:#111827;
    --header-color:#ffffff;
    --header-border:#334155;


/* ==========================================================
   NAVBAR
========================================================== */

    --navbar-bg:#111827;
    --navbar-color:#e2e8f0;
    --navbar-border:#334155;


/* ==========================================================
   SIDEBAR
========================================================== */

    --sidebar-bg:#020617;
    --sidebar-bg-hover:#111827;

    --sidebar-border:#334155;

    --sidebar-text:#cbd5e1;
    --sidebar-text-hover:#ffffff;

    --sidebar-active-bg:rgba(63,154,214,.20);
    --sidebar-active-color:#ffffff;

    --sidebar-divider:#334155;


/* ==========================================================
   CARD
========================================================== */

    --card-shadow:
        0 8px 24px rgba(0,0,0,.35);

    --card-shadow-hover:
        0 14px 36px rgba(0,0,0,.45);


/* ==========================================================
   TABLE
========================================================== */

    --table-header-bg:#2563eb;
    --table-header-color:#ffffff;

    --table-striped:#202b3d;


/* ==========================================================
   INPUT
========================================================== */

    --input-bg:#111827;

    --input-color:#f8fafc;

    --input-border:#334155;

    --input-placeholder:#64748b;

    --input-disabled-bg:#1e293b;

    --select-bg:#111827;
    --select-border:#334155;

    --search-bg:#111827;
    --search-border:#334155;

    --textarea-bg:#111827;


/* ==========================================================
   BUTTON
========================================================== */

    --btn-light:#334155;
    --btn-light-hover:#475569;

    --btn-dark:#020617;
    --btn-dark-hover:#000000;


/* ==========================================================
   STATUS COLORS
========================================================== */

/* Active */
--status-active-bg:#3bff00;
--status-active-color:#166534;
--status-active-border:#86efac;

/* Pending */
--status-pending-bg:#fef3c7;
--status-pending-color:#92400e;
--status-pending-border:#fcd34d;

/* Processing */
--status-processing-bg:#dbeafe;
--status-processing-color:#1d4ed8;
--status-processing-border:#93c5fd;

/* Complete */
--status-complete-bg:#dcfce7;
--status-complete-color:#15803d;
--status-complete-border:#86efac;

/* Inactive */
--status-inactive-bg:#f1f5f9;
--status-inactive-color:#475569;
--status-inactive-border:#cbd5e1;

/* Cancel */
--status-cancel-bg:#fee2e2;
--status-cancel-color:#b91c1c;
--status-cancel-border:#fca5a5;

/* Success */
--status-success-bg:#dcfce7;
--status-success-color:#166534;
--status-success-border:#86efac;

/* Info */
--status-info-bg:#e0f2fe;
--status-info-color:#0369a1;
--status-info-border:#7dd3fc;

/* Warning */
--status-warning-bg:#fef3c7;
--status-warning-color:#b45309;
--status-warning-border:#fcd34d;

/* Danger */
--status-danger-bg:#fee2e2;
--status-danger-color:#b91c1c;
--status-danger-border:#fca5a5;

/* Dark */
--status-dark-bg:#334155;
--status-dark-color:#ffffff;
--status-dark-border:#334155;

/* Light */
--status-light-bg:#f8fafc;
--status-light-color:#475569;
--status-light-border:#e2e8f0;

/* ==========================================================
   ALERT
========================================================== */

    --alert-success-bg:#052e16;
    --alert-success-border:#166534;

    --alert-danger-bg:#450a0a;
    --alert-danger-border:#991b1b;

    --alert-warning-bg:#451a03;
    --alert-warning-border:#b45309;

    --alert-info-bg:#082f49;
    --alert-info-border:#155e75;


/* ==========================================================
   TOAST
========================================================== */

    --toast-shadow:
        0 14px 40px rgba(0,0,0,.50);


/* ==========================================================
   NOTIFICATION
========================================================== */

    --notification-bg:#1e293b;
    --notification-border:#334155;
    --notification-unread:#1e3a8a;


/* ==========================================================
   CALENDAR
========================================================== */

    --calendar-header:#111827;
    --calendar-hover:#273449;


/* ==========================================================
   TIMELINE
========================================================== */

    --timeline-line:#334155;

    --timeline-card-bg:#1e293b;


/* ==========================================================
   SCROLLBAR
========================================================== */

    --scrollbar-track:#111827;
    --scrollbar-thumb:#475569;
    --scrollbar-thumb-hover:#64748b;


/* ==========================================================
   SHADOWS
========================================================== */

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.25);

    --shadow-sm:
        0 3px 8px rgba(0,0,0,.30);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.35);

    --shadow-lg:
        0 14px 36px rgba(0,0,0,.45);

    --shadow-xl:
        0 24px 60px rgba(0,0,0,.55);


/* ==========================================================
   GRADIENTS
========================================================== */

    --gradient-page:
        linear-gradient(
            180deg,
            #0f172a 0%,
            #020617 100%
        );

    --gradient-card:
        linear-gradient(
            180deg,
            #1e293b 0%,
            #111827 100%
        );

    --gradient-header:
        linear-gradient(
            180deg,
            #111827 0%,
            #020617 100%
        );

    --gradient-sidebar:
        linear-gradient(
            180deg,
            #020617 0%,
            #0f172a 100%
        );

}


/* ==========================================================
   OPTIONAL AUTO DARK MODE
========================================================== */

@media (prefers-color-scheme: dark){

    :root:not([data-theme="light"]){

        color-scheme:dark;

    }

}


/* ==========================================================
   END OF FILE
========================================================== */