/* Sarinder Labs Custom Theme - v2 */
:root {
  --sl-primary: #22d3ee;
  --sl-primary-dim: #0e7490;
  --sl-bg: #080d16;
  --sl-surface: #0f1729;
  --sl-surface2: #162032;
  --sl-surface3: #1c2a42;
  --sl-border: #1e3a5f;
  --sl-text: #e2e8f0;
  --sl-muted: #64748b;
  --sl-radius: 16px;
  --sl-radius-sm: 10px;
  --sl-user-bubble: #164e63;
  --sl-ai-bubble: #1e293b;
}

/* Global overrides */
body, html {
  background: var(--sl-bg) !important;
  color: var(--sl-text) !important;
}

/* Force into shadow DOM via CSS custom properties the app reads */
openclaw-app {
  --color-bg-primary: var(--sl-bg) !important;
  --color-bg-secondary: var(--sl-surface) !important;
  --color-bg-tertiary: var(--sl-surface2) !important;
  --color-border-primary: var(--sl-border) !important;
  --color-border-secondary: var(--sl-border) !important;
  --color-text-primary: var(--sl-text) !important;
  --color-text-secondary: var(--sl-muted) !important;
  --color-accent: var(--sl-primary) !important;
  --color-accent-dim: var(--sl-primary-dim) !important;
  --radius-lg: var(--sl-radius) !important;
  --radius-md: var(--sl-radius-sm) !important;
  --radius-sm: 8px !important;
  --chat-message-user-bg: var(--sl-user-bubble) !important;
  --chat-message-assistant-bg: var(--sl-ai-bubble) !important;
  --chat-message-border-radius: 18px !important;
  --chat-composer-border-radius: 24px !important;
  --sidebar-bg: var(--sl-surface) !important;
  --sidebar-border: var(--sl-border) !important;
  --topbar-bg: var(--sl-surface) !important;
  --topbar-border: var(--sl-border) !important;
  --card-border-radius: var(--sl-radius) !important;
  --card-bg: var(--sl-surface2) !important;
  --input-border-radius: 12px !important;
  --button-border-radius: var(--sl-radius-sm) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sl-primary-dim); }

/* Smooth transitions */
* { transition: background-color 0.15s ease, border-color 0.15s ease; }

/* Remove harsh outlines */
*:focus { outline: 2px solid var(--sl-primary-dim) !important; outline-offset: 2px; }