/* ==========================================================================
   SAANVI Finance Cloud V1
   CSS Variables
   Version : 1.0
   ========================================================================== */

:root {

    /* ======================================================================
       Brand Colors
       ====================================================================== */

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #dbeafe;

    --color-accent: #f59e0b;
    --color-accent-light: #fef3c7;

    --color-success: #16a34a;
    --color-success-light: #dcfce7;

    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;

    --color-danger: #dc2626;
    --color-danger-light: #fee2e2;

    --color-info: #0891b2;
    --color-info-light: #cffafe;

    /* ======================================================================
       Background
       ====================================================================== */

    --bg-body: #f5f7fb;
    --bg-card: #ffffff;
    --bg-sidebar: #111827;
    --bg-header: #ffffff;
    --bg-hover: #f3f4f6;

    /* ======================================================================
       Text
       ====================================================================== */

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;

    /* ======================================================================
       Border
       ====================================================================== */

    --border-color: #e5e7eb;
    --border-light: #f3f4f6;

    /* ======================================================================
       Sidebar
       ====================================================================== */

    --sidebar-width: 270px;
    --sidebar-width-collapse: 82px;

    --sidebar-text: #d1d5db;
    --sidebar-icon: #9ca3af;

    --sidebar-hover: rgba(255,255,255,.08);

    --sidebar-active: #2563eb;
    --sidebar-active-text: #ffffff;

    /* ======================================================================
       Header
       ====================================================================== */

    --header-height: 68px;

    /* ======================================================================
       Footer
       ====================================================================== */

    --footer-height: 50px;

    /* ======================================================================
       Radius
       ====================================================================== */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-round: 999px;

    /* ======================================================================
       Shadows
       ====================================================================== */

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

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

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

    --shadow-lg: 0 16px 40px rgba(15,23,42,.12);

    /* ======================================================================
       Typography
       ====================================================================== */

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

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-base: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height: 1.5;

    /* ======================================================================
       Spacing
       ====================================================================== */

    --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: 40px;
    --space-10: 48px;

    /* ======================================================================
       Cards
       ====================================================================== */

    --card-padding: 20px;
    --card-gap: 20px;

    /* ======================================================================
       Forms
       ====================================================================== */

    --input-height: 44px;
    --input-radius: 10px;
    --input-border: var(--border-color);

    /* ======================================================================
       Buttons
       ====================================================================== */

    --btn-height: 42px;
    --btn-radius: 10px;

    /* ======================================================================
       Tables
       ====================================================================== */

    --table-row-height: 52px;
    --table-header-height: 50px;

    /* ======================================================================
       Animation
       ====================================================================== */

    --transition-fast: .15s ease;
    --transition: .25s ease;
    --transition-slow: .35s ease;

    /* ======================================================================
       Z-Index
       ====================================================================== */

    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-header: 1020;
    --z-sidebar: 1030;
    --z-modal: 1040;
    --z-toast: 1050;
    --z-loader: 1060;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

[data-theme="dark"] {

    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-header: #1e293b;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border-color: #334155;
    --border-light: #1e293b;

    --bg-hover: #273449;
}