/* ═══ Floakly Design Tokens ═══ */
:root {
  --primary:          #1a56db;
  --primary-light:    #EEF2FF;

  --bg-page:          #ffffff;
  --bg-sidebar:       #ffffff;
  --bg-conv-panel:    #ffffff;
  --bg-conv-hover:    #f9fafb;
  --bg-conv-active:   #EEF2FF;
  --bg-chat:          #ffffff;
  --bg-bubble-them:   #f3f4f6;
  --bg-bubble-me:     #EEF2FF;
  --bg-search:        #f3f4f6;
  --bg-composer:      #f9fafb;
  --bg-file-bubble:   #f9fafb;
  --bg-input:         #f3f4f6;

  --text-primary:     #111827;
  --text-secondary:   #6b7280;
  --text-muted:       #9ca3af;
  --text-bubble-me:   #0d2b6e;
  --text-bubble-them: #111827;

  --border:           #e5e7eb;
  --border-light:     #f3f4f6;

  --online:           #22c55e;
  --offline:          #9ca3af;
  --danger:           #dc2626;
  --danger-bg:        #fee2e2;

  --reaction-bg:      #ffffff;
  --reaction-border:  #e5e7eb;

  --font-sans:        'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base:   14px;
  --font-size-sm:     12px;
  --font-size-xs:     11px;

  --radius-avatar:    50%;
  --radius-bubble:    18px;
  --radius-bubble-me-br: 4px;
  --radius-bubble-them-bl: 4px;
  --radius-search:    12px;
  --radius-card:      12px;
  --radius-file:      12px;
  --radius-composer:  24px;
}