/* ============================================================
   variables.css — Design tokens (CSS custom properties)
   Tokens pour l'ensemble de l'application DocEditor.
   Chaque composant utilise ces variables pour rester cohérent.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     Couleurs principales
     -------------------------------------------------------- */
  --primary: #1a73e8;
  --primary-light: #d3e3fd;
  --primary-dark: #1557b0;
  --primary-hover: #1967d2;
  --primary-text-on-light: #1a73e8;
  --primary-text-on-dark: #8ab4f8;
  --error: #d93025;
  --error-light: #fce8e6;
  --success: #1e8e3e;
  --success-light: #e6f4ea;
  --warning: #f9ab00;
  --warning-light: #fef7e0;

  /* --------------------------------------------------------
     Header
     -------------------------------------------------------- */
  --header-height: 64px;
  --header-bg: #ffffff;
  --header-border: #e0e0e0;
  --header-title-font: 'Google Sans', 'Roboto', Arial, sans-serif;
  --header-title-size: 18px;
  --header-title-weight: 500;
  --header-icon-size: 28px;
  --header-icon-color: #1a73e8;
  --header-icon-muted: #9aa0a6;
  --header-gap: 12px;
  --header-padding: 0 16px;

  /* --------------------------------------------------------
     Toolbar
     -------------------------------------------------------- */
  --toolbar-bg: #ffffff;
  --toolbar-border: #dadce0;
  --toolbar-height: 40px;
  --toolbar-btn-size: 28px;
  --toolbar-btn-padding: 4px 6px;
  --toolbar-btn-radius: 4px;
  --toolbar-btn-hover: #f1f3f4;
  --toolbar-btn-active: #d3e3fd;
  --toolbar-btn-active-text: #1a73e8;
  --toolbar-btn-disabled: #e8eaed;
  --toolbar-btn-disabled-text: #9aa0a6;
  --toolbar-font: 'Google Sans', 'Roboto', Arial, sans-serif;
  --toolbar-font-size: 13px;
  --toolbar-icon-size: 18px;
  --toolbar-separator-width: 1px;
  --toolbar-separator-height: 20px;
  --toolbar-separator-color: #dadce0;
  --toolbar-group-gap: 2px;
  --toolbar-padding: 0 8px;

  /* Sélecteurs (font, size, style) */
  --select-bg: transparent;
  --select-hover-bg: #f1f3f4;
  --select-border: none;
  --select-radius: 4px;
  --select-font-size: 13px;
  --select-height: 28px;
  --select-padding: 0 4px;
  --select-arrow-color: #5f6368;

  /* Input font-size (+/-) */
  --font-size-input-width: 36px;
  --font-size-input-height: 28px;
  --font-size-input-font-size: 13px;
  --font-size-btn-font-size: 14px;

  /* --------------------------------------------------------
     Page (document)
     -------------------------------------------------------- */
  --page-width: 794px;           /* A4 à 96dpi */
  --page-min-height: 1123px;     /* A4 à 96dpi */
  --page-padding: 96px;
  --page-padding-top: 96px;
  --page-padding-right: 96px;
  --page-padding-bottom: 96px;
  --page-padding-left: 96px;
  --page-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --page-bg: #ffffff;
  --page-text: #333333;
  --outer-bg: #f0f4f9;
  --page-container-padding: 24px;
  --page-border-radius: 2px;
  --page-margin-bottom: 24px;

  /* --------------------------------------------------------
     Sidebar
     -------------------------------------------------------- */
  --sidebar-width: 250px;
  --sidebar-bg: #f8f9fa;
  --sidebar-border: #e0e0e0;
  --sidebar-text: #5f6368;
  --sidebar-heading-color: #202124;
  --sidebar-heading-size: 13px;
  --sidebar-item-size: 12px;
  --sidebar-item-padding: 6px 8px;
  --sidebar-item-radius: 4px;
  --sidebar-item-hover-bg: #e8eaed;
  --sidebar-item-active-bg: #d3e3fd;

  /* --------------------------------------------------------
     Tabs
     -------------------------------------------------------- */
  --tab-bar-bg: #f8f9fa;
  --tab-bar-height: 36px;
  --tab-min-width: 80px;
  --tab-max-width: 200px;
  --tab-padding: 0 12px;
  --tab-font-size: 13px;
  --tab-font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
  --tab-active-border: #1a73e8;
  --tab-active-bg: #ffffff;
  --tab-hover-bg: #e8eaed;
  --tab-text: #5f6368;
  --tab-active-text: #202124;
  --tab-radius: 4px 4px 0 0;
  --tab-close-size: 16px;
  --tab-unsaved-dot: #f9ab00;
  --tab-drag-opacity: 0.7;
  --tab-drag-border: #1a73e8;

  /* --------------------------------------------------------
     Status bar
     -------------------------------------------------------- */
  --status-bar-height: 28px;
  --status-bar-bg: #ffffff;
  --status-bar-border: #dadce0;
  --status-bar-text: #5f6368;
  --status-bar-font-size: 12px;
  --status-bar-padding: 0 16px;
  --status-bar-gap: 16px;

  /* --------------------------------------------------------
     Typography
     -------------------------------------------------------- */
  --font-default: 'Georgia', serif;
  --font-sans: 'Google Sans', 'Roboto', Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-size-default: 11pt;
  --line-height-default: 1.5;
  --heading1-size: 24pt;
  --heading2-size: 18pt;
  --heading3-size: 14pt;
  --heading4-size: 12pt;
  --heading5-size: 11pt;
  --heading-color: #202124;
  --heading-font: 'Google Sans', 'Roboto', Arial, sans-serif;
  --body-color: #333333;
  --link-color: #1a73e8;
  --quote-color: #5f6368;
  --quote-border: #dadce0;
  --code-bg: #f1f3f4;
  --code-color: #202124;

  /* --------------------------------------------------------
     Transitions
     -------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* --------------------------------------------------------
     Focus mode
     -------------------------------------------------------- */
  --focus-dot-size: 8px;
  --focus-dot-color: #9aa0a6;
  --focus-dot-hover-color: #1a73e8;
  --focus-toolbar-width: auto;
  --focus-toolbar-radius: 8px;
  --focus-toolbar-shadow: 0 2px 12px rgba(0,0,0,0.15);
  --focus-toolbar-opacity: 0;
  --focus-toolbar-hover-opacity: 1;

  /* --------------------------------------------------------
     Popovers
     -------------------------------------------------------- */
  --popover-bg: #ffffff;
  --popover-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --popover-border: #dadce0;
  --popover-border-radius: 8px;
  --popover-z-index: 1000;
  --popover-padding: 8px;
  --popover-max-height: 320px;

  /* --------------------------------------------------------
     Modals
     -------------------------------------------------------- */
  --modal-overlay-bg: rgba(0, 0, 0, 0.4);
  --modal-bg: #ffffff;
  --modal-border-radius: 12px;
  --modal-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --modal-max-width: 480px;
  --modal-padding: 24px;
  --modal-header-size: 18px;
  --modal-z-index: 2000;

  /* --------------------------------------------------------
     Comments
     -------------------------------------------------------- */
  --comment-bubble-bg: #fff9c4;
  --comment-bubble-border: #fdd835;
  --comment-bubble-text: #5f6368;
  --comment-bubble-radius: 8px;
  --comment-bubble-padding: 8px 12px;
  --comment-bubble-font-size: 13px;
  --comment-highlight-bg: rgba(255, 235, 59, 0.3);
  --comment-panel-width: 300px;
  --comment-panel-bg: #f8f9fa;
  --comment-panel-border: #e0e0e0;

  /* --------------------------------------------------------
     Scrollbar (personnalisée)
     -------------------------------------------------------- */
  --scrollbar-width: 6px;
  --scrollbar-track-bg: transparent;
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb-radius: 3px;

  /* --------------------------------------------------------
     Search bar
     -------------------------------------------------------- */
  --search-bar-bg: #ffffff;
  --search-bar-border: #dadce0;
  --search-bar-border-focus: #1a73e8;
  --search-bar-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --search-bar-radius: 8px;
  --search-bar-padding: 8px 12px;
  --search-bar-font-size: 13px;
  --search-bar-z-index: 900;

  /* --------------------------------------------------------
     Color picker
     -------------------------------------------------------- */
  --color-grid-cols: 8;
  --color-cell-size: 20px;
  --color-cell-gap: 2px;
  --color-cell-radius: 2px;
  --color-input-height: 28px;

  /* --------------------------------------------------------
     Table picker
     -------------------------------------------------------- */
  --table-grid-cols: 8;
  --table-grid-rows: 8;
  --table-cell-size: 16px;
  --table-cell-gap: 1px;
  --table-cell-border: #dadce0;
  --table-cell-hover-bg: #d3e3fd;

  /* --------------------------------------------------------
     Contenteditable (éditeur)
     -------------------------------------------------------- */
  --editor-selection-bg: rgba(26, 115, 232, 0.25);
  --editor-selection-color: inherit;
  --editor-placeholder-color: #9aa0a6;
  --editor-paragraph-spacing: 0.5em;
  --editor-hr-color: #dadce0;

  /* --------------------------------------------------------
     Table dans l'éditeur
     -------------------------------------------------------- */
  --editor-table-border: #dadce0;
  --editor-table-cell-padding: 6px 8px;
  --editor-table-header-bg: #f1f3f4;
  --editor-table-selected-bg: #d3e3fd;

  /* --------------------------------------------------------
     Image dans l'éditeur
     -------------------------------------------------------- */
  --editor-img-selected-outline: #1a73e8;
  --editor-img-resize-handle-size: 8px;
  --editor-img-resize-handle-bg: #ffffff;
  --editor-img-resize-handle-border: #1a73e8;

  /* --------------------------------------------------------
     Drag & drop
     -------------------------------------------------------- */
  --drop-zone-bg: rgba(26, 115, 232, 0.06);
  --drop-zone-border: #1a73e8;
  --drop-zone-border-style: dashed;

  /* --------------------------------------------------------
     Responsive
     -------------------------------------------------------- */
  --min-app-width: 1280px;

  /* --------------------------------------------------------
     Animations
     -------------------------------------------------------- */
  --animation-fade-in: fadeIn 0.2s ease;
  --animation-slide-down: slideDown 0.2s ease;
  --animation-slide-up: slideUp 0.15s ease;
}

/* ============================================================
   Dark mode overrides — Variables HSL intelligentes
   Activé via body.dark-mode ou [data-theme="dark"]
   ============================================================ */
body.dark-mode,
[data-theme="dark"] {
  --outer-bg: #1e1e2e;
  --page-bg: #252535;
  --page-text: #e8e8f0;
  --page-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);

  --header-bg: #1a1a2a;
  --header-border: #3a3a5a;
  --header-icon-color: #8ab4f8;
  --header-icon-muted: #6c6c8a;

  --toolbar-bg: #2a2a3d;
  --toolbar-border: #3a3a5a;
  --toolbar-btn-hover: #3a3a5a;
  --toolbar-btn-active: #4a4a6a;
  --toolbar-btn-active-text: #8ab4f8;
  --toolbar-btn-disabled: #2a2a3d;
  --toolbar-btn-disabled-text: #5a5a7a;
  --toolbar-separator-color: #3a3a5a;

  --select-hover-bg: #3a3a5a;
  --select-arrow-color: #b0b0cc;

  --sidebar-bg: #1a1a2a;
  --sidebar-border: #3a3a5a;
  --sidebar-text: #a0a0b8;
  --sidebar-heading-color: #e8e8f0;
  --sidebar-item-hover-bg: #2a2a3d;
  --sidebar-item-active-bg: #3a3a5a;

  --tab-bar-bg: #1a1a2a;
  --tab-active-border: #8ab4f8;
  --tab-active-bg: #252535;
  --tab-hover-bg: #2a2a3d;
  --tab-text: #a0a0b8;
  --tab-active-text: #e8e8f0;

  --status-bar-bg: #2a2a3d;
  --status-bar-border: #3a3a5a;
  --status-bar-text: #a0a0b8;

  --heading-color: #e8e8f0;
  --body-color: #e8e8f0;
  --link-color: #8ab4f8;
  --quote-color: #a0a0b8;
  --quote-border: #3a3a5a;
  --code-bg: #2a2a3d;
  --code-color: #e8e8f0;

  --popover-bg: #2a2a3d;
  --popover-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --popover-border: #3a3a5a;

  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-bg: #2a2a3d;
  --modal-shadow: 0 8px 32px rgba(0,0,0,0.4);

  --comment-bubble-bg: #3a3a2a;
  --comment-bubble-border: #5a5a3a;
  --comment-bubble-text: #e8e8f0;
  --comment-highlight-bg: rgba(255, 235, 59, 0.15);
  --comment-panel-bg: #1a1a2a;
  --comment-panel-border: #3a3a5a;

  --search-bar-bg: #2a2a3d;
  --search-bar-border: #3a3a5a;
  --search-bar-border-focus: #8ab4f8;
  --search-bar-shadow: 0 2px 8px rgba(0,0,0,0.3);

  --editor-selection-bg: rgba(138, 180, 248, 0.3);
  --editor-placeholder-color: #5a5a7a;
  --editor-hr-color: #3a3a5a;

  --editor-table-border: #3a3a5a;
  --editor-table-header-bg: #2a2a3d;
  --editor-table-selected-bg: #3a3a5a;

  --editor-img-selected-outline: #8ab4f8;
  --editor-img-resize-handle-border: #8ab4f8;

  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.3);

  --drop-zone-bg: rgba(138, 180, 248, 0.08);
  --drop-zone-border: #8ab4f8;

  --color-cell-hover-bg: #3a3a5a;

  --focus-dot-color: #5a5a7a;
  --focus-dot-hover-color: #8ab4f8;
  --focus-toolbar-shadow: 0 2px 12px rgba(0,0,0,0.4);
}