/* ===================================================
   TAPSO - Shared CSS Variables & Custom Properties
   =================================================== */

:root {
    /* Primary Colors */
    --primary: #5b13ec;
    --primary-dark: #4a0bc0;
    --primary-hover: #4a0ec0;
    --primary-light: #efe9fd;

    /* Background Colors */
    --background-light: #f6f6f8;
    --background-dark: #161022;
    --surface-light: #ffffff;
    --surface-dark: #1e1a2e;

    /* Text Colors */
    --text-main: #131118;
    --text-muted: #6f6189;
    --text-secondary: #6f6189;

    /* Border Colors */
    --border-color: #dfdbe6;
    --border-light: #f2f0f4;

    /* Status Colors */
    --success: #078845;
    --success-bg: #e6f4ea;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --info: #137fec;
    --info-bg: #dbeafe;

    /* Font Families */
    --font-display: 'Vazirmatn', 'Inter', sans-serif;
    --font-body: 'Vazirmatn', 'Inter', sans-serif;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-primary: 0 4px 14px 0 rgba(91, 19, 236, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-index Scale */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-tooltip: 60;
}

/* Dark Mode Variables */
.dark {
    --background-light: #161022;
    --background-dark: #0d0816;
    --surface-light: #1e1a2e;
    --surface-dark: #252233;
    --text-main: #ffffff;
    --text-muted: #a09eb0;
    --border-color: #2d2a3b;
    --border-light: #2d2a3b;
}