:root {
    --fl-main-body-background: #14191e;
    --fl-little-hover: #191f26;
    --fl-strong-hover: rgb(45, 45, 45);
    --fl-color-grey-black: #a9a9af;
    --fl-full-wb: #14191e;
    --fl-dash-menu-selected: #233347;
    --fl-dash-menu-hover-surface: #273b53;
    --fl-separator-color: #2a2a2a;
    --fl-menubar-color: #14191e;
    --fl-box-shadow: rgba(255, 255, 255, 0.1);
    --fl-box-shadow-2: rgba(255, 255, 255, 0.2);
    --fl-highlight: #ffc107;
    --sub-text-color: #abb0bb;

    --fl-bg-half-t: rgba(20, 25, 25, 0.7);
    --fl-bg-blur: blur(12px);

    --fl-opposite: #ffffff;

    --fl-ripple-color: rgba(231, 231, 231, 0.2);

    --fl-primary: #11576c;
    --fl-primary-dark: #194d5d;
    --fl-primary-2: #0a7fa2;
    --fl-primary-3: #438a9f;

    --firm-header-icon-color: #9bbad4;
    --image-placeholder-color: #20272f;
    --fl-border: #2a2a2a;

    --error-color-lighter: #EF9A9A;
    --error-color: #d32f2f;
    --error--hover-color: #b71c1c;

    --fl-card-bg: #212328;
    --fl-card-bg-stronger: #17181b;
    --fl-card-text: #d3d7db;


    /* Events Explore Things */
    --events-bg-color: #1E1E2F;
    /* Midnight Blue */
    --events-text-color: #D1D1E9;
    /* Pale Lavender */
    --events-secondary-text-color: #A9A9C3;
    /* Muted Lavender */
    --events-accent-color: #6A95FF;
    /* Soft Blue */
    --button-smooth-primary-color: #6A95FF;
    /* Soft Blue */
    --events-button-text: #FFFFFF;
    /* White */
    --events-link-color: #6A95FF;
    /* Soft Blue */
    --events-border-color: #444455;
    /* Dark Slate */
    --events-hover-bg: rgba(106, 149, 255, 0.1);
    /* Transparent Soft Blue */

    /* Follow Button Variables - Dark Theme */
    --flp-btn-bg: #353041;
    --flp-btn-text: #e0e0e0;
    --flp-btn-border: #333333;
    --flp-btn-hover-bg: #2a2a2a;
    --flp-btn-hover-text: #ffffff;
    --flp-btn-hover-border: #444444;
    --flp-btn-following-bg: #164780;
    --flp-btn-following-text: #ffffff;
    --flp-btn-following-border: #4a90e2;

    --flp-btn-accept-bg: #388E3C;
    --flp-btn-accept-text: #FFFFFF;
    --flp-btn-accept-border: #2E7D32;
    --flp-btn-accept-hover-bg: #2E7D32;
    --flp-btn-accept-hover-text: #FFFFFF;
    --flp-btn-accept-hover-border: #1B5E20;

    --flp-btn-decline-bg: #D32F2F;
    --flp-btn-decline-text: #FFFFFF;
    --flp-btn-decline-border: #C62828;
    --flp-btn-decline-hover-bg: #C62828;
    --flp-btn-decline-hover-text: #FFFFFF;
    --flp-btn-decline-hover-border: #B71C1C;

    /* Requested State - Dimmed Orange */
    --flp-btn-requested-bg: #91640f;
    /* Darker Orange */
    --flp-btn-requested-text: #ffffff;
    --flp-btn-requested-border: #b37700;
    --flp-btn-requested-hover-bg: #e6a600;
    --flp-btn-requested-hover-text: #ffffff;
    --flp-btn-requested-hover-border: #cc8800;

    /* VIP State - Dimmed Gold */
    --flp-btn-vip-bg: #b39230;
    /* Darker Gold */
    --flp-btn-vip-text: #ffffff;
    --flp-btn-vip-border: #997a1a;
    --flp-btn-vip-hover-bg: #cca500;
    --flp-btn-vip-hover-text: #ffffff;
    --flp-btn-vip-hover-border: #ad8c00;

    /* Unknown State */
    --flp-btn-unknown-bg: #555555;
    --flp-btn-unknown-text: #ffffff;
    --flp-btn-unknown-border: #666666;
    --flp-btn-unknown-hover-bg: #666666;
    --flp-btn-unknown-hover-text: #ffffff;
    --flp-btn-unknown-hover-border: #777777;

    --input-border-color: #4d5158;

    --surface-a: #1c232c;
    --surface-b: #21252c;
    --surface-c: rgba(255, 255, 255, 0.04);
    --surface-d: #22282f;
    --surface-e: #1c232c;
    --surface-f: #1c232c;
    --text-color: rgba(255, 255, 255, 0.87);
    --text-color-secondary: rgba(255, 255, 255, 0.6);
    --primary-color: #1c87d4;
    --primary-color-text: #ffffff;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --surface-0: #20262e;
    --surface-50: #363c43;
    --surface-100: #4d5158;
    --surface-200: #63676d;
    --surface-300: #797d82;
    --surface-400: #909397;
    --surface-500: #a6a8ab;
    --surface-600: #bcbec0;
    --surface-700: #d2d4d5;
    --surface-800: #e9e9ea;
    --surface-900: #ffffff;
    --gray-50: #e9e9ea;
    --gray-100: #d2d4d5;
    --gray-200: #bcbec0;
    --gray-300: #a6a8ab;
    --gray-400: #909397;
    --gray-500: #797d82;
    --gray-600: #63676d;
    --gray-700: #4d5158;
    --gray-800: #363c43;
    --gray-900: #20262e;
    /* --content-padding: 1.25rem; */
    --inline-spacing: 0.5rem;
    --border-radius: 5px;
    --surface-ground: #20262e;
    --surface-section: #20262e;
    --surface-card: #2a323d;
    --surface-overlay: #2a323d;
    --surface-border: #3f4b5b;
    --surface-hover: rgba(255, 255, 255, .04);
    --maskbg: rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 1px #e3f3fe;
    --highlight-bg: #8dd0ff;
    --highlight-text-color: #151515;
    color-scheme: dark;

    /* glass footer */
    --glass-bg: rgba(20, 20, 28, 0.4);
    --glass-backdrop: saturate(180%) blur(12px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    --footer-padding: 3px 0;
    --footer-text: #ffffff;

    /* Border and shadows */
    --fl-explain-border: #374151;
    --fl-explain-shadow: rgba(0, 0, 0, 0.25);
    --fl-explain-shadow-hover: rgba(0, 0, 0, 0.4);

    /* Text colors */
    --fl-explain-title-color: #f9fafb;
    --fl-explain-text-color: #d1d5db;

    /* Type-specific icon colors */
    --fl-explain-info-color: #60a5fa;
    --fl-explain-warning-color: #fbbf24;
    --fl-explain-error-color: #f87171;

    --dash-hero-fg: #f5f5f5;
    --muted: #9aa3b2;
    --brand: #38bdf8;
    --brand-strong: #0ea5e9;
    --card: #0f172a;
    --ring: rgba(56, 189, 248, 0.35);

    --skeleton-primary: #0a0c0f;
    --skeleton-card-bg: #0a0c0f;
    --skeleton-block: #0d1014;
    --skeleton-shine: rgba(255, 255, 255, 0.02);
    --skeleton-btn-text: #0f1216;

    --notice-text-color: #e9e9e9;
    --notice-text-opacity: 0.8;

    --plan-sub-ink: #f2f2f3;
    --plan-sub-muted: #9aa0aa;
    --plan-sub-border: #2a2d34;
    --plan-sub-elev: #14161a;
    --plan-sub-hover: rgba(255, 255, 255, .06);
    --plan-sub-ring: #d1d5db;
    --plan-sub-accent: #e5e7eb;


    --fl-surface: #0e0f10;

    --card-bg: #1a1a1a;
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow-hover: rgba(0, 0, 0, 0.5);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --icon-explore-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --icon-create-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-glow: rgba(124, 147, 255, 0.2);

}

.invert-colors {
    filter: brightness(0) invert(1);
}