/* =========================================================
   SehVarta Premium Theme — Phase 1: Foundation + Glassmorphism
   Loads AFTER app.css — overrides visual tokens only.
   Does not touch markup/JS. Safe to remove via single <link>.
   ========================================================= */

:root {
    /* Brand gradient: Blue + Purple */
    --sv-blue: #2563eb;
    --sv-blue-dark: #1d4ed8;
    --sv-purple: #7c3aed;
    --sv-purple-dark: #6d28d9;
    --sv-white: #ffffff;

    /* Core tokens (override existing --primary/--gold/--blue usage) */
    --primary: var(--sv-blue);
    --primary-dark: var(--sv-blue-dark);
    --blue: var(--sv-blue);
    --gold: var(--sv-purple);
    --accent: var(--sv-purple);

    --bg: #f3f5fc;
    --surface: #ffffff;
    --ink: #14162b;
    --muted: #6b7280;
    --line: rgba(37, 99, 235, .12);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, .62);
    --glass-border: rgba(255, 255, 255, .45);
    --glass-blur: blur(18px);
    --glass-shadow: 0 12px 40px rgba(37, 99, 235, .12), 0 2px 8px rgba(124, 58, 237, .08);

    /* Radius scale */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur: .25s;

    --shadow: var(--glass-shadow);
    color-scheme: light;
}

/* Dark mode — follows system, can be forced with html[data-theme="dark"] */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0d0f1c;
        --surface: #161829;
        --ink: #eef0fb;
        --muted: #9aa0b4;
        --line: rgba(124, 58, 237, .22);
        --glass-bg: rgba(22, 24, 41, .55);
        --glass-border: rgba(255, 255, 255, .08);
        --glass-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(124, 58, 237, .18);
        color-scheme: dark;
    }
}
html[data-theme="dark"] {
    --bg: #0d0f1c;
    --surface: #161829;
    --ink: #eef0fb;
    --muted: #9aa0b4;
    --line: rgba(124, 58, 237, .22);
    --glass-bg: rgba(22, 24, 41, .55);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(124, 58, 237, .18);
    color-scheme: dark;
}

* { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); }

body {
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 58, 237, .10), transparent 32%),
        radial-gradient(circle at 88% 6%, rgba(37, 99, 235, .10), transparent 34%),
        var(--bg);
    color: var(--ink);
}

/* ---------- Topbar: glass ---------- */
.topbar, .auth-topbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

.brand-mark span, .brand span {
    background: linear-gradient(135deg, var(--sv-blue), var(--sv-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.brand-logo-img {
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .25);
}
.app-logo .brand-logo-img { border-radius: 50%; }

.top-search input {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 999px !important;
    color: var(--ink);
}
.top-search input:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--sv-purple) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .15) !important;
}

/* ---------- Buttons ---------- */
.button, button.button, a.button {
    background: linear-gradient(135deg, var(--sv-blue), var(--sv-purple)) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .25) !important;
    font-weight: 700;
    letter-spacing: .01em;
}
.button:hover, button.button:hover, a.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(124, 58, 237, .32) !important;
}
.button:active, button.button:active, a.button:active { transform: translateY(0); }

.button.ghost, button.ghost, a.button.ghost {
    background: rgba(37, 99, 235, .08) !important;
    color: var(--sv-blue-dark) !important;
    box-shadow: none !important;
}

/* ---------- Glass panels / cards ---------- */
.panel, .fb-post-card, .sv-post-card-shell, .social-section-card, .fb-reward-panel,
.fb-support-panel, .messenger-list, .messenger-window, .story-card, .poster-card,
.preview-feed, .preview-panel, .fb-composer, .insta-composer-card,
.fb-left-rail, .fb-right-rail, .social-left-rail, .social-right-rail {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--glass-shadow) !important;
}

.fb-post-card:hover, .sv-post-card-shell:hover {
    box-shadow: 0 20px 55px rgba(37, 99, 235, .16), 0 4px 14px rgba(124, 58, 237, .12) !important;
    transform: translateY(-2px);
}

/* Avatars + round actions: brand gradient */
.round-action, .mobile-icon-nav a, .mobile-side-menu a span, .mobile-side-menu button span,
.fb-left-rail a span, .page-left-rail a span, .chat-person-row > span, .chat-avatar-lg,
.profile-avatar-xl, .mini-avatar, .security-session-row > span {
    background: linear-gradient(135deg, var(--sv-blue), var(--sv-purple)) !important;
    color: #fff !important;
    border-radius: 50% !important;
}
.round-action:hover, .mobile-icon-nav a:hover {
    background: linear-gradient(135deg, var(--sv-blue-dark), var(--sv-purple-dark)) !important;
    transform: translateY(-1px) scale(1.04);
}

.badge-action b, .mobile-icon-nav b, .unread-badge, .instagram-mobile-nav b {
    background: linear-gradient(135deg, #f43f5e, var(--sv-purple)) !important;
}

/* ---------- Story ring ---------- */
.story-card, .story-preview-card {
    border-radius: var(--r-md) !important;
    overflow: hidden;
}
.instagram-story-strip .story-card::before,
.instagram-story-strip .story-preview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--sv-purple), var(--sv-blue), #ec4899);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.instagram-story-strip .story-card, .instagram-story-strip .story-preview-card { position: relative; }
.story-plus {
    background: linear-gradient(135deg, var(--sv-blue), var(--sv-purple)) !important;
}

/* ---------- Post media: never crop (framework hook) ---------- */
.post-media { border-radius: var(--r-md); display: block; max-width: 100%; height: auto; }
.media-aspect-9-16 {
    max-height: 700px;
    width: auto;
    margin: 0 auto;
    border-radius: var(--r-lg);
    background: #000;
}
.media-aspect-4-5 { max-height: 640px; width: auto; margin: 0 auto; }
.media-aspect-1-1 { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: var(--surface); }
.media-aspect-16-9 { aspect-ratio: 16 / 9; width: 100%; object-fit: contain; background: #000; }

/* ---------- Reaction / action row ---------- */
.reaction-row, .fb-post-actions.share-actions {
    border-top: 1px solid var(--line) !important;
}
.feed-action-btn, .post-actions span, .reaction-row button,
.facebook-action-row button, .fb-post-actions.share-actions button {
    color: var(--muted);
    border-radius: var(--r-sm) !important;
}
.feed-action-btn:hover {
    background: rgba(124, 58, 237, .08) !important;
    color: var(--sv-purple-dark) !important;
}
.feed-action-btn.is-active { color: var(--sv-blue) !important; font-weight: 800; }
.feed-like-btn.is-active { color: #ec4899 !important; }

/* ---------- Progress / misc ---------- */
.progress i { background: linear-gradient(90deg, var(--sv-purple), var(--sv-blue)) !important; }

/* ---------- Scroll + fade-in micro interaction ---------- */
.fb-feed > * { animation: sv-fade-up .35s var(--ease) both; }
@keyframes sv-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scrollbar polish ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--sv-blue), var(--sv-purple));
    border-radius: 999px;
}
::-webkit-scrollbar-track { background: transparent; }