/*
=============================================================
  Fichier    : variables.css
  Projet     : Financial Analyzer
  Description: Design system — tokens de couleurs, typo, espacements
  Auteur     : Claude Marcel
  Version    : 1.0
  Date       : 2026-03-20
=============================================================
*/

:root {

  /* ==================== COULEURS SIDEBAR ==================== */
  --sidebar-bg        : #0f172a;
  --sidebar-border    : rgba(255, 255, 255, 0.06);
  --sidebar-text      : #94a3b8;
  --sidebar-text-hover: #e2e8f0;
  --sidebar-active-bg : rgba(37, 99, 235, 0.18);
  --sidebar-active    : #60a5fa;
  --sidebar-logo-text : #f1f5f9;
  --sidebar-width     : 240px;

  /* ==================== COULEURS PRINCIPALES ==================== */
  --bg-app            : #f1f5f9;
  --bg-card           : #ffffff;
  --bg-card-hover     : #fafafa;
  --bg-header         : #ffffff;
  --bg-input          : #f8fafc;
  --bg-overlay        : rgba(15, 23, 42, 0.6);

  /* ==================== COULEURS TEXTE ==================== */
  --text-primary      : #0f172a;
  --text-secondary    : #475569;
  --text-muted        : #94a3b8;
  --text-label        : #64748b;
  --text-on-dark      : #f1f5f9;

  /* ==================== COULEURS D'ACCENT ==================== */
  --color-blue        : #2563eb;
  --color-blue-hover  : #1d4ed8;
  --color-blue-light  : #eff6ff;
  --color-blue-border : #bfdbfe;

  /* ==================== STATUTS FINANCIERS ==================== */
  --color-positive      : #059669;
  --color-positive-bg   : #ecfdf5;
  --color-positive-border: #a7f3d0;
  --color-negative      : #dc2626;
  --color-negative-bg   : #fef2f2;
  --color-negative-border: #fecaca;
  --color-neutral       : #d97706;
  --color-neutral-bg    : #fffbeb;
  --color-neutral-border : #fde68a;

  /* ==================== SCORE (cercle santé) ==================== */
  --score-excellent   : #10b981;  /* 80-100 */
  --score-good        : #3b82f6;  /* 60-79  */
  --score-average     : #f59e0b;  /* 40-59  */
  --score-poor        : #ef4444;  /* 0-39   */

  /* ==================== PREMIUM ==================== */
  --color-premium     : #7c3aed;
  --color-premium-bg  : #f5f3ff;
  --color-premium-light: #ddd6fe;
  --color-gold        : #f59e0b;

  /* ==================== BORDURES ==================== */
  --border-color      : #e2e8f0;
  --border-color-dark : #cbd5e1;
  --border-radius-xs  : 4px;
  --border-radius-sm  : 8px;
  --border-radius     : 12px;
  --border-radius-lg  : 16px;
  --border-radius-xl  : 24px;
  --border-radius-full: 9999px;

  /* ==================== OMBRES ==================== */
  --shadow-xs  : 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm  : 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md  : 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg  : 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl  : 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.25);

  /* ==================== TYPOGRAPHIE ==================== */
  --font-primary : 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono    : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs   : 11px;
  --text-sm   : 12px;
  --text-base : 14px;
  --text-md   : 15px;
  --text-lg   : 16px;
  --text-xl   : 18px;
  --text-2xl  : 22px;
  --text-3xl  : 28px;
  --text-4xl  : 36px;

  --weight-regular : 400;
  --weight-medium  : 500;
  --weight-semibold: 600;
  --weight-bold    : 700;

  --line-height-tight : 1.2;
  --line-height-normal: 1.5;
  --line-height-loose : 1.7;

  /* ==================== ESPACEMENTS ==================== */
  --space-1 :  4px;
  --space-2 :  8px;
  --space-3 : 12px;
  --space-4 : 16px;
  --space-5 : 20px;
  --space-6 : 24px;
  --space-8 : 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==================== TRANSITIONS ==================== */
  --transition-fast  : 0.12s ease;
  --transition-normal: 0.22s ease;
  --transition-slow  : 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== LAYOUT ==================== */
  --topbar-height     : 64px;
  --content-max-width : 1400px;
}