/**
 * Dark mode tokens for the vanilla (views/vanilla) pages.
 *
 * Light values are exactly what main.css/the vanilla views already
 * hardcoded — kept byte-for-byte so switching them to variables causes
 * no light-mode diff. Dark values are taken from alua-web's own
 * src/style/tailwind.css (Phase 6, PR #1827), which reverse-engineered
 * alua-nextjs's already-shipped dark mode into a token layer — reused
 * verbatim here wherever a vanilla color matches one of its tokens, so
 * all three apps share one dark palette. No manual toggle: like
 * alua-nextjs, this follows the OS/browser `prefers-color-scheme`
 * setting only, there is no appearance setting in the vanilla flow.
 */
:root {
  color-scheme: light dark;

  /* surfaces */
  --color-surface: #fff; /* page background, .container, .homepage card, modals */
  --color-surface-alt: #f6f6f6; /* testimonial-social pill */
  --color-input-bg: #fff; /* form control chrome, kept separate from --color-surface so dark mode can tier it */

  /* text */
  --color-body-text: #303637; /* default copy */
  --color-text: #121212; /* .text utility class copy */
  --color-text-strong: #000; /* modal headings, input text, other emphasis */
  --color-text-muted: #8e8e93; /* .online-indicator, secondary copy */
  --color-placeholder-text: #a7adb7; /* input placeholders */
  --color-text-inverse: #fff; /* text on a colored button/photo background, unchanged in both themes */

  /* borders / dividers */
  --color-border-color: #d4d9e2; /* inputs, card border, ghost-button default border, OR-divider */
  --color-border-light: #e0e6ed; /* testimonial card border, footer link-title underline */

  /* brand / state accents - alua-web leaves these literally unchanged in dark mode too */
  --color-primary: #0094f4;
  --color-secondary: #059aff;
  --color-success: #2bb549;
  --color-error: #eb5757;

  /* vanilla-only roles with no alua-web equivalent */
  --color-ghost-text: #1a2545; /* .btn-ghost text/border - a lander-specific navy, same role as border-color/body-text elsewhere */
  --color-disabled-bg: #ebebeb; /* disabled "resend" button */
  --color-alert-danger-bg: #f2dede;
  --color-alert-danger-text: #a94442;
  --color-alert-danger-border: #ebccd1;
  --color-alert-info-bg: #d9edf7;
  --color-alert-info-text: #31708f;
  --color-alert-info-border: #bce8f1;

  /* select.nps-form__input's custom chevron - a baked data URI can't follow
     --color-body-text, so it gets its own light/dark pair (same reasoning
     as alua-web's own --select-arrow-bg/--dropdown-arrow-bg tokens). Same
     artwork, stroke swapped from #303637 to #dedddd (this app's dark
     --color-body-text) for the dark version below. */
  --select-arrow-bg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNSI+CjxwYXRoIGQ9Ik0wLjgzODg2NyAxLjYyMDYxTDUuODM4ODcgNi42MjA2MSIgc3Ryb2tlPSIjMzAzNjM3IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjgzODkgMS42MjA2MUw1LjgzODg3IDYuNjIwNjEiIHN0cm9rZT0iIzMwMzYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg==");

  /* email-availability spinner (profile.php, toggled by profile.js) */
  --loading-spinner-bg: url("/vanilla/img/loading-black.svg");
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-surface: #151617;
    --color-surface-alt: #1e1f20;
    --color-input-bg: #262626;

    --color-body-text: #dedddd;
    --color-text: #f3f4f6;
    --color-text-strong: #fff;
    --color-text-muted: #d1d5db;
    --color-placeholder-text: #6b7280;

    --color-border-color: #454545;
    --color-border-light: #2e2e2e;

    --color-ghost-text: #f3f4f6;
    --color-disabled-bg: #1e1f20;

    /* pastel alert tints don't read on a dark surface - swapped for a low-opacity
       wash of the same accent, mirroring alua-web's own warning-bg treatment */
    --color-alert-danger-bg: rgba(235, 87, 87, 0.12);
    --color-alert-danger-text: #eb5757;
    --color-alert-danger-border: rgba(235, 87, 87, 0.3);
    --color-alert-info-bg: rgba(0, 148, 244, 0.1);
    --color-alert-info-text: #0094f4;
    --color-alert-info-border: rgba(0, 148, 244, 0.3);

    --select-arrow-bg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNSI+CjxwYXRoIGQ9Ik0wLjgzODg2NyAxLjYyMDYxTDUuODM4ODcgNi42MjA2MSIgc3Ryb2tlPSIjZGVkZGRkIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjgzODkgMS42MjA2MUw1LjgzODg3IDYuNjIwNjEiIHN0cm9rZT0iI2RlZGRkZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+");
    --loading-spinner-bg: url("/vanilla/img/loading-dark.svg");
  }

  /* The big splash wordmark is a flat navy SVG fetched from the CDN - it
     can't pick up a color token like everything else here, so invert it
     the same way alua-web does for the same asset (`.invert-in-dark`). */
  img[src="https://static.alua.com/alua_connecting_fans.svg"] {
    filter: brightness(0) invert(1);
  }

  /* logo.svg is the small nav-bar mark on model.php's feed view ($showFeedView,
     wrapped in <nav id="nav">) - the exact same artwork alua-nextjs serves as
     alua_logo.svg (byte-identical fill/paths) with `dark:brightness-0
     dark:invert` applied (lander-header.tsx, app-header.tsx,
     model-landing.tsx). Scoped to #nav rather than matched globally by src:
     until #2245 merges, contact/privacy/refunds/record-keeping/terms.php
     also render this exact image (a plain link, not inside #nav) against a
     body background none of those views vary by theme - a global match
     would invert it to white-on-white there. */
  #nav img[src="https://static.alua.com/logo.svg"] {
    filter: brightness(0) invert(1);
  }

  /* Facebook/Instagram/X marks are flat #303637 SVGs, reused across the
     footer, the social-login buttons and the "where are you most popular"
     picker - same fix alua-nextjs applies to the same three assets
     (`dark:invert`, see lander-footer.tsx and social-media-select.tsx).
     Matched by src rather than the shared `.social` class the footer
     wraps them in, because that class also wraps the DMCA badge (a
     colorful logo, not a flat mark - inverting it turns it into a solid
     white block) and isn't used at all outside the footer. */
  img[src="/vanilla/img/fb-black.svg"],
  img[src="/vanilla/img/ig-black.svg"],
  img[src="/vanilla/img/x-black.svg"],
  img[src="/vanilla/img/tiktok-black.svg"],
  img[src="/vanilla/img/onlyfans-black.svg"] {
    filter: brightness(0) invert(1);
  }

  /* Modal-close "x" icon (every twoFactorRecovery/inviteCodeInfo/Facebook
     modal, plus the social-picker's own clear button) is a flat #303637
     SVG sitting directly on --color-surface, same problem as the marks
     above. */
  img[src="/vanilla/img/x.svg"] {
    filter: brightness(0) invert(1);
  }
}

/*
 * Review badges (Trustpilot, Google Reviews) are colorful raster/vector
 * logos designed for a light background - inverting them would miscolor
 * the logos, so alua-nextjs instead swaps to a dedicated "* Dark.svg"
 * asset (see promo/page.tsx's dark:hidden / hidden:dark:block pair).
 * Mirrored here as a pair of <img> tags, one per theme, toggled by class
 * rather than a Tailwind variant.
 */
.dark-show {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .dark-hide {
    display: none;
  }

  .dark-show {
    display: initial;
  }
}