/* === LOGILEA DESIGN TOKENS === */

:root {
  /* Global primitive color palette */
  --accent-color: #707DFF;
  --accent-hover: #5a6eff;
  --accent-soft: rgba(112, 125, 255, 0.1);
  
  /* Sizing and layout values */
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-pill: 100px;
  
  /* Light Theme tokens (Default) */
  --bg-gradient: radial-gradient(circle at 80% 20%, rgba(112, 125, 255, 0.15) 0%, #f4f5f8 60%, #e2e5ff 100%);
  --card-bg: rgba(255, 255, 255, 0.75);
  --card-border: rgba(255, 255, 255, 0.6);
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --shadow-sm: 0 4px 12px rgba(112, 125, 255, 0.03);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.08);
  
  /* Forms & inputs */
  --input-bg: rgba(255, 255, 255, 0.7);
  --input-border: rgba(0, 0, 0, 0.08);
  --input-focus-bg: #fff;
  
  /* Header and nav */
  --header-bg: rgba(255, 255, 255, 0.85);
  --nav-bg: rgba(244, 244, 245, 0.6);
  --context-menu-bg: rgba(255, 255, 255, 0.97);
  --action-btn-bg: #fff;
  --action-btn-border: rgba(255, 255, 255, 0.6);
  
  /* Messenger-specific tokens */
  --messenger-app-bg: #eeeef2;
  --messenger-chat-list-bg: #fff;
  --messenger-chat-list-border: #e0e6ed;
  --messenger-chat-item-border: rgba(224, 230, 237, 0.5);
  --messenger-chat-item-hover: rgba(112, 125, 255, 0.04);
  --messenger-window-bg: #fff;
  --messenger-input-area-bg: #fff;
  --messenger-input-wrapper-bg: #f3f4f6;
  --messenger-bubble-incoming-bg: #f3f4f6;
  --messenger-bubble-incoming-text: #1f2937;
  --messenger-bubble-outgoing-bg: #707DFF;
  --messenger-bubble-outgoing-text: #fff;
  
  --white: #fff;
}

/* Dark Theme overrides */
html[data-theme="dark"] {
  --accent-soft: rgba(112, 125, 255, 0.25);
  
  --bg-gradient: radial-gradient(circle at 80% 20%, rgba(112, 125, 255, 0.1) 0%, #0c0d12 60%, #151624 100%);
  --card-bg: rgba(26, 27, 34, 0.8);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
  
  /* Forms & inputs */
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-bg: rgba(255, 255, 255, 0.06);
  
  /* Header and nav */
  --header-bg: rgba(20, 20, 25, 0.85);
  --nav-bg: rgba(30, 30, 35, 0.6);
  --context-menu-bg: rgba(26, 27, 34, 0.98);
  --action-btn-bg: rgba(255, 255, 255, 0.05);
  --action-btn-border: rgba(255, 255, 255, 0.1);
  
  /* Messenger-specific tokens */
  --messenger-app-bg: #0d0e12;
  --messenger-chat-list-bg: #16161b;
  --messenger-chat-list-border: #232329;
  --messenger-chat-item-border: rgba(255, 255, 255, 0.05);
  --messenger-chat-item-hover: rgba(255, 255, 255, 0.04);
  --messenger-window-bg: #0d0e12;
  --messenger-input-area-bg: #16161b;
  --messenger-input-wrapper-bg: #1e1e24;
  --messenger-bubble-incoming-bg: #1e1e24;
  --messenger-bubble-incoming-text: #f4f4f5;
  --messenger-bubble-outgoing-bg: #707DFF;
  --messenger-bubble-outgoing-text: #fff;
  
  --white: #16161b;
}

/* Global utility classes */
.hidden-element,
.ref-display-none-9c7663,
.ref-display-none-cb4589 {
  display: none !important;
}

.ref-display-none-color-dc3545-a9ad62 {
  display: none !important;
  color: #dc3545 !important;
}