:root {

  --bubble-out-bg:        #2563eb;
  --bubble-out-text:      #ffffff;
  --bubble-in-bg:         #f1f5f9;
  --bubble-in-text:       #0f172a;

  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f1f5f9;
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;

  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #dbeafe;
  --color-primary-text:   #ffffff;

  --color-text:           #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted:     #94a3b8;
  --color-text-inverted:  #ffffff;
  
  --status-available:     #22c55e;
  --status-busy:          #f97316;
  --status-lunch:         #eab308;
  --status-off-duty:      #ef4444;
  --status-vacation:      #8b5cf6;
  --status-unknown:       #94a3b8;  

  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-info:           #3b82f6;

}

[data-theme="dark"] {
  --color-bg:             #0f172a;
  --color-surface:        #1e293b;
  --color-surface-alt:    #293548;
  --color-border:         #334155;
  --color-border-strong:  #475569;
  --color-text:           #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;
  --bubble-in-bg:         #293548;
  --bubble-in-text:       #f1f5f9;
  --color-primary-light:  #1e3a5f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}