/* =========================================================
   FINDFYRE THEME SYSTEM
   Dark is the default. Light is opt-in via body.fp-light.
   ========================================================= */

:root {
    --ff-bg:              #0d111a;
    --ff-bg-secondary:    #0a0e14;
    --ff-surface:         #1e1d2e;
    --ff-text-primary:    #f0f0f0;
    --ff-text-secondary:  #acabaf;
    --ff-border:          #2e2d3e;
    --ff-border-light:    #2a2940;
    --ff-header-bg:       #0d0c18;
    --ff-sidebar-bg:      #1e1d2e;
    --ff-menu-link:       #f0f0f0;
    --ff-shadow:          rgba(0, 0, 0, 0.50);
    --ff-shadow-strong:   rgba(0, 0, 0, 0.70);
    --ff-input-bg:        #252436;
    --ff-input-border:    #3a3950;
    --ff-hover-bg:        rgba(224, 84, 141, 0.12);
    --ff-accent:          #e0548d;
    --ff-accent-hover:    #ff4da6;
    --ff-dot-popup-bg:    #252436;
    --ff-latest-pop-bg:   #252436;
    --ff-overlay-bg:      rgba(0, 0, 0, 0.92);
    --ff-username-color:  #f0f0f0;
    --ff-btn-design-color:#f0f0f0;
}

body.ff-dark {
    --ff-bg:              #0d111a;
    --ff-bg-secondary:    #0a0e14;
    --ff-surface:         #1e1d2e;
    --ff-text-primary:    #f0f0f0;
    --ff-text-secondary:  #acabaf;
    --ff-border:          #2e2d3e;
    --ff-border-light:    #2a2940;
    --ff-header-bg:       #0d0c18;
    --ff-sidebar-bg:      #1e1d2e;
    --ff-menu-link:       #f0f0f0;
    --ff-shadow:          rgba(0, 0, 0, 0.50);
    --ff-shadow-strong:   rgba(0, 0, 0, 0.70);
    --ff-input-bg:        #252436;
    --ff-input-border:    #3a3950;
    --ff-hover-bg:        rgba(224, 84, 141, 0.12);
    --ff-accent:          #e0548d;
    --ff-accent-hover:    #ff4da6;
    --ff-dot-popup-bg:    #252436;
    --ff-latest-pop-bg:   #252436;
    --ff-overlay-bg:      rgba(0, 0, 0, 0.92);
    --ff-username-color:  #f0f0f0;
    --ff-btn-design-color:#f0f0f0;
}

body.fp-light {
    --ff-bg:              #ffffff;
    --ff-bg-secondary:    #f7f7f7;
    --ff-surface:         #ffffff;
    --ff-text-primary:    #0a3049;
    --ff-text-secondary:  #245870;
    --ff-border:          #ebebeb;
    --ff-border-light:    #e9ebee;
    --ff-header-bg:       #ffffff;
    --ff-sidebar-bg:      #ffffff;
    --ff-menu-link:       #0a3049;
    --ff-shadow:          rgba(0, 0, 0, 0.16);
    --ff-shadow-strong:   rgba(0, 0, 0, 0.4);
    --ff-input-bg:        #ffffff;
    --ff-input-border:    #ddd;
    --ff-hover-bg:        #fff2f7;
    --ff-accent:          #e0548d;
    --ff-accent-hover:    #ff4da6;
    --ff-dot-popup-bg:    #ffffff;
    --ff-latest-pop-bg:   #ffffff;
    --ff-overlay-bg:      rgba(0, 0, 0, 0.9);
    --ff-username-color:  #0a3049;
    --ff-btn-design-color:#14364d;
}

/* ?? Apply variables to core elements ?? */

html {
    background-color: var(--ff-bg);
    color-scheme: dark;
}

html.ff-light-preload,
body.fp-light {
    color-scheme: light;
}

body {
    background-color: var(--ff-bg);
    color: var(--ff-text-primary);
}

html.ff-dark-preload,
html.ff-dark-preload body,
html.ff-dark-preload .wrapper {
    background-color: #0d111a !important;
}

html.ff-light-preload,
html.ff-light-preload body,
html.ff-light-preload .wrapper {
    background-color: #ffffff !important;
}

/* Header & navbar */
.primary-header {
    background-color: var(--ff-header-bg) !important;
    box-shadow: 0px 3px 7px var(--ff-shadow);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.navbar-block {
    background-color: var(--ff-header-bg) !important;
    transition: background-color 0.25s ease;
}

/* Sidebar / menu */
.menu-wrap {
    background-color: var(--ff-sidebar-bg) !important;
    transition: background-color 0.25s ease;
}

.user-name {
    color: var(--ff-username-color) !important;
}

.user-id {
    color: var(--ff-text-primary) !important;
}

.menu-listing a,
.menu-listing .logout-btn {
    color: var(--ff-menu-link) !important;
}

.menu-listing a:hover,
.menu-listing .logout-btn:hover {
    color: var(--ff-accent) !important;
    background: none !important;
}

/* Close button X lines in sidebar */
.btn-design {
    background-color: var(--ff-btn-design-color) !important;
}

/* Dropdown popups */
.dot-pop-up {
    background-color: var(--ff-dot-popup-bg) !important;
    border-color: var(--ff-border) !important;
}

.dot-pop-up li:hover {
    background: var(--ff-hover-bg) !important;
}

.latest-pop {
    background-color: var(--ff-latest-pop-bg) !important;
    border-color: var(--ff-border) !important;
}

.latest-pop:after {
    background-color: var(--ff-latest-pop-bg) !important;
    border-color: var(--ff-border-light) !important;
}

.latest-pop li:nth-child(1) {
    border-bottom-color: var(--ff-border) !important;
}

.latest-pop li:nth-child(2) {
    border-top-color: var(--ff-border-light) !important;
}

/* Slider / post card wrap */
.posts .slider-wrap {
    background: var(--ff-surface);
}

/* Page wrapper */
.wrapper {
    background-color: var(--ff-bg);
}

/* ?? Theme toggle button in sidebar ?? */
.ff-theme-toggle-li a {
    display: flex !important;
    align-items: center;
}

.ff-theme-toggle-li a i {
    transition: transform 0.35s ease;
}

body.ff-dark .ff-theme-toggle-li a i.fa-sun {
    color: #fbbf24 !important;
}

/* ?? Dark mode: navbar icon colours ?? */
body.ff-dark .ff-navbar-icons a i,
body.ff-dark .ff-navbar-icons i {
    color: #f0f0f0;
}

body.ff-dark .ff-navbar-icons .profile-btn {
    color: #e91e63 !important;
}

/* ?? Dark mode: page background on <html> during preload ?? */
html.ff-dark-preload {
    background-color: #0d111a;
}

html.ff-light-preload {
    background-color: #ffffff;
}

/* ?? Smooth transitions on key painted elements ?? */
.side-menu,
.dot-pop-up,
.latest-pop,
.menu-wrap,
.primary-header,
.navbar-block {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* =========================================================
   DARK MODE: TEXT COLOUR OVERRIDES
   Only targets colours that are dark/navy on white and would
   be unreadable on the dark background. Pink, white and
   already-light text is left untouched.
   ========================================================= */

/* Headings (h1�h6) � default navy #0a3049 / #161e21 */
body.ff-dark h1,
body.ff-dark h2,
body.ff-dark h3,
body.ff-dark h4,
body.ff-dark h5,
body.ff-dark h6 {
    color: #258fd3;
}

/* Login page "Sign in to your account" has an inline style � override it */
body.ff-dark .form-wrap h4 {
    color: #258fd3 !important;
}

/* Slider / card section headings e.g. "New Creators" */
body.ff-dark .slider-wrap h3 {
    color: #258fd3 !important;
}

/* Post heading */
body.ff-dark .post-heading {
    color: #258fd3;
}

/* Body copy � global.css sets p { color: #000 } */
body.ff-dark p {
    color: #c8c8c8;
}

/* Post details paragraphs */
body.ff-dark .post-details p {
    color: #c8c8c8;
}

/* Menu / filter option labels */
body.ff-dark .menu-opt,
body.ff-dark .profile-actions,
body.ff-dark .post-filter,
body.ff-dark .message-filter-style,
body.ff-dark .message-order-filter,
body.ff-dark .post-order-filter,
body.ff-dark .post-media-filter,
body.ff-dark .gal-filter-order {
    color: #e0e0e0;
}

/* Login / register form labels and spans */
body.ff-dark .login-spans,
body.ff-dark .register-label {
    color: #c8c8c8;
}

/* Input placeholders */
body.ff-dark ::placeholder {
    color: #7a7a8a;
}

/* Footer nav links � global.css sets color: #181818 */
body.ff-dark .footer-bottom ul a {
    color: #c8c8c8;
}

/* Footer strong text and copyright */
body.ff-dark .footer-text strong,
body.ff-dark .copyright {
    color: #9ca3af;
}

/* Light mode: headers stay brand navy; supporting copy is a lifted navy */
body.fp-light {
    --ff-text-primary: #0a3049;
    --ff-text-secondary: #245870;
    --text-primary: #0a3049;
    --text-secondary: #245870;
    --text-muted: #3a6b82;
}

body.fp-light h1:not(.fp-display-name):not(.fp-display-name-text),
body.fp-light h2,
body.fp-light h3,
body.fp-light h4,
body.fp-light h5,
body.fp-light h6 {
    color: #0a3049 !important;
}

body.fp-light ::placeholder {
    color: #3a6b82 !important;
    opacity: 1 !important;
}