/* ==========================================================================
   CSS Variables for Theme System (Light & Dark Mode)
   ========================================================================== */

:root {
    /* Light mode colors (default) */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    /* gray-50 */
    --color-bg-tertiary: #f3f4f6;
    /* gray-100 */

    --color-text-primary: #111827;
    /* gray-900 */
    --color-text-secondary: #4b5563;
    /* gray-600 */
    --color-text-tertiary: #6b7280;
    /* gray-500 */
    --color-text-muted: #6b7280;
    /* gray-500 — raised from gray-400 (#9ca3af) for WCAG AA: 4.6:1 on white */

    --color-border-default: #e5e7eb;
    /* gray-200 */
    --color-border-light: #f3f4f6;
    /* gray-100 */

    --color-accent: #ec4899;
    /* pink-500 */
    --color-accent-hover: #db2777;
    /* pink-600 */
    --color-accent-light: #fdf2f8;
    /* pink-50 */
    --color-accent-border: #f9a8d4;
    /* pink-300 */

    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-md: rgba(0, 0, 0, 0.15);
    --color-shadow-lg: rgba(0, 0, 0, 0.2);
    /* Text on accent-colored backgrounds (e.g. buttons) — dark on pink-500 gives ~5.9:1 (WCAG AA) */
    --color-accent-text: #1a0010;
    /* Header-specific tokens — default to page-level values; overridden per-palette when needed */
    --color-header-bg: var(--color-bg-primary);
    --color-header-border: var(--color-border-default);
    --color-header-text: var(--color-text-primary);
    --color-header-text-secondary: var(--color-text-secondary);
    /* Toggle track/ball — default to page values; overridden when header has a distinct bg */
    --color-toggle-track: var(--color-border-default);
    --color-toggle-ball: var(--color-bg-primary);
    /* Footer-specific tokens — default to page-level values; overridden per-palette when needed */
    --color-footer-bg: var(--color-bg-secondary);
    --color-footer-border: var(--color-border-default);
    --color-footer-text: var(--color-text-tertiary);
    --color-footer-text-hover: var(--color-text-primary);
    /* Typography */
    --font-heading: system-ui, -apple-system, sans-serif;
    --font-body: system-ui, -apple-system, sans-serif;
}

/* Dark mode colors */
[data-theme='dark'] {
    --color-bg-primary: #1a1a1a;
    /* Soft dark background */
    --color-bg-secondary: #2d2d2d;
    /* Slightly lighter for cards/sections */
    --color-bg-tertiary: #3a3a3a;
    /* Even lighter for hover states */

    --color-text-primary: #f3f4f6;
    /* Very light gray for main text */
    --color-text-secondary: #d1d5db;
    /* gray-300 for secondary text */
    --color-text-tertiary: #b0b7c3;
    /* gray-400→ lightened to #b0b7c3 for WCAG AA on all dark bgs: 5.67:1 on bg-tertiary */
    --color-text-muted: #9ca3af;
    /* gray-400 — raised from gray-500 (#6b7280) for WCAG AA: 4.51:1 on bg-tertiary */

    --color-border-default: #374151;
    /* gray-700 for borders */
    --color-border-light: #4b5563;
    /* gray-600 for lighter borders */

    --color-accent: #f472b6;
    /* pink-400 - brighter for dark mode */
    --color-accent-hover: #f9a8d4;
    /* pink-300 - even brighter on hover */
    --color-accent-light: #4a1d3a;
    /* Dark pink background for highlights */
    --color-accent-border: #db2777;
    /* pink-600 for borders */

    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-shadow-md: rgba(0, 0, 0, 0.5);
    --color-shadow-lg: rgba(0, 0, 0, 0.6);
    /* Dark text on pink-400 gives ~7.4:1 (WCAG AA+) */
    --color-accent-text: #1a0010;
}

/* Smooth theme transitions */
:root,
[data-theme='dark'] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply theme transitions only to theme-related properties on common elements */
/* Scoped to specific selectors to avoid performance issues with universal (*) selector */
html,
body,
header,
footer,
main,
section,
article,
nav,
aside,
.bg-dynamic-primary,
.bg-dynamic-secondary,
.bg-dynamic-tertiary,
.text-dynamic-primary,
.text-dynamic-secondary,
.text-dynamic-tertiary,
.border-dynamic {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent transitions on page load */
.no-transition * {
    transition: none !important;
}

/* ==========================================================================
   Base Styling: Apply theme colors to html and body
   ========================================================================== */

html {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

/* ==========================================================================
   Form Validation & Blazor Error Handling
   ========================================================================== */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Signature Gold Palette — Default production brand theme
   ========================================================================== */

/* Signature Gold (light) — brand-faithful champagne gold, luxury warmth */
/* Accent #8A6812: 5.25:1 on #fff (WCAG AA all text); 5.0:1 on bg-tertiary (WCAG AA) */
html[data-palette='signaturegold'] {
    --color-accent: #8A6812;
    --color-accent-hover: #72550E;
    --color-accent-light: #fef8e6;
    --color-accent-border: #C5A040;
    /* #C5A040 = brand-decorative gold (logo reference); not used for text */
    --color-accent-text: #ffffff;
    /* white on #8A6812 = 5.25:1 (WCAG AA) */
    --color-bg-secondary: #faf8f0;
    --color-bg-tertiary: #f3eedc;
    /* WCAG AA: gray-600 (#4b5563) needed on #f3eedc — gray-500 gives only 4.09:1 */
    --color-text-tertiary: #4b5563;
    --color-text-muted: #4b5563;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    /* Dark header in light mode: logo gradient (#C5A040–#8A6812) designed for warm/dark bg */
    /* #F5F0E8 on #1C1814 = 14.2:1 ✅ AAA | #C5A040 on #1C1814 = 8.7:1 ✅ AAA */
    --color-header-bg: #1C1814;
    --color-header-border: #2E2620;
    --color-header-text: #F5F0E8;
    --color-header-text-secondary: #C5A040;
    /* Toggle: gold track + dark ball — visually coherent with dark header */
    /* #C5A040 on #1C1814 = 8.7:1 ✅ AAA | #1C1814 on #C5A040 = 8.7:1 ✅ AAA */
    --color-toggle-track: #C5A040;
    --color-toggle-ball: #1C1814;
    /* Footer: match dark header for visual bookend symmetry */
    /* #C5A040 on #1C1814 = 8.7:1 ✅ AAA | #F5F0E8 on #1C1814 = 14.2:1 ✅ AAA */
    --color-footer-bg: #1C1814;
    --color-footer-border: #2E2620;
    --color-footer-text: #C5A040;
    --color-footer-text-hover: #F5F0E8;
}

/* Signature Gold (dark) — near-black warm canvas, brilliant gold accent */
/* Accent #D4B050: 9.8:1 on #0f0e0a (WCAG AAA) */
html[data-theme='dark'][data-palette='signaturegold'] {
    --color-accent: #D4B050;
    --color-accent-hover: #E8CA76;
    --color-accent-light: #2a2200;
    --color-accent-border: #9A7820;
    --color-accent-text: #0f0e0a;
    /* near-black on #D4B050 = 9.8:1 (WCAG AAA) */
    --color-bg-primary: #0f0e0a;
    --color-bg-secondary: #1c1a0e;
    --color-bg-tertiary: #282516;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    /* Reset header to flush with dark page bg */
    --color-header-bg: var(--color-bg-primary);
    --color-header-border: var(--color-border-default);
    --color-header-text: var(--color-text-primary);
    --color-header-text-secondary: var(--color-text-secondary);
    /* Reset toggle to page defaults */
    --color-toggle-track: var(--color-border-default);
    --color-toggle-ball: var(--color-bg-primary);
    /* Footer: use text-secondary for legibility on near-black bg (#d1d5db on #1c1a0e ≈ 10:1 ✅ AAA) */
    --color-footer-bg: var(--color-bg-secondary);
    --color-footer-border: var(--color-border-default);
    --color-footer-text: var(--color-text-secondary);
    --color-footer-text-hover: var(--color-text-primary);
}

html[data-palette='signaturegold'] .rounded,
html[data-palette='signaturegold'] .rounded-md,
html[data-palette='signaturegold'] .rounded-lg,
html[data-palette='signaturegold'] .rounded-xl,
html[data-palette='signaturegold'] .rounded-2xl {
    border-radius: 2px;
}