/* =========================================================
   SehVarta — Phase 2: Design System tokens
   ========================================================= */

:root {
    --sv-text-xs: 11px;
    --sv-text-sm: 13px;
    --sv-text-base: 14.5px;
    --sv-text-md: 16px;
    --sv-text-lg: 20px;
    --sv-text-xl: 24px;
    --sv-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --sv-space-1: 4px;
    --sv-space-2: 8px;
    --sv-space-3: 12px;
    --sv-space-4: 16px;
    --sv-space-6: 24px;

    --sv-bg: #ffffff;
    --sv-surface: #ffffff;
    --sv-text-primary: #111827;
    --sv-text-secondary: #6b7280;
    --sv-border: #e5e7eb;
    --sv-error: #dc2626;
    --sv-success: #16a34a;
    --sv-warning: #d97706;
}

html[data-theme="dark"] {
    --sv-bg: #0d0f1c;
    --sv-surface: #161829;
    --sv-text-primary: #eef0fb;
    --sv-text-secondary: #9aa0b4;
    --sv-border: rgba(255,255,255,.1);
}

body {
    font-family: var(--sv-font) !important;
}
.fb-post-head strong, .sv-post-card-shell strong {
    font-weight: 600 !important;
}
.fb-post-head small, .post-stats {
    color: var(--sv-text-secondary) !important;
    font-size: var(--sv-text-xs) !important;
}

/* =========================================================
   Phase 3: Bottom Navigation redesign
   ========================================================= */
@media (max-width: 760px) {
    .mobile-icon-nav.instagram-mobile-nav {
        background: #ffffff !important;
        border-top: 1px solid var(--sv-border, #e5e7eb) !important;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .05) !important;
        padding: 6px 4px !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }
    html[data-theme="dark"] .mobile-icon-nav.instagram-mobile-nav {
        background: var(--sv-surface, #161829) !important;
        border-top-color: var(--sv-border, rgba(255,255,255,.1)) !important;
    }

    .mobile-icon-nav.instagram-mobile-nav a,
    .mobile-icon-nav.instagram-mobile-nav label.nav-create {
        background: transparent !important;
        color: var(--sv-text-secondary, #6b7280) !important;
    }
    .mobile-icon-nav.instagram-mobile-nav a svg {
        stroke: var(--sv-text-secondary, #6b7280) !important;
        fill: none !important;
        transition: stroke .15s ease, fill .15s ease;
    }
    .mobile-icon-nav.instagram-mobile-nav a.is-active svg {
        stroke: var(--sv-blue, #2563eb) !important;
        fill: rgba(37, 99, 235, .12) !important;
    }
    .mobile-icon-nav.instagram-mobile-nav a.is-active small {
        color: var(--sv-blue, #2563eb) !important;
        font-weight: 700 !important;
    }

    .mobile-icon-nav.instagram-mobile-nav label.nav-create svg {
        width: 26px !important;
        height: 26px !important;
        stroke: #fff !important;
    }
    .mobile-icon-nav.instagram-mobile-nav label.nav-create {
        position: relative;
        top: -6px;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed)) !important;
        box-shadow: 0 6px 16px rgba(37, 99, 235, .35) !important;
        display: grid !important;
        place-items: center !important;
    }
    .mobile-icon-nav.instagram-mobile-nav label.nav-create small {
        display: none !important;
    }

    .mobile-icon-nav.instagram-mobile-nav .nav-chat b {
        background: var(--sv-error, #dc2626) !important;
    }
}