/* ================================================================
   MyKortex 2.0 — Design Tokens (Variables CSS)
   ================================================================ */

:root {
    /* ─── Couleurs principales ─────────────────────────────── */
    --primary-50:  #EBF5FF;
    --primary-100: #D6EBFF;
    --primary-200: #ADD6FF;
    --primary-300: #70B8FF;
    --primary-400: #3B9EFF;
    --primary-500: #1B7FE3;
    --primary-600: #0D5CB8;
    --primary-700: #0A4A96;
    --primary-800: #0C3D7A;
    --primary-900: #102E5A;
    --primary:     #1B7FE3;

    /* ─── Couleurs secondaires (turquoise optique) ─────────── */
    --accent-50:  #ECFDF5;
    --accent-100: #D1FAE5;
    --accent-200: #A7F3D0;
    --accent-300: #6EE7B7;
    --accent-400: #34D399;
    --accent-500: #10B981;
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065F46;
    --accent-900: #064E3B;
    --accent:     #10B981;

    /* ─── Neutrals ─────────────────────────────────────────── */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* ─── Sémantiques ──────────────────────────────────────── */
    --success:   #10B981;
    --success-bg:#ECFDF5;
    --warning:   #F59E0B;
    --warning-bg:#FFFBEB;
    --danger:    #EF4444;
    --danger-bg: #FEF2F2;
    --info:      #3B82F6;
    --info-bg:   #EFF6FF;

    /* ─── Surfaces ─────────────────────────────────────────── */
    --bg-body:      #F3F4F6;
    --bg-card:      #FFFFFF;
    --bg-sidebar:   #0F172A;
    --bg-header:    #FFFFFF;
    --bg-input:     #FFFFFF;
    --bg-hover:     #F9FAFB;
    --bg-selected:  #EBF5FF;

    /* ─── Texte ────────────────────────────────────────────── */
    --text-primary:    #111827;
    --text-secondary:  #6B7280;
    --text-tertiary:   #9CA3AF;
    --text-inverse:    #FFFFFF;
    --text-link:       #1B7FE3;
    --text-sidebar:    #94A3B8;
    --text-sidebar-active: #FFFFFF;

    /* ─── Bordures ─────────────────────────────────────────── */
    --border-color:    #E5E7EB;
    --border-light:    #F3F4F6;
    --border-focus:    #1B7FE3;
    --border-radius-sm:  6px;
    --border-radius:     8px;
    --border-radius-md:  10px;
    --border-radius-lg:  12px;
    --border-radius-xl:  16px;
    --border-radius-full: 9999px;

    /* ─── Ombres ───────────────────────────────────────────── */
    --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:     0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-md:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg:  0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

    /* ─── Typographie ──────────────────────────────────────── */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.8125rem;  /* 13px */
    --text-base:  0.875rem;   /* 14px */
    --text-md:    0.9375rem;  /* 15px */
    --text-lg:    1rem;       /* 16px */
    --text-xl:    1.125rem;   /* 18px */
    --text-2xl:   1.25rem;    /* 20px */
    --text-3xl:   1.5rem;     /* 24px */
    --text-4xl:   1.875rem;   /* 30px */

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

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ─── Espacement ───────────────────────────────────────── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ─── Layout ───────────────────────────────────────────── */
    --sidebar-width:    260px;
    --sidebar-collapsed: 72px;
    --header-height:    64px;
    --content-max-width: 1400px;

    /* ─── Transitions ──────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition:        200ms ease;
    --transition-slow:   300ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-index ──────────────────────────────────────────── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}

/* ─── Dark mode (pour plus tard) ───────────────────────────── */
[data-theme="dark"] {
    --bg-body:     #0F172A;
    --bg-card:     #1E293B;
    --bg-header:   #1E293B;
    --bg-input:    #334155;
    --bg-hover:    #334155;
    --bg-selected: #1E3A5A;

    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary:  #64748B;

    --border-color:   #334155;
    --border-light:   #1E293B;

    --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
}