/* 
 * Theme Color System Base
 * 
 * This file contains the base CSS rules that use theme color variables
 * These rules will be overridden by the dynamic CSS generated by the customizer
 *
 * @package TattooEdu
 * @version 1.0.0
 */

/* Default color variables (fallbacks) */
:root {
    /* Main theme colors */
    --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;
    
    /* Derived colors */
    --theme-primary-hover: #005a87;
    --theme-button-hover: #005a87;
    --theme-link-hover: #005a87;
    
    --theme-primary-light: #3399d4;
    --theme-secondary-light: #8e9aaf;
    
    --theme-primary-dark: #004568;
    --theme-secondary-dark: #495057;
    
    --theme-button-text: #ffffff;
    
    /* Background variations */
    --theme-content-bg: #ffffff;
    --theme-section-bg: #ffffff;
    --theme-card-bg: #ffffff;
}

/* Apply color variables to theme elements */

/* Body and layout */
body {
    background-color: var(--theme-bg-color);
    color: var(--theme-text-color);
}

.site-content {
    background-color: var(--theme-content-bg);
}

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

a:hover,
a:focus {
    color: var(--theme-link-hover);
}

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

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

/* Secondary buttons */
.btn-secondary {
    background-color: var(--theme-secondary-color);
    border-color: var(--theme-secondary-color);
    color: var(--theme-button-text);
}

.btn-secondary:hover {
    background-color: var(--theme-secondary-dark);
    border-color: var(--theme-secondary-dark);
}

/* Navigation */
.navbar {
    background-color: var(--theme-primary-color);
}

.navbar-brand {
    color: var(--theme-button-text) !important;
}

.navbar-nav .nav-link {
    color: var(--theme-button-text);
}

.navbar-nav .nav-link:hover {
    color: var(--theme-primary-light);
}

/* Topbar */
.topbar {
    background-color: var(--theme-button-text);
    color: var(--theme-primary-color); 
    font-size: 12px !important;
}

.topbar a {
    color: var(--theme-button-text);
}

.topbar a:hover {
    color: var(--theme-secondary-light);
}

/* Cards and sections */
.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-primary-light);
}

.section {
    background-color: var(--theme-section-bg);
}

/* Header elements */
.site-header {
    background-color: var(--theme-primary-color);
}

.site-title {
    color: var(--theme-button-text);
}

.site-title a {
    color: var(--theme-button-text);
}

.site-title a:hover {
    color: var(--theme-primary-light);
}

/* Footer */
.site-footer {
    background-color: var(--theme-primary-dark);
    color: var(--theme-button-text);
}

.site-footer a {
    color: var(--theme-primary-light);
}

.site-footer a:hover {
    color: var(--theme-button-text);
}

/* Forms */
.form-control {
    border-color: var(--theme-secondary-color);
}

.form-control:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
}

/* Tables */
.table-primary {
    background-color: var(--theme-primary-light);
}

.table-secondary {
    background-color: var(--theme-secondary-light);
}

/* Alerts */
.alert-primary {
    background-color: var(--theme-primary-light);
    border-color: var(--theme-primary-color);
    color: var(--theme-primary-dark);
}

.alert-secondary {
    background-color: var(--theme-secondary-light);
    border-color: var(--theme-secondary-color);
    color: var(--theme-secondary-dark);
}

/* Custom classes for theme colors */
.text-theme-primary {
    color: var(--theme-primary-color) !important;
}

.text-theme-secondary {
    color: var(--theme-secondary-color) !important;
}

.bg-theme-primary {
    background-color: var(--theme-primary-color) !important;
}

.bg-theme-secondary {
    background-color: var(--theme-secondary-color) !important;
}

.border-theme-primary {
    border-color: var(--theme-primary-color) !important;
}

.border-theme-secondary {
    border-color: var(--theme-secondary-color) !important;
}