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

:root {
    /* Primary Colors */
    --primary: #5b13ec;
    --primary-dark: #4a0bc0;
    --primary-hover: #4a0ec0;
    --primary-light: #efe9fd;
    /* Background Colors */
    --background-light: #faf8f6;
    --background-dark: #15032b;
    --surface-light: #ffffff;
    --surface-dark: #241612;
    /* Text Colors */
    --text-main: #1a0f0a;
    --text-muted: #7e5da6;
    --text-secondary: #8f6b5d;
    /* Border Colors */
    --border-color: #e5ccff;
    --border-light: #f5ebe3;
    /* Status Colors */
    --success: #078845;
    --success-bg: #e6f4ea;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --info: #ba3f09;
    --info-bg: #fef0e9;
    /* Font Families */
    --font-display: 'IRANYekanXFaNum', 'Inter', sans-serif;
    --font-body: 'IRANYekanXFaNum', '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(160, 75, 243, 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: #1a0f0a;
    --background-dark: #1e013c;
    --surface-light: #241612;
    --surface-dark: #2e1f17;
    --text-main: #ffffff;
    --text-muted: #b89a8a;
    --border-color: #3a2820;
    --border-light: #3a2820;
}