/* ================================
   VARIABLES — FINOVA
   Design tokens corporatifs haut de gamme
=============================== */

:root {
  /* ---- TYPOGRAPHY ---- */
  --font-sans: 'Sora', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ---- COLOR PALETTE ---- */
  --white:        #ffffff;
  --gray-50:      #f8f9fc;
  --gray-100:     #f1f3f8;
  --gray-200:     #e4e8f0;
  --gray-300:     #cdd3df;
  --gray-400:     #9aa3b2;
  --gray-500:     #6b7585;
  --gray-600:     #4a5262;
  --gray-700:     #323844;
  --gray-800:     #1e2330;
  --gray-900:     #111622;

  --blue-50:      #eff6ff;
  --blue-100:     #dbeafe;
  --blue-400:     #60a5fa;
  --blue-500:     #3b82f6;
  --blue-600:     #2563eb;
  --blue-700:     #1d4ed8;

  --emerald-50:   #ecfdf5;
  --emerald-400:  #34d399;
  --emerald-500:  #10b981;
  --emerald-600:  #059669;

  --red-50:       #fef2f2;
  --red-400:      #f87171;
  --red-500:      #ef4444;
  --red-600:      #dc2626;

  --amber-50:     #fffbeb;
  --amber-400:    #fbbf24;
  --amber-500:    #f59e0b;

  --violet-50:    #f5f3ff;
  --violet-400:   #a78bfa;
  --violet-500:   #8b5cf6;
  --violet-600:   #7c3aed;

  /* ---- SEMANTIC TOKENS ---- */
  --color-bg:           var(--gray-50);
  --color-bg-card:      var(--white);
  --color-bg-sidebar:   var(--gray-900);
  --color-bg-input:     var(--white);
  --color-border:       var(--gray-200);
  --color-border-focus: var(--blue-500);

  --color-text:         var(--gray-800);
  --color-text-muted:   var(--gray-500);
  --color-text-faint:   var(--gray-400);
  --color-text-inverse: var(--white);

  --color-primary:      var(--blue-600);
  --color-primary-hover:var(--blue-700);
  --color-primary-light:var(--blue-50);

  --color-success:      var(--emerald-500);
  --color-success-light:var(--emerald-50);
  --color-danger:       var(--red-500);
  --color-danger-light: var(--red-50);
  --color-warning:      var(--amber-500);
  --color-warning-light:var(--amber-50);

  /* ---- SPACING ---- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;

  /* ---- LAYOUT ---- */
  --sidebar-width:      240px;
  --topbar-height:      64px;
  --content-max:        1200px;
  --gutter:             clamp(1rem, 3vw, 2rem);

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

  /* ---- SHADOWS ---- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --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.1), 0 10px 10px rgba(0,0,0,0.04);

  /* ---- TRANSITIONS ---- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- DARK MODE ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           var(--gray-900);
    --color-bg-card:      var(--gray-800);
    --color-bg-sidebar:   var(--gray-950);
    --color-bg-input:     var(--gray-800);
    --color-border:       var(--gray-700);
    --color-border-focus: var(--blue-400);

    --color-text:         var(--gray-100);
    --color-text-muted:   var(--gray-400);
    --color-text-faint:   var(--gray-500);
    --color-text-inverse: var(--gray-900);
  }
}