:root {
    --primary-color: #A52A2A;
    --secondary-color: #00FFFF;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #ffffff;
    --dark-color: #343a40;

    /* Color variations for better styling */
    --primary-10: #A52A2A1a;  /* 10% opacity */
    --primary-20: #A52A2A33;  /* 20% opacity */
    --primary-50: #A52A2A80;  /* 50% opacity */
    --secondary-10: #00FFFF1a; /* 10% opacity */

    /* Gradients using primary and secondary colors */
    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    /* Layout colors */
    --dark-bg: #1a1a2e;
    --darker-bg: #16213e;
    --text-light: #ffffff;
    --text-muted: #b8b8d1;
    --card-bg: rgba(255, 255, 255, 0.95);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Apply primary gradient to body background */
body {
    background: var(--primary-gradient);
}

/* Example usage */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-light { color: var(--light-color) !important; }
.text-dark { color: var(--dark-color) !important; }

.hero { background: var(--primary-gradient); }
.navbar-brand { color: var(--text-light); }
.footer-social .social-link { color: var(--text-muted); }
.footer-social .social-link:hover { color: var(--primary-color); }