/* Deblur — Dark/Light Theme Variables */

:root {
    --bg: #060608;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.07);
    --bg-elevated: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.15);
    --text: #f0f0f0;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.35);
    --accent: #8B5CF6;
    --accent-hover: #7C3AED;
    --accent-glow: rgba(139,92,246,0.25);
    --accent-soft: rgba(139,92,246,0.12);
    --pink: #F472B6;
    --cyan: #22D3EE;
    --green: #34D399;
    --green-soft: rgba(52,211,153,0.12);
    --orange: #FBBF24;
    --red: #F87171;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Surfaces with opacity (nav, filters, mobile menu) */
    --nav-bg: rgba(6,6,8,0.7);
    --nav-bg-solid: rgba(6,6,8,0.95);
    --filter-bg: rgba(6,6,8,0.8);
    --orb-opacity: 0.1;
    --backdrop-blur: blur(24px) saturate(1.4);
    --selection-bg: var(--accent);
    --selection-color: #fff;

    /* Form elements */
    --input-bg: var(--bg-elevated);
    --select-option-bg: #1a1a1a;

    /* Scrollbar */
    --scrollbar-thumb: rgba(255,255,255,0.08);
    --scrollbar-thumb-hover: rgba(255,255,255,0.15);

    /* Skeleton */
    --skeleton-bg: rgba(255,255,255,0.04);

    /* Search icon (encoded for dark bg) */
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpath stroke-linecap='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");

    /* Logo gradient text — always visible in both modes */
    --logo-color: #f0f0f0;

    /* Card shadows */
    --card-hover-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px var(--accent-glow);

    /* Category border */
    --accent-border: rgba(139,92,246,0.2);

    /* Ambient orb colors */
    --orb-accent: var(--accent);
    --orb-pink: var(--pink);
}

[data-theme="light"] {
    /* Tinted cream base — warm, not sterile */
    --bg: #faf9f7;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-elevated: #f3f2ef;
    --border: rgba(0,0,0,0.07);
    --border-hover: rgba(124,58,237,0.3);
    --text: #1a1a2e;
    --text-secondary: #555566;
    --text-muted: #8888a0;
    --accent: #7C3AED;
    --accent-hover: #6D28D9;
    --accent-glow: rgba(124,58,237,0.18);
    --accent-soft: rgba(124,58,237,0.07);
    --pink: #DB2777;
    --cyan: #0891B2;
    --green: #059669;
    --green-soft: rgba(5,150,105,0.07);
    --orange: #D97706;
    --red: #DC2626;

    /* Frosted nav */
    --nav-bg: rgba(255,255,255,0.75);
    --nav-bg-solid: rgba(255,255,255,0.96);
    --filter-bg: rgba(255,255,255,0.8);
    --orb-opacity: 0.08;
    --backdrop-blur: blur(20px) saturate(1.8);
    --selection-bg: var(--accent);
    --selection-color: #fff;

    --input-bg: #ffffff;
    --select-option-bg: #ffffff;

    --scrollbar-thumb: rgba(0,0,0,0.12);
    --scrollbar-thumb-hover: rgba(0,0,0,0.22);

    --skeleton-bg: rgba(0,0,0,0.05);

    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='rgba(0,0,0,0.3)' stroke-width='2'%3E%3Cpath stroke-linecap='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");

    --logo-color: #1a1a2e;

    --card-hover-shadow:
        0 8px 24px rgba(124,58,237,0.10),
        0 2px 8px rgba(0,0,0,0.06);

    --accent-border: rgba(124,58,237,0.25);

    --orb-accent: rgba(124,58,237,0.5);
    --orb-pink: rgba(219,39,119,0.35);
}

/* ═══════════════════════════════════════════
   LIGHT MODE — Component overrides
   ═══════════════════════════════════════════ */

/* Background: subtle gradient instead of flat color */
[data-theme="light"] body {
    background: linear-gradient(170deg, #faf9f7 0%, #f0eef8 50%, #faf9f7 100%);
}

/* Ambient orbs: keep them visible as soft purple/pink washes */
[data-theme="light"] .ambient .orb {
    opacity: 0.07;
    filter: blur(160px);
}
[data-theme="light"] body::before {
    background: rgba(124,58,237,0.06);
    opacity: 1;
}
[data-theme="light"] body::after {
    background: rgba(219,39,119,0.04);
    opacity: 1;
}

/* Nav: white frosted glass with a proper shadow */
[data-theme="light"] nav {
    border-bottom-color: rgba(0,0,0,0.04);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
}

/* Cards: white with colored shadows for depth */
[data-theme="light"] .consultant-card,
[data-theme="light"] .profile-header,
[data-theme="light"] .profile-section,
[data-theme="light"] .booking-widget,
[data-theme="light"] .form-card,
[data-theme="light"] .support-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .success-card,
[data-theme="light"] .content-card,
[data-theme="light"] .legal-card {
    background: #ffffff;
    border: 1px solid rgba(124,58,237,0.06);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(124,58,237,0.04),
        0 0 0 1px rgba(124,58,237,0.02);
    backdrop-filter: none;
}
[data-theme="light"] .consultant-card:hover,
[data-theme="light"] .legal-card:hover,
[data-theme="light"] .support-card:hover {
    border-color: rgba(124,58,237,0.2);
    box-shadow:
        0 8px 32px rgba(124,58,237,0.10),
        0 2px 8px rgba(0,0,0,0.05),
        0 0 0 1px rgba(124,58,237,0.08);
    transform: translateY(-4px);
}

/* Filter pills: white cards with tinted hover */
[data-theme="light"] .filter-pill {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    color: #555566;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
[data-theme="light"] .filter-pill:hover {
    border-color: rgba(124,58,237,0.35);
    color: var(--accent);
    background: rgba(124,58,237,0.03);
    box-shadow: 0 2px 8px rgba(124,58,237,0.08);
}
[data-theme="light"] .filter-pill.active {
    background: linear-gradient(135deg, #7C3AED, #9333EA);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(124,58,237,0.30);
}

/* Search input */
[data-theme="light"] .search-input {
    background-color: #ffffff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) inset;
}
[data-theme="light"] .search-input:focus {
    background-color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}

/* Form inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}

/* Duration options */
[data-theme="light"] .duration-option {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
[data-theme="light"] .duration-option.active {
    background: rgba(124,58,237,0.05);
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(124,58,237,0.15);
}

/* Tags: tinted pills */
[data-theme="light"] .card-tag,
[data-theme="light"] .tag {
    background: rgba(124,58,237,0.04);
    border-color: rgba(124,58,237,0.08);
    color: #555566;
}

/* Social links */
[data-theme="light"] .social-link {
    background: #ffffff;
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="light"] .social-link:hover {
    background: rgba(124,58,237,0.04);
    border-color: rgba(124,58,237,0.2);
    box-shadow: 0 2px 8px rgba(124,58,237,0.08);
}

/* Category badge: tinted with gradient */
[data-theme="light"] .card-category,
[data-theme="light"] .profile-category {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.15);
    color: #6D28D9;
}

/* Step dots */
[data-theme="light"] .step-dot {
    background: rgba(124,58,237,0.12);
}
[data-theme="light"] .step-dot.active {
    background: var(--accent);
}
[data-theme="light"] .step-dot.done {
    background: var(--green);
}

/* File drop area */
[data-theme="light"] .file-drop {
    border-color: rgba(124,58,237,0.15);
    background: rgba(124,58,237,0.02);
}
[data-theme="light"] .file-drop:hover,
[data-theme="light"] .file-drop.dragover {
    background: rgba(124,58,237,0.05);
    border-color: var(--accent);
}

/* CTA / primary buttons: gradient with glow */
[data-theme="light"] .nav-cta {
    background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
    box-shadow: 0 2px 14px rgba(124,58,237,0.35) !important;
}
[data-theme="light"] .btn-book,
[data-theme="light"] .btn-primary,
[data-theme="light"] .success-link {
    background: linear-gradient(135deg, #7C3AED, #9333EA);
    box-shadow: 0 2px 14px rgba(124,58,237,0.35);
}

/* Sticky filter bar */
[data-theme="light"] .filters {
    border-bottom-color: rgba(0,0,0,0.03);
    box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.02);
}

/* Index/legal hub: pill bar */
[data-theme="light"] .top-nav,
[data-theme="light"] .res-shell-nav {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
}

/* Sidebar: no shadow */
[data-theme="light"] .doc-sidebar,
[data-theme="light"] .res-shell-sidebar {
    box-shadow: none;
    background: transparent;
    border: none;
}
[data-theme="light"] .sidebar-links a,
[data-theme="light"] .res-sb-links a {
    border-left-color: rgba(124,58,237,0.08);
}

/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .footer {
    border-top-color: rgba(0,0,0,0.05);
}

/* Card bottoms / dividers */
[data-theme="light"] .card-bottom {
    border-top-color: rgba(0,0,0,0.05);
}

/* FAQ items */
[data-theme="light"] .faq-question:hover {
    background: rgba(124,58,237,0.03);
}

/* Booking widget sticky */
[data-theme="light"] .booking-widget {
    box-shadow:
        0 2px 8px rgba(0,0,0,0.04),
        0 8px 32px rgba(124,58,237,0.06);
}

/* Page headers — add subtle accent */
[data-theme="light"] .page-header h1 {
    color: #1a1a2e;
}

/* Card rate pricing text */
[data-theme="light"] .card-rate {
    color: #1a1a2e;
}
[data-theme="light"] .widget-price {
    color: #1a1a2e;
}

/* Smooth transition when toggling (added by JS after first paint) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Logo: ensure gradient text works in all browsers */
.logo span {
    background: linear-gradient(135deg, var(--accent), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Brighter gradient for light mode so it pops */
[data-theme="light"] .logo span {
    background: linear-gradient(135deg, #7C3AED, #C026D3);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
}
/* Show moon in dark mode, sun in light mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }