/*
 * Shared design tokens for both the public site and the admin dashboard.
 * Built on top of Bootstrap 5.3's native `data-bs-theme` light/dark
 * mechanism — we only redefine the handful of custom tokens our own
 * components use; every Bootstrap component already reacts to
 * `data-bs-theme` on its own.
 */

:root {
    --brand-primary: #4f46e5;
    --brand-primary-dark: #4338ca;
    --brand-accent: #10b981;
    --brand-warning: #f59e0b;
    --brand-danger: #ef4444;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 79, 70, 229;

    --surface-bg: #f8fafc;
    --surface-card: #ffffff;
    --surface-border: #e5e9f2;
    --surface-muted: #64748b;
    --surface-heading: #0f172a;

    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
    --shadow-lift: 0 12px 32px -12px rgba(79, 70, 229, .28);
    --radius-lg: 1rem;
    --radius-md: .65rem;

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --surface-bg: #0b1120;
    --surface-card: #131c2e;
    --surface-border: #253046;
    --surface-muted: #94a3b8;
    --surface-heading: #f1f5f9;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

body {
    background-color: var(--surface-bg);
    color: var(--surface-heading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .fw-display {
    letter-spacing: -.02em;
    color: var(--surface-heading);
}

a {
    text-decoration: none;
}

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

.card,
.list-group-item {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
}

.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--surface-border);
}

.btn {
    border-radius: .6rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    border: none;
    box-shadow: var(--shadow-lift);
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
}

.btn-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.badge-soft {
    background-color: rgba(79, 70, 229, .1);
    color: var(--brand-primary);
    font-weight: 600;
    border-radius: 999px;
    padding: .35em .75em;
}

[data-bs-theme="dark"] .badge-soft {
    background-color: rgba(129, 140, 248, .18);
    color: #a5b4fc;
}

.form-control, .form-select {
    border-radius: .6rem;
    border-color: var(--surface-border);
    background-color: var(--surface-card);
    color: var(--surface-heading);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}

.skeleton {
    background: linear-gradient(90deg, var(--surface-border) 25%, rgba(148, 163, 184, .25) 37%, var(--surface-border) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.theme-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surface-border);
    background-color: var(--surface-card);
    color: var(--surface-heading);
}

.theme-toggle-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

[data-bs-theme="dark"] .theme-icon-sun { display: none; }
[data-bs-theme="light"] .theme-icon-moon,
:root:not([data-bs-theme="dark"]) .theme-icon-moon { display: none; }
[data-bs-theme="dark"] .theme-icon-moon { display: inline-block; }