/* ════════════════════════════════════════════════════════════════════
   TravelZona — Core CSS (variables, reset, base typography)
   Loaded on every page via @import in style.css.
   Changes here affect the entire site. Long cache lifetime.
   ════════════════════════════════════════════════════════════════════ */

/* ============================================
   TravelZona - Complete Stylesheet
   ============================================
   Contents:
   1. CSS Variables & Theme
   2. Reset & Base
   3. Layout (header, main, footer, nav)
   4. Components (cards, buttons, inputs, modals)
   5. Home Feed (posts, stories, weather)
   6. Shorts (video page)
   7. Profile Page
   8. Marketplace
   9. Animations
   10. Responsive
   ============================================ */

/* ─── 1. CSS Variables & Theme ────────────── */

:root {
    /* Brand colors (sky blue) */
    --brand-50: #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #bae6fd;
    --brand-300: #7dd3fc;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;

    /* Accent (orange) */
    --accent-400: #fb923c;
    --accent-500: #f97316;

    /* Semantic — LIGHT MODE REDESIGNED */
    --background: #f0f4f8;          /* was #fafafa → now soft blue-gray for depth */
    --foreground: #1a202c;          /* was #0f172a → slightly warmer, better contrast */
    --card: #ffffff;                /* solid white cards pop against the blue-gray bg */
    --card-foreground: #1a202c;
    --muted: #e2e8f0;               /* was #f1f5f9 → slightly darker for better separation */
    --muted-foreground: #475569;    /* was #64748b → darker for WCAG AA contrast (7:1) */
    --border: #cbd5e1;              /* was #e2e8f0 → darker border, clearly visible */
    --input: #f1f5f9;               /* input fields slightly darker than cards */
    --ring: #0ea5e9;

    /* Status */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Radius */
    --radius: 0.75rem;

    /* Fonts */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', serif;

    /* Shadows — STRONGER for light mode depth */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

html.dark {
    --background: #09090b;
    --foreground: #fafafa;
    --card: #18181b;
    --card-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --input: #18181b;
    --ring: #0ea5e9;
}

/* Override the light-mode body gradient in dark mode */
html.dark body {
    background-image: none;
}

/* ─── 2. Reset & Base ──────────────────────── */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Removed max-width: 100% — it breaks Leaflet map tiles on desktop.
       Firefox scrollbar fix is handled by overflow-x: hidden on html/body instead. */
}

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    overflow-x: hidden; /* prevent horizontal scrollbars (Firefox yellow columns fix) */
    /* Firefox scrollbar styling (prevents the yellow default scrollbar) */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    /* Subtle gradient for depth — light mode only */
    background-image: linear-gradient(180deg, #e6edf5 0%, var(--background) 200px);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}