/* W5G THEME - BASE STYLES */

html:not([data-theme="giacngo"]), html[data-theme="w5g"] {
    --color-primary: #3b82f6; /* blue-500 */
    --color-primary-hover: #2563eb; /* blue-600 */
    --color-primary-light: #eff6ff; /* blue-50 */
    --color-primary-text: #1e40af; /* blue-800 */
    --color-text-on-primary: #ffffff;
    --color-accent-red: #ef4444; /* red-500 */
    --color-accent-red-hover: #dc2626; /* red-600 */
    --color-accent-red-light: #fee2e2; /* red-100 */
    --color-text-main: #1f2937;
    --color-text-light: #6b7280;
    --color-background-main: #f9fafb; /* gray-50 */
    --color-background-light: #f3f4f6; /* gray-100 */
    --color-background-panel: #ffffff; /* white */
    --color-border-color: #e5e7eb; /* gray-200 */
    --color-background-ai-bubble: #f3f4f6; /* gray-100 */
    --color-text-on-ai-bubble: #1f2937; /* gray-800 */
}

/* -------------------------------------------------------------------------- */
/*                           GLOBAL STYLES                                    */
/* -------------------------------------------------------------------------- */

html:not([data-theme="giacngo"]) body, 
html[data-theme="w5g"] body {
    background-color: var(--color-background-main);
    color: var(--color-text-main);
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.page-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.5rem;
    color: var(--color-text-main);
    background-color: var(--color-background-main);
}

/* -------------------------------------------------------------------------- */
/*                           CUSTOM SCROLLBAR                                 */
/* -------------------------------------------------------------------------- */

html:not([data-theme="giacngo"]) ::-webkit-scrollbar,
html[data-theme="w5g"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html:not([data-theme="giacngo"]) ::-webkit-scrollbar-track,
html[data-theme="w5g"] ::-webkit-scrollbar-track {
  background: var(--color-background-light);
}
html:not([data-theme="giacngo"]) ::-webkit-scrollbar-thumb,
html[data-theme="w5g"] ::-webkit-scrollbar-thumb {
  background: #bdc3c7; /* A neutral gray */
  border-radius: 3px;
}
html:not([data-theme="giacngo"]) ::-webkit-scrollbar-thumb:hover,
html[data-theme="w5g"] ::-webkit-scrollbar-thumb:hover {
  background: #95a5a6; /* A darker neutral gray */
}