/* ==========================================================
   PRIMEVAULT DESIGN SYSTEM
   Variables
========================================================== */

:root {

    /* ======================================================
       BRAND COLORS
    ====================================================== */

    --primary: #111111;
    --secondary: #F7F7F5;
    --accent: #C49B3A;

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

    --background: #FFFFFF;
    --surface: #FAFAFA;
    --surface-dark: #181818;

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

    --text-primary: #1B1B1B;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-white: #FFFFFF;

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

    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;
    --info: #2563EB;

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

    --border: #E5E7EB;
    --border-dark: #D1D5DB;

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

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 15px 45px rgba(0, 0, 0, 0.10);

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

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-round: 999px;

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

    --container-width: 1280px;

    --header-height: 80px;

    --section-padding: 100px;

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

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 100px;

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

    --transition-fast: 0.2s ease;
    --transition: 0.35s ease;
    --transition-slow: 0.5s ease;

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

    --z-navbar: 1000;
    --z-sidebar: 1050;
    --z-dropdown: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
    --z-loader: 1400;

}