/* --- TEMA ESCURO (Padrão) --- */
:root {
  /* Cores de fundo principais */
  --color-bg-primary: #0d1014;
  --color-bg-secondary: #080a0a;
  --color-bg-tertiary: #1a1f2a;
  --color-bg-hover: rgba(0,141,163,0.12);

  /* Textos */
  --color-text-primary: #ededed; 
  --color-text-secondary: #b2b2b2;
  --color-text-muted: #a0a0a0; 

  /* Cores de acento */ 
  --color-accent-primary: #008da3; 
  --color-accent-primary-hover: #00718c;
  --color-accent-secondary: #777777; 
  --color-accent-secondary-hover: #666666;
  --color-accent-danger: #d32f2f;
  --color-accent-danger-hover: #c62828;
  --color-accent-light: #909090; 
  --color-border: rgba(255,255,255,0.08);

  /* Adicionando versão RGB da cor de destaque para uso com transparência */
  --color-accent-primary-rgb: 0, 141, 163;

  /* Cores específicas para separação visual */
  --color-sidebar-bg: #1f3342;
  --color-sidebar-header: #3e5c78;
  --color-chat-header: #0d1014;
  --color-separator: rgba(255,255,255,0.06);

  /* Spacing variables */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border radius variables */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 25px;

  /* Shadow variables */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);

  /* Other variables */
  --sidebar-width: 300px;
  --sidebar-collapsed-width: 4rem; 
  --transition-speed: 0.3s;
  --transition-function: ease;

  /* Code highlighting colors */
  --color-bg-code: #0f1219;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Glass / surface design tokens */
  --color-surface: #0e1114;
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-active: rgba(255,255,255,0.14);

  /* Extended border radii */
  --border-radius-xl: 20px;
  --border-radius-2xl: 28px;

  /* Input / form token */
  --color-input-bg: #1a1f2a;
  --color-form-bg: #080a0a;
}

/* --- TEMA CLARO --- */
.light-theme {
  /* Cores de fundo principais */
  --color-bg-primary: #F0F4F7;
  --color-bg-secondary: #E4E9EE;
  --color-bg-tertiary: #D8DFE6;
  --color-bg-hover: #D8F0F4;

  /* Textos */
  --color-text-primary: #080a0a;
  --color-text-secondary: #1f3342;
  --color-text-muted: #6c757d;

  /* Cores de acento */
  --color-accent-primary: #008da3;
  --color-accent-primary-hover: #00718c;
  --color-accent-secondary: #3e5c78;
  --color-accent-secondary-hover: #2c4a63;
  --color-accent-danger: #d32f2f;
  --color-accent-danger-hover: #c62828;
  --color-accent-light: #adb5bd;
  --color-border: #ced4da;

  /* Adicionando versão RGB da cor de destaque para uso com transparência */
  --color-accent-primary-rgb: 0, 141, 163;

  /* Cores específicas para separação visual */
  --color-sidebar-bg: #3e5c78;
  --color-sidebar-header: #1f3342;
  --color-chat-header: #008da3;
  --color-separator: var(--color-border);

  /* Shadow variables - ajustados para o tema claro */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);

  /* Design tokens — light mode overrides */
  --color-surface: #F5F8FA;
  --glass-border: rgba(0,0,0,0.1);
  --glass-border-active: rgba(0,0,0,0.2);
  --color-input-bg: #E8EDF2;
  --color-form-bg: #E0E6EC;
  --color-bg-code: #f6f8fa;
}