/**
 * Design Tokens - EAA-IA-Chat
 * ============================
 * Systeme de design dual-theme (Light/Dark) premium
 * Inspire de ChatGPT, Claude et Gemini
 *
 * Architecture:
 * - :root = Mode Light (defaut)
 * - [data-theme="dark"] = Mode Dark
 * - Transition fluide entre les modes
 */

/* ===========================================
   MODE LIGHT (Defaut)
   Palette claire, elegante et reposante
   =========================================== */

:root {
  /* ----- COULEURS DE FOND (tons gris doux, reposants pour les yeux) ----- */
  --color-bg: #E5E7EB;
  --color-bg-secondary: #D1D5DB;
  --color-bg-tertiary: #C4C9D0;

  /* ----- SURFACES (Cards, Modales - gris clair doux) ----- */
  --color-surface: #F3F4F6;
  --color-surface-secondary: #E5E7EB;
  --color-surface-hover: #D1D5DB;
  --color-surface-active: #C4C9D0;

  /* ----- TEXTES ----- */
  --color-text: #1F2937;
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-text-inverse: #F9FAFB;

  /* ----- BORDURES ----- */
  --color-border: #C4C9D0;
  --color-border-hover: #9CA3AF;
  --color-border-focus: #6B7280;

  /* ----- COULEUR PRIMAIRE / ACCENT (Teal EAA - CMJN 83 45 38 25 → #206977) ----- */
  --color-primary: #206977;
  --color-primary-hover: #1a5661;
  --color-primary-active: #15454f;
  --color-primary-light: #e6f2f4;
  --color-primary-bg: rgba(32, 105, 119, 0.10);
  --color-primary-border: rgba(32, 105, 119, 0.25);

  /* ----- COULEUR ACCENT (Bleu - secondaire) ----- */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-active: #1e40af;
  --color-accent-light: #dbeafe;
  --color-accent-bg: rgba(37, 99, 235, 0.08);

  /* ----- ETATS SEMANTIQUES ----- */
  --color-success: #16a34a;
  --color-success-bg: rgba(22, 163, 74, 0.1);
  --color-success-border: rgba(22, 163, 74, 0.25);
  --color-success-hover: #15803d;
  --color-danger: #dc2626;
  --color-danger-bg: rgba(220, 38, 38, 0.1);
  --color-danger-border: rgba(220, 38, 38, 0.25);
  --color-danger-hover: #b91c1c;
  --color-warning: #d97706;
  --color-warning-bg: rgba(217, 119, 6, 0.1);
  --color-warning-border: rgba(217, 119, 6, 0.25);
  --color-warning-hover: #b45309;
  --color-info: #0891b2;
  --color-info-bg: rgba(8, 145, 178, 0.1);
  --color-info-border: rgba(8, 145, 178, 0.25);
  --color-info-hover: #0e7490;

  /* ----- OMBRES (Light mode - style moderne 2025) ----- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 24px rgba(32, 105, 119, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ----- GLASSMORPHISM (Light mode) ----- */
  --glass-bg: rgba(243, 244, 246, 0.9);
  --glass-border: rgba(156, 163, 175, 0.3);
  --glass-blur: blur(12px);
  --glass-saturate: saturate(180%);
  --glass-backdrop: var(--glass-blur) var(--glass-saturate);

  /* ----- SIDEBAR (gris foncé uniforme) ----- */
  --sidebar-bg: #0d1117;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(32, 105, 119, 0.4);
  --sidebar-text: #f0f4f8;
  --sidebar-text-muted: #b8c8d4;

  /* ----- INPUT/FORMS (gris doux) ----- */
  --input-bg: #F3F4F6;
  --input-border: #C4C9D0;
  --input-border-focus: var(--color-primary);
  --input-placeholder: #6B7280;

  /* ----- CHAT SPECIFIQUE ----- */
  --chat-user-bg: var(--color-accent);
  --chat-user-text: #ffffff;
  --chat-ai-bg: var(--color-surface);
  --chat-ai-text: var(--color-text);
}

/* ===========================================
   MODE DARK
   Palette sombre, profonde et elegante
   =========================================== */

[data-theme="dark"] {
  /* ----- COULEURS DE FOND (style TrueNAS dark) ----- */
  --color-bg: #0d1117;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;

  /* ----- SURFACES (Cards, Modales - même couleur que sidebar) ----- */
  --color-surface: #1e2a36;
  --color-surface-secondary: #243240;
  --color-surface-hover: #2a3a4a;
  --color-surface-active: #324454;

  /* ----- TEXTES (meilleur contraste WCAG AA) ----- */
  --color-text: #f5f5f5;
  --color-text-secondary: #d0d0d0;
  --color-text-muted: #a8a8a8;
  --color-text-inverse: #0a0a0a;

  /* ----- BORDURES (plus visibles) ----- */
  --color-border: rgba(255, 255, 255, 0.15);
  --color-border-hover: rgba(255, 255, 255, 0.25);
  --color-border-focus: rgba(255, 255, 255, 0.35);

  /* ----- COULEUR PRIMAIRE / ACCENT (Teal EAA en dark - plus lumineux) ----- */
  --color-primary: #3d9aab;
  --color-primary-hover: #4db0c2;
  --color-primary-active: #2d8a9b;
  --color-primary-light: #1a2f35;
  --color-primary-bg: rgba(61, 154, 171, 0.15);
  --color-primary-border: rgba(61, 154, 171, 0.30);

  /* ----- COULEUR ACCENT (Bleu - secondaire) ----- */
  --color-accent: #3b82f6;
  --color-accent-hover: #60a5fa;
  --color-accent-active: #2563eb;
  --color-accent-light: #1e3a5f;
  --color-accent-bg: rgba(59, 130, 246, 0.15);

  /* ----- ETATS SEMANTIQUES (couleurs plus vives pour meilleur contraste) ----- */
  --color-success: #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.12);
  --color-success-border: rgba(74, 222, 128, 0.30);
  --color-success-hover: #22c55e;
  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --color-danger-border: rgba(248, 113, 113, 0.30);
  --color-danger-hover: #ef4444;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-warning-border: rgba(251, 191, 36, 0.30);
  --color-warning-hover: #f59e0b;
  --color-info: #22d3ee;
  --color-info-bg: rgba(34, 211, 238, 0.12);
  --color-info-border: rgba(34, 211, 238, 0.30);
  --color-info-hover: #06b6d4;

  /* ----- OMBRES (Dark mode - style moderne 2025) ----- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 24px rgba(61, 154, 171, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* ----- GLASSMORPHISM (Dark mode) ----- */
  --glass-bg: rgba(23, 23, 23, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(12px);
  --glass-saturate: saturate(150%);
  --glass-backdrop: var(--glass-blur) var(--glass-saturate);

  /* ----- SIDEBAR (gris foncé uniforme avec la page) ----- */
  --sidebar-bg: #0d1117;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(61, 154, 171, 0.35);
  --sidebar-text: #f0f4f8;
  --sidebar-text-muted: #b8c8d4;

  /* ----- INPUT/FORMS ----- */
  --input-bg: #212121;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-focus: var(--color-accent);
  --input-placeholder: #6b6b6b;

  /* ----- CHAT SPECIFIQUE ----- */
  --chat-user-bg: var(--color-accent);
  --chat-user-text: #ffffff;
  --chat-ai-bg: #212121;
  --chat-ai-text: var(--color-text);
}

/* ===========================================
   VARIABLES COMMUNES (Non-theme dependent)
   =========================================== */

:root {
  /* ----- TYPOGRAPHIE MODERNE (Inter) ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco,
    "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;
  --font-display: "Inter", var(--font-sans);

  /* Tailles de texte (échelle fluide moderne) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px - légèrement plus grand pour lisibilité */
  --text-base: 0.9375rem;  /* 15px - taille de base moderne */
  --text-lg: 1.0625rem;    /* 17px */
  --text-xl: 1.1875rem;    /* 19px */
  --text-2xl: 1.375rem;    /* 22px */
  --text-3xl: 1.625rem;    /* 26px */
  --text-4xl: 2rem;        /* 32px */
  --text-5xl: 2.5rem;      /* 40px */

  /* Poids de police (Inter optimisé) */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Hauteurs de ligne (optimisées pour lisibilité) */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter spacing (espacement des lettres pour Inter) */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ----- ESPACEMENTS ----- */
  --space-0: 0;
  --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 */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */

  /* ----- ARRONDIS (Genereux pour look moderne) ----- */
  --radius-none: 0;
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.25rem;    /* 20px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

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

  /* Easing */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Z-INDEX ----- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-toast: 700;

  /* ----- DIMENSIONS FIXES ----- */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
  --input-height-sm: 36px;
  --input-height-md: 44px;
  --input-height-lg: 52px;
  --chat-input-max-height: 200px;

  /* ----- BOUTONS (Hauteurs) ----- */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
}

/* ===========================================
   TRANSITION GLOBALE POUR CHANGEMENT DE THEME
   =========================================== */

body,
body * {
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    color var(--transition-slow);
}

/* Exclure les elements qui ne doivent pas transitionner */
body img,
body video,
body svg,
body canvas,
body [data-no-transition] {
  transition: none;
}

/* ===========================================
   SCROLLBAR PERSONNALISEE
   =========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-hover);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-hover) var(--color-bg-secondary);
}

/* ===========================================
   SELECTION DE TEXTE
   =========================================== */

::selection {
  background-color: var(--color-accent);
  color: white;
}

/* ===========================================
   FOCUS VISIBLE (Accessibilite)
   =========================================== */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}