/* ============================================
   Variables CSS — Dark Luxury / Fintech
   ============================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,900&f[]=general-sans@400,500,600&display=swap');

:root {
    /* Typographie */
    --font-display: 'Satoshi', sans-serif;
    --font-body: 'General Sans', sans-serif;

    /* Backgrounds */
    --bg-primary: #09090b;
    --bg-secondary: #131316;
    --bg-card: #18181b;
    --bg-input: #1e1e22;
    --bg-hover: #232328;
    --bg-sidebar: #0c0c0f;

    /* Borders */
    --border-default: #27272a;
    --border-hover: #3f3f46;
    --border-focus: #6366f1;

    /* Text */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #52525b;
    --text-inverse: #09090b;

    /* Accents */
    --color-profit: #10b981;
    --color-profit-bg: rgba(16, 185, 129, 0.1);
    --color-profit-glow: 0 0 20px rgba(16, 185, 129, 0.15);
    --color-loss: #ef4444;
    --color-loss-bg: rgba(239, 68, 68, 0.1);
    --color-loss-glow: 0 0 20px rgba(239, 68, 68, 0.15);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-glow: 0 0 20px rgba(245, 158, 11, 0.15);
    --color-accent: #6366f1;
    --color-accent-bg: rgba(99, 102, 241, 0.1);
    --color-accent-glow: 0 0 20px rgba(99, 102, 241, 0.2);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-elevated: 0 10px 40px rgba(0,0,0,0.5);
    --shadow-modal: 0 25px 60px rgba(0,0,0,0.6);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Sidebar */
    --sidebar-width: 260px;
    --header-height: 64px;
}

/* ============================================
   Thème Light
   ============================================ */
[data-theme="light"] {
    --bg-primary: #f4f4f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f4f4f5;
    --bg-hover: #e4e4e7;
    --bg-sidebar: #ffffff;

    --border-default: #e4e4e7;
    --border-hover: #d4d4d8;

    --text-primary: #09090b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;
    --text-inverse: #fafafa;

    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-elevated: 0 10px 40px rgba(0,0,0,0.1);
    --shadow-modal: 0 25px 60px rgba(0,0,0,0.15);
}