/* PostEasy Design Tokens
 * Single source of truth for colors, spacing, radii, and focus styles.
 * Loaded before page-specific CSS via base.html.
 */

:root {
    /* Brand */
    --pe-primary: #5865F2;
    --pe-primary-rgb: 88, 101, 242;
    --pe-secondary: #2e3033;
    --pe-accent: #7289da;

    /* Surfaces */
    --pe-bg: #ffffff;
    --pe-card-bg: #ffffff;
    --pe-bg-subtle: #f8fafc;

    /* Text */
    --pe-text: #0f172a;
    --pe-text-muted: #64748b;   /* WCAG AA on white */
    --pe-text-light: #94a3b8;   /* decorative only — not for readable text */

    /* Borders */
    --pe-border: #e5e7eb;
    --pe-border-light: #f3f4f6;

    /* Semantic status — use these instead of hardcoding hex values */
    --pe-success: #059669;
    --pe-danger: #dc2626;
    --pe-warning: #d97706;
    --pe-info: #2563eb;

    /* Subtle status backgrounds — for pills, badges, tinted rows */
    --pe-success-bg: #ecfdf5;
    --pe-danger-bg: #fef2f2;
    --pe-warning-bg: #fffbeb;
    --pe-info-bg: #eff6ff;

    /* Shadows */
    --pe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --pe-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --pe-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);

    /* Radii */
    --pe-card-radius: 12px;
    --pe-btn-radius: 8px;
    --pe-input-radius: 8px;

    /* Transitions */
    --pe-transition: 0.3s;

    /* Focus */
    --pe-focus-ring: 0 0 0 3px rgba(var(--pe-primary-rgb), 0.35);
}

/* ----------------------------------------------------------------
   Dark theme overrides
   ---------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --pe-primary: #7983f5;
    --pe-primary-rgb: 121, 131, 245;
    --pe-secondary: #c8cad0;
    --pe-accent: #8fa3e8;

    --pe-bg: #0f172a;
    --pe-card-bg: #1e293b;
    --pe-bg-subtle: #1e293b;

    --pe-text: #e2e8f0;
    --pe-text-muted: #94a3b8;
    --pe-text-light: #64748b;

    --pe-border: #334155;
    --pe-border-light: #1e293b;

    --pe-success-bg: rgba(5, 150, 105, 0.15);
    --pe-danger-bg: rgba(220, 38, 38, 0.15);
    --pe-warning-bg: rgba(217, 119, 6, 0.15);
    --pe-info-bg: rgba(37, 99, 235, 0.15);

    --pe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --pe-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --pe-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* Page title utility */
.pe-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pe-text);
    margin-bottom: 0.5rem;
}

/* Fade-in animation (replaces Animate.css dependency) */
.pe-fade-in {
    animation: peFadeIn 0.4s ease;
}

@keyframes peFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Interactive card — opt-in hover lift */
.card-interactive {
    transition: transform var(--pe-transition) ease, box-shadow var(--pe-transition) ease;
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--pe-shadow-lg);
}

/* Global focus-visible indicators (#17) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.nav-pills .nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--pe-focus-ring);
}