/* ============================================================
   lelongX -- Theme / Design Tokens
   Modern 2026 aesthetic (Linear / Vercel / Stripe / Arc / Raycast)
   Dark-mode primary, vibrant accents, glassmorphism + bento layouts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* ----------- BACKGROUND LAYERS ----------- */
    --bg-base:        #0a0f1e;                       /* page background -- deepest navy */
    --bg-surface:     #111827;                       /* cards, panels */
    --bg-elevated:    #1a2235;                       /* hover state, modals */
    --bg-overlay:     rgba(15, 23, 42, 0.6);         /* glassmorphism overlays */
    --bg-glass:       rgba(17, 24, 39, 0.55);        /* blurred nav background */

    /* ----------- BORDERS ----------- */
    --border-soft:    rgba(255, 255, 255, 0.06);
    --border-strong:  rgba(255, 255, 255, 0.12);
    --border-glow:    rgba(34, 211, 238, 0.4);       /* focus rings */

    /* ----------- TEXT ----------- */
    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #64748b;
    --text-inverse:   #0a0f1e;

    /* ----------- BRAND COLORS ----------- */
    --brand-cyan:     #22d3ee;                       /* lelong */
    --brand-purple:   #a855f7;                       /* X / Academy */
    --brand-gold:     #fbbf24;                       /* Membership / highlights */
    --brand-emerald:  #10b981;                       /* AI / success */
    --brand-orange:   #f97316;                       /* Market / Mobile */
    --brand-rose:     #f43f5e;                       /* Problem / urgent */
    --brand-blue:     #3b82f6;                       /* Solution / info */

    /* Tier colors */
    --tier-bronze:    #f97316;
    --tier-silver:    #94a3b8;
    --tier-gold:      #fbbf24;
    --tier-platinum:  #22d3ee;

    /* Semantic */
    --color-success:  #10b981;
    --color-warning:  #fbbf24;
    --color-error:    #f43f5e;
    --color-info:     #3b82f6;

    /* ----------- GRADIENTS ----------- */
    --gradient-hero:    linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
    --gradient-card:    linear-gradient(180deg, rgba(34, 211, 238, 0.05) 0%, transparent 100%);
    --gradient-border:  linear-gradient(135deg, #22d3ee, #a855f7, #fbbf24);
    --gradient-mesh:
        radial-gradient(at 20% 30%, rgba(34, 211, 238, 0.15), transparent 50%),
        radial-gradient(at 80% 70%, rgba(168, 85, 247, 0.15), transparent 50%);
    --gradient-mesh-orange:
        radial-gradient(at 20% 30%, rgba(249, 115, 22, 0.12), transparent 50%),
        radial-gradient(at 80% 70%, rgba(251, 191, 36, 0.12), transparent 50%);
    --gradient-mesh-emerald:
        radial-gradient(at 20% 30%, rgba(16, 185, 129, 0.12), transparent 50%),
        radial-gradient(at 80% 70%, rgba(34, 211, 238, 0.12), transparent 50%);
    --gradient-text-cyan-purple: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);

    /* ----------- SHADOWS ----------- */
    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:           0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl:           0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-glow-cyan:    0 0 24px rgba(34, 211, 238, 0.3);
    --shadow-glow-purple:  0 0 24px rgba(168, 85, 247, 0.3);
    --shadow-glow-gold:    0 0 24px rgba(251, 191, 36, 0.3);
    --shadow-glow-emerald: 0 0 24px rgba(16, 185, 129, 0.3);
    --shadow-inner:        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* ----------- RADII ----------- */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-full: 999px;

    /* ----------- SPACING SCALE ----------- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-6:   24px;
    --space-8:   32px;
    --space-12:  48px;
    --space-16:  64px;
    --space-24:  96px;
    --space-32:  128px;

    /* ----------- TYPOGRAPHY ----------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;

    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  15px;
    --text-md:    16px;
    --text-lg:    18px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   32px;
    --text-4xl:   40px;
    --text-5xl:   48px;
    --text-6xl:   56px;
    --text-7xl:   72px;

    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tightest: -0.04em;
    --tracking-tight:    -0.03em;
    --tracking-normal:   0;
    --tracking-wide:     0.04em;
    --tracking-widest:   0.08em;

    /* ----------- TRANSITIONS ----------- */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   150ms;
    --duration-normal: 200ms;
    --duration-slow:   400ms;

    /* ----------- LAYOUT ----------- */
    --container-max:     1280px;
    --container-wide:    1440px;
    --container-gutter:  24px;
    --nav-height:        72px;
    --sidebar-width:     260px;
    --sidebar-collapsed: 64px;

    /* ----------- Z-INDEX ----------- */
    --z-base:    1;
    --z-dropdown: 10;
    --z-sticky:  20;
    --z-overlay: 50;
    --z-modal:   100;
    --z-toast:   200;
}

/* ============================================================
   BASE RESET + GLOBALS
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Mesh gradient that drifts subtly behind the whole page */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    z-index: 0;
    animation: meshFloat 32s ease-in-out infinite alternate;
}

@keyframes meshFloat {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-20px, 20px) scale(1.05); }
    100% { transform: translate(20px, -10px) scale(1); }
}

main, section, article, header, footer, nav {
    position: relative;
    z-index: 1;
}

/* ----------- TYPOGRAPHY ELEMENTS ----------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); font-weight: 700; }
h6 { font-size: var(--text-lg); font-weight: 700; }

p {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

a {
    color: var(--brand-cyan);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--brand-purple);
}

ul, ol {
    list-style-position: inside;
    color: var(--text-secondary);
}

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

/* ----------- UTILITY: GRADIENT TEXT ----------- */
.gradient-text {
    background: var(--gradient-text-cyan-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gradient-text-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------- UTILITY: MONO STAT NUMBERS ----------- */
.mono { font-family: var(--font-mono); font-weight: 700; }

/* ----------- UTILITY: SCREEN READER ONLY ----------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------- SCROLLBAR (subtle dark) ----------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-cyan);
}

/* ----------- SELECTION ----------- */
::selection {
    background: rgba(34, 211, 238, 0.3);
    color: var(--text-primary);
}

/* ----------- FOCUS RING ----------- */
:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ----------- BUTTONS BASE ----------- */
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ----------- HR / DIVIDER ----------- */
hr {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: var(--space-6) 0;
}

/* ----------- CODE INLINE ----------- */
code, kbd {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-elevated);
    color: var(--brand-cyan);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}