@import 'tokens/index.css';

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-base) transparent;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 0;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-base);
    border-radius: var(--radius-xs);
}

:root {
    --header-height: 48px;
    --scrollbar-width: 8px;

    --shortcut-bg: var(--color-accent-subtle);
    --shortcut-border: var(--color-accent-border);
    --shortcut-text: var(--text-primary);

    --lora-accent-transparent: var(--color-accent-transparent);

    /* Legacy spacing aliases: 8px base grid to match existing component usage */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;

    /* Legacy border-radius aliases to match existing component usage */
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-base: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
}

:root {
    --bg-color: var(--bg-base);
    --text-color: var(--text-primary);
    --text-muted: var(--text-secondary);
    --card-bg: var(--surface-base);
    --border-color: var(--border-base);

    --lora-accent: var(--color-accent);
    --lora-surface: var(--bg-elevated);
    --lora-border: var(--border-subtle);
    --lora-text: var(--text-primary);
    --lora-error: var(--color-error);
    --lora-error-bg: var(--color-error-bg);
    --lora-error-border: var(--color-error-border);
    --lora-warning: var(--color-warning);
    --lora-success: var(--color-success);

    --badge-update-bg: var(--color-info-bg);
    --badge-update-text: var(--color-info-text);
    --badge-update-glow: var(--color-info-glow);
    --badge-skip-refresh-bg: var(--color-skip-refresh-bg);
    --badge-skip-refresh-text: var(--color-skip-refresh-text);
    --badge-skip-refresh-glow: var(--color-skip-refresh-glow);
}

[data-theme="dark"] {
    --bg-color: var(--bg-base);
    --text-color: var(--text-primary);
    --text-muted: var(--text-secondary);
    --card-bg: var(--surface-base);
    --border-color: var(--border-base);

    --lora-accent: var(--color-accent);
    --lora-surface: var(--bg-elevated);
    --lora-border: var(--border-subtle);
    --lora-text: var(--text-primary);
    --lora-error: var(--color-error);
    --lora-error-bg: var(--color-error-bg);
    --lora-error-border: var(--color-error-border);
    --lora-warning: var(--color-warning);
    --lora-success: var(--color-success);

    --badge-update-bg: var(--color-info-bg);
    --badge-update-text: var(--color-info-text);
    --badge-update-glow: var(--color-info-glow);
    --badge-skip-refresh-bg: var(--color-skip-refresh-bg);
    --badge-skip-refresh-text: var(--color-skip-refresh-text);
    --badge-skip-refresh-glow: var(--color-skip-refresh-glow);
}

html[data-theme="dark"] {
    background-color: var(--bg-base) !important;
    color-scheme: dark;
}

html[data-theme="light"] {
    background-color: var(--bg-base) !important;
    color-scheme: light;
}

body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.hidden {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}