:root {
    /* Paleta base */
    --color-bg-nav: #14162b;
    --color-bg-main: #1C1F3B;
    --color-bg-console: #141627;
    --color-bg-elevated: #282C4D;
    --color-primary: #9400D3;
    --color-btn-primary-bg: #9400D3;
    --color-primary-soft: #3C3F68;
    --color-accent: #D668E3;

    --color-text-main: #E8EAF6;
    --color-text-muted: #B0B3C1;
    --color-border-subtle: #3C3F68;
    --color-btn-primary-text: #E8EAF6;

    /* Estados */
    --color-btn-hover: #606271;
    --color-btn-primary-hover-bg: #D668E3;
    --color-shadow-soft: rgba(0, 0, 0, 0.4);

    --color-btn-outline-border: #9400D3;
    --color-btn-outline-text: #E8EAF6;
    --color-btn-outline-hover-bg: rgba(148, 0, 211, 0.18);

    /* Tipografía */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;


    /* Espaciados y radios */
    --radius-soft: 0.5rem;
    --radius-pill: 999px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;

    /* Anchuras máximas */
    --max-width-content: 1100px;
}

/* Tema oscuro para integrar con Bootstrap 5.3 */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: var(--color-bg-main);
    --bs-body-color: var(--color-text-main);
    --bs-border-color: var(--color-border-subtle);
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-primary-soft);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-primary);
}