/*
|--------------------------------------------------------------------------
| FortuneSpace Theme V3 — Shared Application Shell
|--------------------------------------------------------------------------
|
| Phase 1B
|
| Pearl preview for the normal FortuneSpace application.
| Admin is intentionally excluded for now.
|
| Dark mode is untouched.
|
*/

/* ================================================================
   PEARL — GLOBAL APPLICATION CANVAS
   ================================================================ */

html[data-fs-theme="light"] body:not(.admin-page) {
  background: var(--fs-canvas) !important;
  color: var(--fs-text) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .main-content {
  background: var(--fs-canvas) !important;
  color: var(--fs-text);
}

html[data-fs-theme="light"]
body:not(.admin-page) .container {
  color: var(--fs-text);
}


/* ================================================================
   PEARL — APP HEADER
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .fs-appbar {
  background:
    rgba(255,255,255,.94) !important;

  border-bottom:
    1px solid var(--fs-border) !important;

  box-shadow:
    0 5px 20px rgba(23,33,26,.055) !important;

  -webkit-backdrop-filter:
    saturate(125%) blur(14px);

  backdrop-filter:
    saturate(125%) blur(14px);
}

html[data-fs-theme="light"]
body:not(.admin-page) .fs-brand,
html[data-fs-theme="light"]
body:not(.admin-page) .fs-brand__name {
  color: var(--fs-text) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .app-actions {
  background:
    rgba(246,248,246,.78) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(23,33,26,.02);
}


/* ================================================================
   PEARL — PRIMARY NAVIGATION
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .link-nav {
  color:
    var(--fs-text-secondary) !important;

  transition:
    color var(--fs-motion-fast) ease,
    background var(--fs-motion-fast) ease;
}

html[data-fs-theme="light"]
body:not(.admin-page) .link-nav:hover,
html[data-fs-theme="light"]
body:not(.admin-page) .link-nav:focus-visible {
  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface-raised) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .link-nav.active {
  color:
    var(--fs-brand-text) !important;

  background:
    var(--fs-brand-soft) !important;
}


/* ================================================================
   PEARL — HEADER ACTION BUTTONS
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .btn.btn-icon,
html[data-fs-theme="light"]
body:not(.admin-page) .mobile-menu-toggle {
  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  box-shadow:
    var(--fs-shadow-sm);
}

html[data-fs-theme="light"]
body:not(.admin-page) .btn.btn-icon:hover,
html[data-fs-theme="light"]
body:not(.admin-page) .mobile-menu-toggle:hover {
  background:
    var(--fs-surface-raised) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .btn.btn-ghost {
  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  box-shadow:
    var(--fs-shadow-sm);
}

html[data-fs-theme="light"]
body:not(.admin-page) .btn.btn-primary {
  color:
    var(--fs-brand-contrast) !important;

  background:
    var(--fs-brand) !important;

  border-color:
    var(--fs-brand) !important;

  box-shadow:
    0 8px 20px rgba(22,143,73,.14);
}

html[data-fs-theme="light"]
body:not(.admin-page) .btn.btn-primary:hover {
  background:
    var(--fs-brand-hover) !important;

  border-color:
    var(--fs-brand-hover) !important;
}


/* ================================================================
   PEARL — LANGUAGE CONTROL
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .fs-language-switcher {
  background:
    var(--fs-surface-soft) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(23,33,26,.015);
}

html[data-fs-theme="light"]
body:not(.admin-page) .fs-language-button {
  color:
    var(--fs-text-muted) !important;

  background:
    transparent !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .fs-language-button:hover {
  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page)
.fs-language-button.is-active {
  color:
    #0d5e31 !important;

  background:
    #baf0ca !important;

  box-shadow:
    0 2px 8px rgba(22,143,73,.10);
}


/* ================================================================
   PEARL — MOBILE NAVIGATION
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .mobile-menu {
  background:
    rgba(246,248,246,.98) !important;

  border-color:
    var(--fs-border) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .mobile-nav-item {
  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .mobile-nav-item:hover {
  background:
    var(--fs-surface-raised) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .mobile-menu-divider {
  background:
    var(--fs-border) !important;
}


/* ================================================================
   PEARL — STANDARD SURFACES
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .card,
html[data-fs-theme="light"]
body:not(.admin-page) .post-card {
  color:
    var(--fs-text);

  background:
    var(--fs-surface) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    var(--fs-shadow-md);
}


/*
 * V2 feed cards already consume the bridged semantic variables.
 * These rules resolve remaining hard-coded shadows/backgrounds.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap {
  background:
    var(--fs-surface) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    var(--fs-shadow-md) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap:hover {
  border-color:
    var(--fs-border-strong) !important;

  box-shadow:
    var(--fs-shadow-lg) !important;
}


/* ================================================================
   PEARL — STANDARD TYPOGRAPHY
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page)
:is(
  h1,h2,h3,h4,h5,h6,
  .card-title,
  .fs-procard__name
) {
  color:
    var(--fs-text);
}

html[data-fs-theme="light"]
body:not(.admin-page)
:is(
  .text-muted,
  .muted,
  .post-time
) {
  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) a:not(.btn) {
  text-decoration-color:
    rgba(17,122,62,.32);
}


/* ================================================================
   PEARL — STANDARD FORM CONTROLS
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page)
:is(
  .form-control,
  .form-select,
  .fs-input,
  input,
  textarea,
  select
) {
  color:
    var(--fs-text);

  background-color:
    var(--fs-surface) !important;

  border-color:
    var(--fs-border-strong) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page)
:is(
  .form-control,
  .form-select,
  .fs-input,
  input,
  textarea,
  select
):focus {
  color:
    var(--fs-text);

  background-color:
    var(--fs-surface) !important;

  border-color:
    rgba(22,143,73,.48) !important;

  box-shadow:
    var(--fs-focus) !important;

  outline:
    none;
}

html[data-fs-theme="light"]
body:not(.admin-page)
:is(
  input,
  textarea,
  .form-control
)::placeholder {
  color:
    var(--fs-text-subtle) !important;

  opacity:
    1;
}


/* ================================================================
   PEARL — ACCORDIONS / OPTIONAL SECTIONS
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .acc {
  color:
    var(--fs-text);

  background:
    var(--fs-surface) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    var(--fs-shadow-sm);
}

html[data-fs-theme="light"]
body:not(.admin-page) .acc-h {
  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface-soft) !important;
}

html[data-fs-theme="light"]
body:not(.admin-page) .acc-c {
  color:
    var(--fs-text-secondary);
}


/* ================================================================
   PEARL — NEWS / MOMENTS GENERAL SURFACES
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark .news-card {
  background:
    var(--fs-surface) !important;

  border-color:
    var(--fs-border) !important;

  box-shadow:
    var(--fs-shadow-md) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark .news-card__media {
  background:
    var(--fs-surface-raised);
}

html[data-fs-theme="light"]
body.feed-surface-dark .news-card__title {
  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark .news-card__summary,
html[data-fs-theme="light"]
body.feed-surface-dark .news-card__meta {
  color:
    var(--fs-text-secondary) !important;
}


/* ================================================================
   PEARL — GENERIC STATUS / ALERTS
   ================================================================ */

html[data-fs-theme="light"]
body:not(.admin-page) .alert-success {
  color:
    #0e6435;

  background:
    var(--fs-success-soft);

  border-color:
    rgba(22,143,73,.18);
}

html[data-fs-theme="light"]
body:not(.admin-page) .alert-danger {
  color:
    #9e2929;

  background:
    var(--fs-danger-soft);

  border-color:
    rgba(201,54,54,.16);
}


/* ================================================================
   MEDIA VIEWERS REMAIN CINEMATIC
   ================================================================ */

html[data-fs-theme="light"]
:is(
  #lightbox,
  #post-viewer,
  .lightbox,
  .post-viewer
) {
  color-scheme:
    dark;
}


/* ================================================================
   SELECTION + SCROLLBAR DETAILS
   ================================================================ */

html[data-fs-theme="light"] ::selection {
  color:
    #0b4f2a;

  background:
    #c9f2d5;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-fs-theme="light"]
  body:not(.admin-page)
  :is(
    .card,
    .post-card,
    .btn,
    .link-nav,
    .form-control,
    .form-select
  ) {
    transition:
      background-color var(--fs-motion-normal) ease,
      border-color var(--fs-motion-normal) ease,
      color var(--fs-motion-normal) ease,
      box-shadow var(--fs-motion-normal) ease;
  }
}