/* CSS Color Variables */
:root {
    --color-primary: #334155;
    --color-primary-black: #2f4058;
    --color-accent: #6B9080;
    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;
    --color-success: #4F7C5A;
    --color-warning: #B88A44;
    --color-error: #B85C5C;
}

/* Base Styles */
* {
    color: var(--color-text);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--color-background);
    color: var(--color-text);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-weight: 600;
}

p {
    color: var(--color-text);
}

/* Links */
a {
    color: var(--color-accent);
    text-decoration: none;
}

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

/* Cards */
.card {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.card-body {
    color: var(--color-text);
}

.card-title {
    color: var(--color-primary);
}

.card-text {
    color: var(--color-text-secondary);
}

/* Buttons */
.btn {
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface);
}

.btn-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-outline-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-outline-primary:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface);
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-surface);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-success:hover {
    background-color: #3d6348;
    border-color: #3d6348;
}

.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-surface);
}

.btn-warning:hover {
    background-color: #9d7139;
    border-color: #9d7139;
}

.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
}

.btn-danger:hover {
    background-color: #a34a4a;
    border-color: #a34a4a;
}

/* Forms */
.form-control,
.form-select {
    border-color: var(--color-border);
    color: var(--color-text);
    background-color: var(--color-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(107, 144, 128, 0.25);
}

.form-label {
    color: var(--color-text);
    font-weight: 500;
}

/* Text Utilities */
.text-primary {
    color: var(--color-primary) !important;
}

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

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

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

.text-danger {
    color: var(--color-error) !important;
}

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

.text-white {
    color: var(--color-surface) !important;
}

.text-dark {
    color: var(--color-primary) !important;
}

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

/* Background Utilities */
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

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

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

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

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

.bg-danger {
    background-color: var(--color-error) !important;
}

/* Border Utilities */
.border {
    border-color: var(--color-border) !important;
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.35rem 0.65rem;
}

.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.badge-accent {
    background-color: var(--color-accent);
    color: var(--color-surface);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-surface);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-surface);
}

.badge-danger {
    background-color: var(--color-error);
    color: var(--color-surface);
}

/* Alerts */
.alert {
    border-radius: 0.375rem;
}

.alert-success {
    background-color: rgba(79, 124, 90, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-warning {
    background-color: rgba(184, 138, 68, 0.1);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-danger {
    background-color: rgba(184, 92, 92, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-info {
    background-color: rgba(107, 144, 128, 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Navbar (if used) */
nav {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

nav a {
    color: var(--color-surface);
}

nav a:hover {
    color: var(--color-accent);
}

/* Hover Effects */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Separator/Divider */
hr {
    border-color: var(--color-border);
}

/* Utility Classes */
.text-accent {
    color: var(--color-accent);
}

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

.bg-accent {
    background-color: var(--color-accent);
    color: var(--color-surface);
}

/* List Group */
.list-group-item {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}