/* Ascend, dark appearance. Layout and behavior are shared with the light mode. */
:root {
  color-scheme: dark;
  --paper: #0b1326;
  --surface: #17243d;
  --ink: #fff;
  --text: #ffffff99;
  --muted-text: #ffffff99;
  --forest: #91adff;
  --emerald: #9bb5ff;
  --sage: #21345a;
  --line: #2c3d5e;
  --soft: #111f38;
  --blue: #91adff;
  --header: #17243d;
  --wash: linear-gradient(152deg, #edf2f805, #edf2f814);
  --hero-background: url("/assets/artwork/hero-background-dark.svg");
  --hero-asset: url("/assets/artwork/hero.webp");
  --about-asset: url("/assets/artwork/about.webp");
  --question-asset: url("/assets/artwork/question.webp");
  --background: 162 100% 4%;
  --foreground: 0 0% 100%;
  --card: 158 44% 10%;
  --card-foreground: 0 0% 100%;
  --popover: 158 44% 10%;
  --popover-foreground: 0 0% 100%;
  --primary: 153 49% 58%;
  --primary-foreground: 162 70% 8%;
  --secondary: 155 41% 13%;
  --secondary-foreground: 0 0% 100%;
  --muted: 155 41% 13%;
  --muted-foreground: 146 15% 72%;
  --accent: 155 41% 16%;
  --accent-foreground: 0 0% 100%;
  --border: 150 23% 21%;
  --input: 150 23% 27%;
  --ring: 153 49% 58%;
  --success: 151 59% 66%;
  --warning: 42 90% 71%;
  --destructive: 0 85% 73%;
  --status-success-foreground: 151 59% 70%;
  --status-warning-foreground: 42 90% 73%;
  --status-danger-foreground: 0 85% 78%;
  --status-info-foreground: 210 100% 79%;
  --fb-feedback-alert-bg: #17243d;
  --fb-feedback-alert-text: #fff;
  --fb-feedback-button-text: #0b1326;
}
.btn-primary,
.btn-primary:hover {
  color: #0b1326;
}
.btn-outline,
.btn-ghost {
  color: var(--forest);
  border-color: #91adff99;
}
.btn-outline:hover,
.btn-ghost:hover {
  background: #21345a;
  color: #fff;
}
.text-link:hover {
  color: #c4d0ff;
}
button:disabled {
  background: var(--sage);
  color: var(--text);
}
.asset-strip {
  background: linear-gradient(90deg, #142545, #1a2e51);
}
.asset-strip-inner > span,
.asset-strip-inner b {
  color: var(--text);
}
.package-card {
  background: linear-gradient(135deg, #17243d, #13213a);
}
.package-card:hover,
.package-card.featured {
  border-color: #91adff;
}
.benefit-tab {
  background: #101d35;
}
.benefit-tab:hover,
.benefit-tab.is-active {
  background: #1a2d50;
}
.art-stat,
.benefit-callout {
  background: #17243def;
}
.service-card {
  border-color: #2c3d5e;
  background: linear-gradient(135deg, #17243d, #192b49);
}
.service-card > img {
  background: #24395e;
}
.service-card:nth-child(1) > img {
  content: url("/assets/artwork/service-1.webp");
}
.service-card:nth-child(2) > img {
  content: url("/assets/artwork/service-2.webp");
}
.service-card:nth-child(3) > img {
  content: url("/assets/artwork/service-3.webp");
}
.service-card:nth-child(4) > img {
  content: url("/assets/artwork/service-4.webp");
}
.service-card:nth-child(5) > img {
  content: url("/assets/artwork/service-5.webp");
}
.service-card:nth-child(6) > img {
  content: url("/assets/artwork/service-6.webp");
}
.adviser-card {
  background: #1b2e50;
}
.adviser-card > div {
  background: #17243de8;
}
.faq-list details[open] summary {
  color: #91adff;
}
.auth-section,
.auth-grid,
.auth-panel {
  background: var(--paper);
}
.auth-copy {
  background: #101c33;
}
.btn-provider {
  background: var(--surface);
  color: var(--ink);
}
.btn-provider:hover {
  background: var(--sage);
}
.field input,
.field textarea,
.field select,
.input-wrap input,
.input-with-action input,
.country-picker-trigger,
.country-picker-menu,
.country-picker-search {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
input::placeholder,
textarea::placeholder {
  color: var(--text);
  opacity: 1;
}
.auth-divider::before,
.auth-divider::after {
  background: var(--line);
}
.auth-divider span {
  background: var(--paper);
}
.auth-panel a,
.auth-note a {
  color: #a9bdff;
}
.status {
  background: #193c2c;
  color: #8be3b9;
}
.status.pending,
.status.awaiting-payment,
.status.processing {
  background: #453c1e;
  color: #ffe29a;
}
.status.failed,
.status.cancelled,
.status.expired {
  background: #452821;
  color: #ffb6a9;
}
.status.successful,
.status.active,
.status.confirmed,
.status.matured {
  background: #174432;
  color: #98edc6;
}
.layout-app {
  background: var(--paper);
}
.app-sidebar,
.app-header,
.panel,
.card,
.settings-card,
.settings-panel,
.investment-modal {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.app-sidebar nav a:hover,
.app-sidebar nav button:hover {
  background: var(--sage);
}
.app-sidebar nav a[aria-current="page"] {
  background: #21345a;
  color: #bccbff;
}
.app-main .eyebrow,
.sidebar-note .text-link {
  color: #a9bdff;
}
.stat-card,
.metric-card,
.summary-card,
.settings-content,
.transaction-detail-card {
  background: var(--surface);
  border-color: var(--line);
}
.table thead,
thead,
th,
.settings-nav,
.settings-nav-item:hover,
.account-info-row {
  background: var(--soft);
  color: var(--text);
}
.settings-nav-item.is-active {
  background: var(--surface);
  color: var(--ink);
  border-color: #91adff;
}
.country-option:hover,
.country-option.is-selected {
  background: var(--sage);
  color: var(--ink);
}
.table-action,
.account-link,
.profile-link {
  color: #b7c8ff;
}
tbody tr:hover {
  background: #14233d;
}
.notice,
.email-verification-notice {
  background: #1c3052;
  color: #b7f2d6;
  border-color: #45629a;
}
.investment-modal-icon,
.profile-photo-fallback {
  background: var(--sage);
  color: #b2c4ff;
}
.investment-preview-card,
.investment-summary,
.investment-return-preview {
  background: var(--soft);
  color: var(--ink);
}
.investment-modal-error {
  color: #ffb6a9;
}
body .swal2-popup {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
body .swal2-title,
body .swal2-html-container {
  color: var(--ink) !important;
}
body .fb-billing-overlay {
  --fb-billing-surface: #17243d;
  --fb-billing-panel: #13223e;
  --fb-billing-panel-strong: #1c3052;
  --fb-billing-text: #d6e0f5;
  --fb-billing-heading: #fff;
  --fb-billing-muted: #b3c0d9;
  --fb-billing-subtle: #a5b6d5;
  --fb-billing-border: #2c3d5e;
  --fb-billing-field: #101c33;
  --fb-billing-code: #101c33;
}
body .fb-billing-option:hover,
body .fb-billing-option.is-active {
  background: #1c3052;
}
body .fb-billing-copy {
  color: #b0c3ff;
}
body .fb-billing-close:hover {
  background: #2c3d5e;
}
.site-footer {
  background: linear-gradient(152deg, #0f1b32, #172640);
}
.page-loader {
  background: #21345a;
}
.theme-switch-track {
  background: #fff;
}
:focus-visible {
  outline-color: #b2c4ff;
}


.auth-copy > img {
  content: url("/assets/artwork/auth.webp");
}

/* Account-specific states and fields retain clear contrast. */
.layout-app .app-sidebar {
  background: var(--surface);
}
.layout-app .app-sidebar nav a[aria-current="page"] {
  background: #21345a;
  color: #bccbff;
}
.account-next,
.empty-state,
.settings-nav,
.data-table th {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}
.data-table td {
  border-color: var(--line);
}
.data-table tbody tr:hover {
  background: #21345a;
}
.input,
select,
textarea,
.country-trigger,
.country-search,
.country-popover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.settings-nav-item.is-active,
.settings-nav-item:hover {
  background: var(--surface);
  color: var(--ink);
}
.settings-badge {
  background: #21345a;
  color: #bccbff;
  border-color: #425e91;
}
.email-verification-copy strong,
.email-verification-copy p,
.email-verification-icon svg {
  color: #cad8f5;
}
.status.pending-review {
  background: #453c1e;
  color: #ffe29a;
  border-color: #78632a;
}
.status.rejected {
  background: #452821;
  color: #ffb6a9;
  border-color: #784e40;
}
.status.canceled,
.status.unknown {
  background: #2b3751;
  color: #c3cfe3;
  border-color: #536789;
}
.checkbox-button[data-state="checked"]::after {
  color: #0b1326;
}
.form-hint[data-status="error"] {
  color: #ffb6a9;
}
.form-hint[data-status="success"] {
  color: #98edc6;
}
.layout-app .site-footer {
  background: var(--paper);
}
.layout-app .footer-bottom {
  color: var(--text);
}
.layout-app .site-header {
  background: var(--header);
}
.layout-app .brand-name {
  color: var(--ink);
}

/* Reference surfaces share the same geometry in both appearances. */
:root {
  --forest: #91adff;
  --blue: #91adff;
  --surface: #17243d;
  --wash: linear-gradient(152deg, #edf2f805, #edf2f814);
  --footer-wash: linear-gradient(152deg, #edf2f805, #edf2f814);
}
.package-card {
  background: var(--surface);
}
.service-card {
  background: var(--surface);
  border-color: var(--surface);
}
.service-card > img {
  background: #2a3b5a;
}
.benefit-tab {
  background: transparent;
}
.benefit-tab.is-active,
.benefit-tab:hover {
  background: var(--surface);
  border-color: var(--surface);
}
.art-stat,
.benefit-callout,
.benefit-availability {
  background: #17243d80;
  border-color: #2b3d5f;
}
.benefit-callout p,
.benefit-availability p {
  color: #fff;
}
.journey-grid article {
  background: linear-gradient(110deg, #edf2f805, #edf2f814);
}
.hero-socials .social-links a:first-child {
  background: transparent;
  border-color: #91adff;
  color: #91adff;
}
.site-footer {
  background: var(--footer-wash);
  color: #fff;
}
.site-footer h3 {
  color: #fff;
}
.site-footer p,
.site-footer a:not(.brand),
.site-footer button {
  color: #ffffff99;
}
.site-footer .social-links a {
  color: #fff;
}
.site-footer .footer-apps a {
  color: #0c263a;
}
.site-footer .footer-apps .play-badge {
  background: #0c263a;
  color: #fff;
}
.plans-section::after,
.journey-section::before {
  background: #edf2f805;
}
.contact-backdrop {
  border-color: #edf2f833;
}
.contact-backdrop > span {
  background: linear-gradient(219deg, #edf2f805, #edf2f814);
}
.contact-icon img[src$="service-6.webp"] {
  content: url("/assets/artwork/service-6.webp");
}
.contact-icon img[src$="contact-email.webp"] {
  content: url("/assets/artwork/contact-email.webp");
}
.contact-icon img[src$="contact-address.webp"] {
  content: url("/assets/artwork/contact-address.webp");
}
.page-signin .forgot-link {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
}

/* Navy surfaces keep cobalt, mint, and periwinkle artwork crisp in dark mode. */
:root {
  --paper: #0b1326;
  --surface: #17243d;
  --header: #111d34;
  --ink: #f3f6ff;
  --text: #b4c1da;
  --muted-text: #b4c1da;
  --forest: #91adff;
  --blue: #91adff;
  --emerald: #b6c8ff;
  --sage: #21345a;
  --soft: #111f38;
  --line: #2c3d5e;
  --background: 222 55% 10%;
  --foreground: 225 100% 98%;
  --card: 221 45% 16%;
  --popover: 221 45% 16%;
  --primary: 225 100% 78%;
  --primary-foreground: 222 55% 12%;
  --secondary: 221 43% 22%;
  --muted: 221 43% 18%;
  --muted-foreground: 220 35% 78%;
  --accent: 221 46% 24%;
  --border: 221 36% 27%;
  --input: 221 36% 30%;
  --ring: 225 100% 78%;
  --action-text: #0b1731;
  --action-hover: #b2c5ff;
  --cta-background: #1a2c50;
  --cta-foreground: #f3f6ff;
  --cta-highlight: #9ee9d8;
  --wash: linear-gradient(145deg, #101c32, #14213b);
  --footer-wash: linear-gradient(145deg, #101c32, #14213b);
  --frontbacked-support-launcher-bg: #315fe9;
  --frontbacked-support-launcher-bg-2: #2549ba;
  --fb-feedback-button-bg: #91adff;
  --fb-feedback-button-text: #0b1731;
}
.layout-app {
  background: var(--paper);
}
.btn-primary,
.btn-primary:hover {
  color: var(--action-text);
}
.cta-copy h2,
.cta-copy h2 .heading-rest,
.cta-copy p {
  color: var(--cta-foreground);
}
.cta-copy h2 span {
  color: var(--cta-highlight);
}
.theme-switch-track {
  background: #2a3d63;
  color: #e4edff;
}
.theme-switch input:checked + .theme-switch-track .theme-switch-moon {
  color: #17294a;
}
.carousel-controls button:last-child,
.hero-socials .social-links a:first-child,
.checkbox-button[data-state="checked"]::after {
  color: var(--action-text);
}
.hero-socials .social-links a:first-child {
  background: var(--forest);
  color: var(--action-text);
}