/**
 * Design Tokens - numbers.finance
 * Système de design centralisé pour l'harmonisation UI
 */

:root {
    /* ==========================================================================
       COULEURS DE TEXTE
       ========================================================================== */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #666666;
    --color-text-light: #888888;
    --color-text-inverse: #ffffff;

    /* ==========================================================================
       BACKGROUNDS
       ========================================================================== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-hover: #f0f0f0;
    --color-bg-card: #ffffff;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);

    /* ==========================================================================
       INDICATEURS FINANCIERS
       ========================================================================== */
    --color-positive: rgb(65, 131, 196);      /* Bleu - hausse/positif */
    --color-positive-light: rgba(65, 131, 196, 0.15);
    --color-negative: rgb(239, 71, 111);      /* Rouge - baisse/négatif */
    --color-negative-light: rgba(239, 71, 111, 0.15);
    --color-neutral: #666666;
    --color-warning: #f59e0b;
    --color-success: #16a34a;

    /* ==========================================================================
       ACCENTS
       ========================================================================== */
    --color-accent-blue: rgb(59, 130, 246);
    --color-accent-blue-light: rgba(59, 130, 246, 0.15);
    --color-accent-blue-hover: rgb(37, 99, 235);

    /* ==========================================================================
       BORDERS
       ========================================================================== */
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.15);
    --color-border-focus: rgb(59, 130, 246);

    /* ==========================================================================
       SHADOWS
       ========================================================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ==========================================================================
       CHARTS (Chart.js)
       ========================================================================== */
    --chart-text: #1a1a1a;
    --chart-text-secondary: #4a4a4a;
    --chart-grid: rgba(0, 0, 0, 0.06);
    --chart-line-primary: rgb(59, 130, 246);
    --chart-line-secondary: rgb(75, 192, 192);
    --chart-line-tertiary: rgb(255, 159, 64);
    --chart-fill-primary: rgba(59, 130, 246, 0.15);
    --chart-positive: rgb(65, 131, 196);
    --chart-negative: rgb(239, 71, 111);

    /* Tooltip Chart.js */
    --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
    --chart-tooltip-text: #1a1a1a;
    --chart-tooltip-text-secondary: #4a4a4a;
    --chart-tooltip-border: rgba(0, 0, 0, 0.1);

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

    /* ==========================================================================
       SPACING
       ========================================================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Roboto Mono', 'SF Mono', Monaco, monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

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

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ==========================================================================
       Z-INDEX
       ========================================================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-overlay: 400;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Couleurs de texte */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-positive { color: var(--color-positive) !important; }
.text-negative { color: var(--color-negative) !important; }

/* Backgrounds */
.bg-primary { background-color: var(--color-bg-primary) !important; }
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-tertiary { background-color: var(--color-bg-tertiary) !important; }