/**
 * Theme Colors Variables
 * 
 * CSS Custom Properties for theme color customization
 *
 * @package TattooEdu
 * @version 1.0.0
 */

:root {
    /* ===== COLORES PRINCIPALES ===== */
    --theme-bg-color: #ffffff;
    --theme-primary-color: #007cba;
    --theme-secondary-color: #6c757d;
    --theme-text-color: #212529;
    --theme-heading-color: #000000;
    --theme-link-color: #007cba;
    --theme-button-color: #007cba;
    
    /* ===== COLORES DERIVADOS ===== */
    --theme-primary-hover: var(--theme-primary-color);
    --theme-primary-light: var(--theme-primary-color);
    --theme-primary-dark: var(--theme-primary-color);
    
    --theme-secondary-light: var(--theme-secondary-color);
    --theme-secondary-dark: var(--theme-secondary-color);
    
    --theme-button-hover: var(--theme-button-color);
    --theme-button-text: #ffffff;
    
    --theme-link-hover: var(--theme-link-color);
    
    /* ===== COLORES DE FONDO ===== */
    --theme-content-bg: var(--theme-bg-color);
    --theme-section-bg: var(--theme-bg-color);
    --theme-card-bg: var(--theme-bg-color);
    
    /* ===== BORDES Y SOMBRAS ===== */
    --theme-border-color: rgba(0, 0, 0, 0.125);
    --theme-border-light: rgba(0, 0, 0, 0.0625);
    --theme-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --theme-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    
    /* ===== COLORES DE ESTADO ===== */
    --theme-success: #28a745;
    --theme-warning: #ffc107;
    --theme-danger: #dc3545;
    --theme-info: #17a2b8;
    
    /* ===== HEADER Y TOPBAR ===== */
    --topbar-bg: #f8f9fa;
    --topbar-text: var(--theme-text-color);
    --topbar-border: var(--theme-border-color);
    
    --header-bg: var(--theme-bg-color);
    --header-text: var(--theme-text-color);
    --header-border: var(--theme-border-color);
    
    /* ===== MODO OSCURO ===== */
    --topbar-dark-bg: #343a40;
    --topbar-dark-text: #ffffff;
    --topbar-dark-border: #495057;
    
    --header-dark-bg: #212529;
    --header-dark-text: #ffffff;
    --header-dark-border: #495057;
}

/* ===== APLICACIÓN DE COLORES ===== */

/* Fondo general */
body {
    background-color: var(--theme-bg-color);
    color: var(--theme-text-color);
}

/* Enlaces */
a {
    color: var(--theme-link-color);
}

a:hover {
    color: var(--theme-link-hover);
    filter: brightness(0.9);
}

/* Botones principales */
button,
.btn,
input[type="submit"],
input[type="button"] {
    background-color: var(--theme-button-color);
    color: var(--theme-button-text);
    border-color: var(--theme-button-color);
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--theme-button-hover);
    border-color: var(--theme-button-hover);
    filter: brightness(0.9);
}

/* Elementos primarios */
.primary-color,
.text-primary {
    color: var(--theme-primary-color);
}

.bg-primary {
    background-color: var(--theme-primary-color);
    color: var(--theme-button-text);
}

/* Elementos secundarios */
.secondary-color,
.text-secondary {
    color: var(--theme-secondary-color);
}

.bg-secondary {
    background-color: var(--theme-secondary-color);
    color: var(--theme-button-text);
}

/* Bordes */
.border {
    border-color: var(--theme-border-color);
}

.border-light {
    border-color: var(--theme-border-light);
}

/* Cards y contenedores */
.card,
.widget,
.content-box {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border-color);
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-color), 0.25);
}

/* Menús */
.menu a {
    color: var(--theme-text-color);
}

.menu a:hover {
    color: var(--theme-primary-color);
}

/* Estados */
.text-success { color: var(--theme-success); }
.text-warning { color: var(--theme-warning); }
.text-danger { color: var(--theme-danger); }
.text-info { color: var(--theme-info); }

.bg-success { background-color: var(--theme-success); }
.bg-warning { background-color: var(--theme-warning); }
.bg-danger { background-color: var(--theme-danger); }
.bg-info { background-color: var(--theme-info); }

/* Modo oscuro automático */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-border-color: rgba(255, 255, 255, 0.125);
        --theme-border-light: rgba(255, 255, 255, 0.0625);
        --theme-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
        --theme-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    }
}