/* Shared application chrome. Loaded after the selected theme so every page uses its palette. */
:root {
    --app-bg: #020412;
    --app-surface: rgba(9, 14, 31, .88);
    --app-surface-muted: rgba(9, 14, 31, .65);
    --app-text: #e6f1ff;
    --app-muted: #a7b3cc;
    --app-accent: #00ffc2;
    --app-accent-strong: #7b2bff;
    --app-border: rgba(0, 255, 194, .24);
}
[data-theme="welcome"] { --app-bg:#121212; --app-surface:#1e293b; --app-surface-muted:rgba(30,41,59,.78); --app-text:#e2e8f0; --app-muted:#cbd5e1; --app-accent:#4ade80; --app-accent-strong:#10b981; --app-border:rgba(255,255,255,.14); }
[data-theme="rocket"] { --app-bg:#0b0b12; --app-surface:rgba(20,20,30,.88); --app-surface-muted:rgba(255,255,255,.06); --app-text:#f7f8fa; --app-muted:#cfd4e0; --app-accent:#ff3c00; --app-accent-strong:#ff8a00; --app-border:rgba(255,255,255,.12); }
[data-theme="cyberpunk"] { --app-bg:#0a0a1a; --app-surface:rgba(15,15,35,.88); --app-surface-muted:rgba(15,15,35,.68); --app-text:#e0e0ff; --app-muted:#b7b7db; --app-accent:#00f6ff; --app-accent-strong:#ff00c1; --app-border:rgba(0,246,255,.24); }
[data-theme="dragon"] { --app-bg:#100505; --app-surface:rgba(30,10,10,.9); --app-surface-muted:rgba(30,10,10,.7); --app-text:#f0e0d0; --app-muted:#d3bba9; --app-accent:#e6b800; --app-accent-strong:#ff6600; --app-border:rgba(255,69,0,.4); }
[data-theme="phoenix"] { --app-bg:#0a0a0a; --app-surface:rgba(30,15,5,.9); --app-surface-muted:rgba(30,15,5,.7); --app-text:#fff; --app-muted:#d2c4bb; --app-accent:#ffd700; --app-accent-strong:#ff6b35; --app-border:rgba(255,215,0,.22); }
[data-theme="nebula"] { --app-bg:#03030a; --app-surface:rgba(10,6,30,.9); --app-surface-muted:rgba(10,6,30,.7); --app-text:#f0f0ff; --app-muted:#c0c0dd; --app-accent:#8b5cf6; --app-accent-strong:#3b82f6; --app-border:rgba(139,92,246,.26); }
[data-theme="aurora"] { --app-bg:#f8f9fb; --app-surface:rgba(255,255,255,.94); --app-surface-muted:rgba(255,255,255,.78); --app-text:#1a1a2e; --app-muted:#596273; --app-accent:#0ea5e9; --app-accent-strong:#6366f1; --app-border:#dce5ed; }
[data-theme="obsidian"] { --app-bg:#060608; --app-surface:rgba(15,15,24,.92); --app-surface-muted:rgba(15,15,24,.74); --app-text:#f0ebe5; --app-muted:#c5bcaf; --app-accent:#e6b84d; --app-accent-strong:#f2d78a; --app-border:rgba(230,184,77,.24); }

.theme-shell { display:block; min-height:100vh; background:var(--app-bg); color:var(--app-text); text-align:right; }
.theme-panel, .theme-auth-card { background:var(--app-surface); color:var(--app-text); border:1px solid var(--app-border); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.theme-auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background:var(--app-bg); }
.theme-auth-card { width:min(100%, 30rem); border-radius:1.25rem; padding:2rem; }
.theme-auth-brand { color:var(--app-accent); font-size:1.7rem; font-weight:800; text-align:center; margin-bottom:.5rem; }
.theme-auth-title { color:var(--app-text); font-weight:800; text-align:center; margin-bottom:1.5rem; }
.theme-auth-card input { width:100%; border:1px solid var(--app-border); border-radius:.6rem; padding:.75rem 1rem; background:var(--app-surface-muted); color:var(--app-text); }
.theme-auth-card input::placeholder { color:var(--app-muted); }
.theme-auth-card a { color:var(--app-accent); }
.theme-button { display:inline-flex; justify-content:center; align-items:center; border:1px solid var(--app-accent); border-radius:.6rem; padding:.7rem 1rem; background:var(--app-accent); color:var(--app-bg); font-weight:700; transition:.2s; }
.theme-button:hover { background:transparent; color:var(--app-accent); }
.theme-shell .bg-gray-100, .theme-shell .bg-white, .theme-shell .dark\:bg-gray-800, .theme-shell .dark\:bg-gray-900 { background-color:var(--app-surface) !important; }
.theme-shell .text-gray-900, .theme-shell .text-gray-800, .theme-shell .dark\:text-white, .theme-shell .dark\:text-gray-200 { color:var(--app-text) !important; }
.theme-shell .text-gray-500, .theme-shell .text-gray-400, .theme-shell .dark\:text-gray-400 { color:var(--app-muted) !important; }
.theme-shell .border-gray-100, .theme-shell .border-gray-200, .theme-shell .dark\:border-gray-700 { border-color:var(--app-border) !important; }
.theme-shell .bg-indigo-600, .theme-shell .bg-blue-500 { background-color:var(--app-accent) !important; color:var(--app-bg) !important; }
.theme-shell .text-indigo-600, .theme-shell .text-indigo-500, .theme-shell .dark\:text-indigo-400 { color:var(--app-accent) !important; }

/*
 * Extended remaps.
 * The dashboard and other customer pages still contain sections built with
 * plain gray Tailwind utilities (cards like `bg-gray-50 dark:bg-gray-800/50`).
 * Without these remaps such sections stay light-gray ("gray squares") while
 * the text inside them is forced to the light theme text color, making it
 * unreadable on dark themes. Map every remaining gray utility onto the active
 * theme palette so text is always readable.
 */

/* Solid gray surfaces -> theme surface */
.theme-shell .bg-gray-50,
.theme-shell .bg-gray-800,
.theme-shell .bg-gray-900,
.theme-shell .bg-white\/70,
.theme-shell .dark\:bg-gray-900\/70 { background-color:var(--app-surface) !important; }

/* Muted gray surfaces (nested boxes, tab tracks, buttons) -> muted surface */
.theme-shell .bg-gray-200,
.theme-shell .bg-gray-300,
.theme-shell .dark\:bg-gray-700,
.theme-shell .dark\:bg-gray-800\/50,
.theme-shell .dark\:bg-gray-900\/50,
.theme-shell .dark\:bg-gray-700\/50 { background-color:var(--app-surface-muted) !important; }

/* Hover/focus surface states */
.theme-shell .hover\:bg-gray-50:hover,
.theme-shell .hover\:bg-gray-100:hover,
.theme-shell .hover\:bg-gray-300:hover,
.theme-shell .hover\:bg-gray-400:hover,
.theme-shell .focus\:bg-gray-50:focus,
.theme-shell .focus\:bg-gray-100:focus,
.theme-shell .dark\:hover\:bg-gray-600:hover,
.theme-shell .dark\:hover\:bg-gray-700:hover,
.theme-shell .dark\:hover\:bg-gray-800:hover,
.theme-shell .dark\:hover\:bg-gray-900:hover,
.theme-shell .dark\:focus\:bg-gray-700:focus,
.theme-shell .dark\:focus\:bg-gray-800:focus,
.theme-shell .dark\:focus\:bg-gray-900:focus { background-color:var(--app-surface-muted) !important; }

/* Body copy that would otherwise be dark gray on a dark surface */
.theme-shell .text-gray-600,
.theme-shell .text-gray-700,
.theme-shell .text-gray-300,
.theme-shell .dark\:text-gray-300,
.theme-shell .dark\:text-gray-100,
.theme-shell .hover\:text-gray-900:hover,
.theme-shell .hover\:text-gray-800:hover,
.theme-shell .hover\:text-gray-700:hover,
.theme-shell .dark\:hover\:text-gray-100:hover,
.theme-shell .dark\:hover\:text-gray-200:hover,
.theme-shell .dark\:hover\:text-gray-300:hover,
.theme-shell .focus\:text-gray-800:focus,
.theme-shell .focus\:text-gray-700:focus,
.theme-shell .dark\:focus\:text-gray-200:focus,
.theme-shell .dark\:focus\:text-gray-300:focus { color:var(--app-text) !important; }

/* Secondary text */
.theme-shell .dark\:text-gray-500,
.theme-shell .hover\:text-gray-500:hover,
.theme-shell .focus\:text-gray-500:focus,
.theme-shell .dark\:hover\:text-gray-400:hover,
.theme-shell .dark\:hover\:text-gray-500:hover,
.theme-shell .dark\:focus\:text-gray-400:focus { color:var(--app-muted) !important; }

/* Borders */
.theme-shell .border-gray-300,
.theme-shell .border-gray-500,
.theme-shell .dark\:border-gray-600,
.theme-shell .dark\:border-gray-700,
.theme-shell .hover\:border-gray-300:hover,
.theme-shell .focus\:border-gray-300:focus,
.theme-shell .dark\:hover\:border-gray-500:hover,
.theme-shell .dark\:hover\:border-gray-600:hover,
.theme-shell .dark\:hover\:border-gray-700:hover,
.theme-shell .dark\:focus\:border-gray-600:focus,
.theme-shell .dark\:focus\:border-gray-700:focus { border-color:var(--app-border) !important; }

/* Light pastel gradients (e.g. the plan price box) -> themed surface colors */
.theme-shell .from-blue-50,
.theme-shell .dark\:from-gray-700 {
    --tw-gradient-from:var(--app-surface-muted) var(--tw-gradient-from-position, 0%) !important;
    --tw-gradient-to:var(--app-surface-muted) var(--tw-gradient-to-position, 100%) !important;
}
.theme-shell .to-indigo-50,
.theme-shell .dark\:to-gray-800 {
    --tw-gradient-to:var(--app-surface-muted) var(--tw-gradient-to-position, 100%) !important;
}

/* Gradient text (e.g. the plan price number): make it theme text -> accent */
.theme-shell .from-gray-900,
.theme-shell .dark\:from-white {
    --tw-gradient-from:var(--app-text) var(--tw-gradient-from-position, 0%) !important;
    --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position, 100%) !important;
}
.theme-shell .to-blue-600,
.theme-shell .dark\:to-blue-400 {
    --tw-gradient-to:var(--app-accent) var(--tw-gradient-to-position, 100%) !important;
}