/**
 * CSS Variables - Design System
 * Slack-inspired sidebar layout with finance-oriented color palette
 * Modifică doar aici pentru a schimba designul întregii aplicații
 */

:root {
    /* ===== SLACK-FINANCE COLOR PALETTE ===== */

    /* Primary - Violet (Slack-inspired) */
    --primary: #611f69;
    --primary-dark: #4a154b;
    --primary-light: #f9edff;
    --primary-lighter: #f9edff;

    /* Secondary - Deep blue */
    --secondary: #1A1D3E;
    --secondary-dark: #13152E;
    --secondary-light: #2D3154;

    /* Accent */
    --accent: #E8A200;
    --accent-dark: #C78C00;

    /* ========================================
       CULORI SEMANTICE (Finance colors)
       ======================================== */
    --success: #007a5a;
    --success-light: #D1FAE5;
    --success-dark: #005e45;

    --warning: #ecb22e;
    --warning-light: #FFF3CD;
    --warning-dark: #c89a1e;

    --danger: #c01343;
    --danger-light: #FDE2EA;
    --danger-dark: #a01038;

    --info: #1264a3;
    --info-light: #DBEAFE;
    --info-dark: #0e5289;

    /* ========================================
       CULORI NEUTRE
       ======================================== */
    --white: #FFFFFF;
    --gray-50: #F8F9FC;
    --gray-100: #F1F2F6;
    --gray-200: #E2E5EE;
    --gray-300: #CDD1DC;
    --gray-400: #A0A6B8;
    --gray-500: #8A92A6;
    --gray-600: #5A6178;
    --gray-700: #3D4259;
    --gray-800: #2D3154;
    --gray-900: #1A1D2E;
    --black: #000000;

    /* ========================================
       BACKGROUND & BORDERS
       ======================================== */
    --bg-body: #f5f4f5;
    --bg-content: #fff;
    --bg-hover: #f5f4f5;
    --bg-active: #ebeaeb;
    --bg-secondary: #f5f4f5;

    /* Sidebar - Slack aubergine */
    --sidebar-bg: #4a154b;
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-text-hover: #FFFFFF;
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
    --sidebar-active-text: #FFFFFF;
    --sidebar-group-text: rgba(255, 255, 255, 0.5);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);

    --border-color: #ebeaeb;
    --border-light: #f5f4f5;
    --border-dark: #d4d3d4;

    /* ========================================
       TEXT COLORS
       ======================================== */
    --text-primary: #1d1c1d;
    --text-secondary: #454245;
    --text-muted: #696969;
    --text-light: #8b8a8b;
    --text-inverse: #FFFFFF;

    /* ========================================
       SPACING
       ======================================== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ========================================
       FONTS - slightly more compact (Slack-like)
       ======================================== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.8125rem;  /* 13px */
    --font-size-md: 0.875rem;   /* 14px - base, more compact than before */
    --font-size-lg: 1rem;       /* 16px */
    --font-size-xl: 1.125rem;   /* 18px */
    --font-size-2xl: 1.375rem;  /* 22px */
    --font-size-3xl: 1.75rem;   /* 28px */
    --font-size-4xl: 2.25rem;   /* 36px */

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.555;
    --line-height-relaxed: 1.75;

    --letter-spacing-body: -0.0012em;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ========================================
       SHADOWS - subtle for light mode
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(26, 29, 46, 0.04);
    --shadow-md: 0 2px 8px rgba(26, 29, 46, 0.08);
    --shadow-lg: 0 4px 16px rgba(26, 29, 46, 0.12);
    --shadow-xl: 0 8px 32px rgba(26, 29, 46, 0.16);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.2s cubic-bezier(.165,.84,.44,1);
    --transition-base: 0.42s cubic-bezier(.165,.84,.44,1);
    --transition-slow: 0.5s cubic-bezier(.165,.84,.44,1);

    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ========================================
       BREAKPOINTS (pentru referință în media queries)
       ======================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ========================================
       LAYOUT - Sidebar
       ======================================== */
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 60px;
    --topbar-height: 56px;
    --bottom-nav-height: 56px;
    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);

    /* Legacy compatibility - old header references */
    --header-height: var(--topbar-height);
    --header-height-mobile: 52px;
}

/* ========================================
   DARK MODE
   Activat prin class="dark-mode" pe <html> sau <body>
   ======================================== */
:root.dark-mode,
.dark-mode {
    --bg-body: #1E2030;
    --bg-content: #262840;
    --bg-hover: #2D3050;
    --bg-active: #363952;
    --bg-secondary: #2D3050;

    --sidebar-bg: #3a0e3b;

    --border-color: #363952;
    --border-light: #2D3050;
    --border-dark: #4A4D68;

    --text-primary: #E8EAF0;
    --text-secondary: #A0A6B8;
    --text-muted: #6B7185;
    --text-light: #4A4D68;

    --white: #262840;
    --gray-50: #2D3050;
    --gray-100: #363952;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);

    --success-light: rgba(0, 192, 131, 0.15);
    --danger-light: rgba(224, 30, 90, 0.15);
    --warning-light: rgba(232, 162, 0, 0.15);
    --info-light: rgba(59, 130, 246, 0.15);

    --primary-lighter: rgba(97, 31, 105, 0.15);
}

/* ========================================
   CULORI ALTERNATIVE PRE-DEFINITE
   Utilizatorul poate alege din setări
   Keep theme attribute support for backwards compat
   ======================================== */
[data-theme="turcoaz"] {
    --primary: #00D9C0;
    --primary-dark: #00B8A3;
    --primary-light: #1FFFE6;
    --primary-lighter: #E6FFFA;
}

[data-theme="portocaliu"] {
    --primary: #FF6B35;
    --primary-dark: #E55A25;
    --primary-light: #FF8F66;
    --primary-lighter: #FFF0EB;
}

[data-theme="albastru"] {
    --primary: #3B82F6;
    --primary-dark: #2563EB;
    --primary-light: #60A5FA;
    --primary-lighter: #DBEAFE;
}

[data-theme="verde"] {
    --primary: #10B981;
    --primary-dark: #059669;
    --primary-light: #34D399;
    --primary-lighter: #D1FAE5;
}

[data-theme="violet"] {
    --primary: #8B5CF6;
    --primary-dark: #7C3AED;
    --primary-light: #A78BFA;
    --primary-lighter: #EDE9FE;
}

[data-theme="roz"] {
    --primary: #EC4899;
    --primary-dark: #DB2777;
    --primary-light: #F472B6;
    --primary-lighter: #FCE7F3;
}

/* Tema custom (setată dinamic via JS) */
[data-theme="custom"] {
    /* Culoarea va fi setată dinamic prin JavaScript */
}