/* theme.css */

/* =========================================
   MODO CLARO (Light Theme)
   Extendiendo las variables de Bootstrap 5.3
========================================= */
:root,
[data-bs-theme="light"] {
    /* Fonts */
    --bs-font-sans-serif: var(--quarx-font-sans-serif);
    --bs-font-monospace: var(--quarx-font-monospace);

    /* Base Colors */
    --bs-primary: var(--geekblue-6);
    --bs-secondary: var(--purple-6);
    --bs-success: var(--green-6);
    --bs-info: var(--blue-6);
    --bs-warning: var(--gold-6);
    --bs-danger: var(--red-5);
    --bs-light: var(--gray-1);
    --bs-dark: var(--gray-10);

    /* RGB Colors */
    --bs-primary-rgb: var(--geekblue-6-rgb);
    --bs-secondary-rgb: var(--purple-6-rgb);
    --bs-success-rgb: var(--green-6-rgb);
    --bs-info-rgb: var(--blue-6-rgb);
    --bs-warning-rgb: var(--gold-6-rgb);
    --bs-danger-rgb: var(--red-5-rgb);
    --bs-light-rgb: var(--gray-1-rgb);
    --bs-dark-rgb: var(--gray-10-rgb);

    /* Text Emphasis (Tonos oscuros para contraste en fondos claros) */
    --bs-primary-text-emphasis: var(--geekblue-9);
    --bs-secondary-text-emphasis: var(--purple-9);
    --bs-success-text-emphasis: var(--green-9);
    --bs-info-text-emphasis: var(--blue-9);
    --bs-warning-text-emphasis: var(--gold-9);
    --bs-danger-text-emphasis: var(--red-9);
    --bs-light-text-emphasis: var(--gray-7);
    --bs-dark-text-emphasis: var(--gray-10);

    /* Background Subtle (Tonos muy claros) */
    --bs-primary-bg-subtle: var(--geekblue-1);
    --bs-secondary-bg-subtle: var(--purple-1);
    --bs-success-bg-subtle: var(--green-1);
    --bs-info-bg-subtle: var(--blue-1);
    --bs-warning-bg-subtle: var(--gold-1);
    --bs-danger-bg-subtle: var(--red-1);
    --bs-light-bg-subtle: var(--gray-2);
    --bs-dark-bg-subtle: var(--gray-4);

    /* Border Subtle (Tonos intermedios claros) */
    --bs-primary-border-subtle: var(--geekblue-3);
    --bs-secondary-border-subtle: var(--purple-3);
    --bs-success-border-subtle: var(--green-3);
    --bs-info-border-subtle: var(--blue-3);
    --bs-warning-border-subtle: var(--gold-3);
    --bs-danger-border-subtle: var(--red-3);
    --bs-light-border-subtle: var(--gray-3);
    --bs-dark-border-subtle: var(--gray-5);

    /* Global Setup */
    --bs-gradient: linear-gradient(180deg, rgba(var(--white-rgb), 0.15), rgba(var(--white-rgb), 0));
    --bs-body-color: var(--gray-9);
    --bs-body-color-rgb: var(--gray-9-rgb);
    --bs-body-bg: var(--white);
    --bs-body-bg-rgb: var(--white-rgb);

    /* Utilities */
    --bs-emphasis-color: var(--black);
    --bs-emphasis-color-rgb: var(--black-rgb);
    --bs-secondary-color: var(--gray-7);
    --bs-secondary-color-rgb: var(--gray-7-rgb);
    --bs-secondary-bg: var(--gray-2);
    --bs-secondary-bg-rgb: var(--gray-2-rgb);
    --bs-tertiary-color: var(--gray-6);
    --bs-tertiary-color-rgb: var(--gray-6-rgb);
    --bs-tertiary-bg: var(--gray-1);
    --bs-tertiary-bg-rgb: var(--gray-1-rgb);

    /* Components */
    --bs-link-color: var(--geekblue-6);
    --bs-link-color-rgb: var(--geekblue-6-rgb);
    --bs-link-hover-color: var(--geekblue-8);
    --bs-link-hover-color-rgb: var(--geekblue-8-rgb);
    --bs-code-color: var(--magenta-6);
    --bs-highlight-color: var(--gray-9);
    --bs-highlight-bg: var(--gold-2);
    --bs-border-color: var(--gray-4);
    --bs-border-color-translucent: rgba(var(--black-rgb), 0.175);

    /* Shadows */
    --bs-box-shadow: 0 0.5rem 1rem rgba(var(--black-rgb), 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--black-rgb), 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--black-rgb), 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--black-rgb), 0.075);
    --bs-focus-ring-color: rgba(var(--geekblue-6-rgb), 0.25);

    /* Forms */
    --bs-form-valid-color: var(--green-7);
    --bs-form-valid-border-color: var(--green-7);
    --bs-form-invalid-color: var(--red-6);
    --bs-form-invalid-border-color: var(--red-6);
}

/* =========================================
   MODO OSCURO (Dark Theme)
   Soporte nativo de Bootstrap 5.3
========================================= */
[data-bs-theme="dark"] {
    /* Base Colors */
    --bs-primary: var(--geekblue-6);
    --bs-secondary: var(--purple-6);
    --bs-success: var(--green-6);
    --bs-info: var(--blue-6);
    --bs-warning: var(--gold-6);
    --bs-danger: var(--red-5);
    --bs-light: var(--gray-1);
    --bs-dark: var(--gray-10);

    /* RGB Colors */
    --bs-primary-rgb: var(--geekblue-6-rgb);
    --bs-secondary-rgb: var(--purple-6-rgb);
    --bs-success-rgb: var(--green-6-rgb);
    --bs-info-rgb: var(--blue-6-rgb);
    --bs-warning-rgb: var(--gold-6-rgb);
    --bs-danger-rgb: var(--red-5-rgb);
    --bs-light-rgb: var(--gray-1-rgb);
    --bs-dark-rgb: var(--gray-10-rgb);

    /* Text Emphasis (Tonos claros para contraste en fondos oscuros) */
    --bs-primary-text-emphasis: var(--geekblue-9);
    --bs-secondary-text-emphasis: var(--purple-9);
    --bs-success-text-emphasis: var(--green-9);
    --bs-info-text-emphasis: var(--blue-9);
    --bs-warning-text-emphasis: var(--gold-9);
    --bs-danger-text-emphasis: var(--red-9);
    --bs-light-text-emphasis: var(--gray-1);
    --bs-dark-text-emphasis: var(--gray-4);

    /* Background Subtle (Tonos muy oscuros) */
    --bs-primary-bg-subtle: var(--geekblue-1);
    --bs-secondary-bg-subtle: var(--purple-1);
    --bs-success-bg-subtle: var(--green-1);
    --bs-info-bg-subtle: var(--blue-1);
    --bs-warning-bg-subtle: var(--gold-1);
    --bs-danger-bg-subtle: var(--red-1);
    --bs-light-bg-subtle: var(--gray-8);
    --bs-dark-bg-subtle: var(--gray-10);

    /* Border Subtle (Tonos oscuros intermedios) */
    --bs-primary-border-subtle: var(--geekblue-3);
    --bs-secondary-border-subtle: var(--purple-3);
    --bs-success-border-subtle: var(--green-3);
    --bs-info-border-subtle: var(--blue-3);
    --bs-warning-border-subtle: var(--gold-3);
    --bs-danger-border-subtle: var(--red-3);
    --bs-light-border-subtle: var(--gray-6);
    --bs-dark-border-subtle: var(--gray-8);

    /* Global Setup */
    --bs-gradient: linear-gradient(180deg, rgba(var(--white-rgb), 0.15), rgba(var(--white-rgb), 0));
    --bs-body-color: var(--gray-4);
    --bs-body-color-rgb: var(--gray-4-rgb);
    --bs-body-bg: var(--gray-10);
    --bs-body-bg-rgb: var(--gray-10-rgb);

    /* Utilities */
    --bs-emphasis-color: var(--white);
    --bs-emphasis-color-rgb: var(--white-rgb);
    --bs-secondary-color: var(--gray-5);
    --bs-secondary-color-rgb: var(--gray-5-rgb);
    --bs-secondary-bg: var(--gray-9);
    --bs-secondary-bg-rgb: var(--gray-9-rgb);
    --bs-tertiary-color: var(--gray-6);
    --bs-tertiary-color-rgb: var(--gray-6-rgb);
    --bs-tertiary-bg: var(--gray-9);
    --bs-tertiary-bg-rgb: var(--gray-9-rgb);

    /* Components */
    --bs-link-color: var(--geekblue-6);
    --bs-link-color-rgb: var(--geekblue-6-rgb);
    --bs-link-hover-color: var(--geekblue-8);
    --bs-link-hover-color-rgb: var(--geekblue-8-rgb);
    --bs-code-color: var(--magenta-6);
    --bs-highlight-color: var(--gray-9);
    --bs-highlight-bg: var(--gold-2);
    --bs-border-color: var(--gray-4);
    --bs-border-color-translucent: rgba(var(--white-rgb), 0.15);

    /* Shadows */
    --bs-box-shadow: 0 0.5rem 1rem rgba(var(--black-rgb), 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--black-rgb), 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--black-rgb), 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--black-rgb), 0.075);
    --bs-focus-ring-color: rgba(var(--geekblue-6-rgb), 0.25);

    /* Forms (Grados ligeramente más claros para asegurar visibilidad en modo oscuro) */
    --bs-form-valid-color: var(--green-5);
    --bs-form-valid-border-color: var(--green-5);
    --bs-form-invalid-color: var(--red-5);
    --bs-form-invalid-border-color: var(--red-5);
}