/**
 * Error Page Styles - Shared across all BCSS applications
 *
 * Brand colors are provided entirely by the product theme CSS (loaded by the
 * including template via variables.css + product-theme.css). No color parameters
 * are hardcoded here — the error page reads CSS custom properties directly.
 * Dark mode is supported via [data-bs-theme="dark"] selector (PERF-023 convention).
 *
 * PERF-09h-10: Extracted from shared-error.html inline <style> block for better
 * caching and reduced CSP nonce usage.
 */

:root {
    /* DES-T08: Error page scoped tokens — colors come from product theme CSS */
    --brand-primary: var(--primary-color);
    --brand-primary-hover: var(--primary-hover);
    --error-bg: var(--gray-100);
    --error-card-bg: var(--white);
    --error-text: var(--gray-700);
    --error-muted: var(--gray-700);
}

body {
    align-items: center;
    background-color: var(--error-bg);
    display: flex;
    font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    justify-content: center;
    min-height: 100vh;
}

.error-container {
    max-width: 600px;
    padding: var(--spacing-xl, 2rem);
    text-align: center;
}

.error-card {
    background: var(--error-card-bg);
    border-radius: var(--border-radius-xl, 1rem);
    box-shadow: var(--shadow);
    padding: var(--spacing-2xl, 3rem);
}

.error-code {
    color: var(--brand-primary);
    font-size: 6rem; /* Intentional decorative size — exceeds --font-size-5xl (4rem) scale */
    font-weight: var(--font-weight-light);
    line-height: 1;
    margin-bottom: var(--spacing-md, 1rem);
}

.error-title {
    color: var(--error-text);
    font-size: var(--font-size-2xl); /* DSC-10-15: font-size token */
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md, 1rem);
}

.error-message {
    color: var(--error-muted);
    margin-bottom: var(--spacing-xl, 2rem);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1rem);
    justify-content: center;
}

/* DSC-10-06: Scoped to .error-container to avoid bleeding into other component scopes */
/* DSC-10-05: Use --btn-primary-bg (WCAG AA compliant) instead of --brand-primary */
.error-container .btn-primary {
    background-color: var(--btn-primary-bg, var(--brand-primary));
    border-color: var(--btn-primary-bg, var(--brand-primary));
    color: var(--white);
}

.error-container .btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--white);
}

.brand-logo {
    margin-bottom: var(--spacing-xl, 2rem);
}

.brand-name {
    color: var(--brand-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium, 500);
}

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

.btn-outline-secondary:hover {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    color: var(--white);
}

.btn {
    align-items: center;
    border-radius: var(--border-radius, 0.5rem);
    display: inline-flex;
    font-weight: var(--font-weight-medium, 500);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
    text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
    .btn { transition: var(--transition-fast); }
}

/* DES-DM01/DES-J01: Dark mode via [data-bs-theme="dark"] only (PERF-023 convention) */
/* FOUC prevention script sets data-bs-theme before paint, including prefers-color-scheme detection */
/* VIS-B23: Font Awesome icons use CSS ::before content which cannot be styled via dark mode color overrides. Icons inherit color from their parent element. */
[data-bs-theme="dark"] {
    --error-bg: var(--bg-primary);
    --error-card-bg: var(--bg-surface);
    --error-text: var(--bcss-text);
    --error-muted: var(--bcss-text-muted);
    --error-border: var(--bcss-border);
    --error-hover-bg: var(--bcss-hover-bg);
    --error-pre-bg: var(--bcss-surface);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--error-border);
    color: var(--error-muted);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--error-hover-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

[data-bs-theme="dark"] details pre {
    background-color: var(--error-pre-bg) !important;
    color: var(--error-text);
}