/* ═══════════════════════════════════════════════════════════════════════════
   LUMEN PRO — Design Tokens
   Premium light-first, dark switchable. Mevcut CSS variable pattern'i ile
   uyumlu (themes/pulse-light + themes/neon-cyber) — drop-in replacement.

   Renk felsefesi:
   • Beyaz/krem zemin (Buzzoid premium light) — temiz, güvenli, lüks
   • Violet → Pink → Amber gradient — büyüme, enerji, ödül duygusu
   • Emerald yeşil — güvenlik, başarı, "verified" ipucu
   • Hiç saturate olmayan jet-black — luxury dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --bg-primary:      #FBFAFD;        /* page background — warm off-white */
    --bg-secondary:    #FFFFFF;        /* primary cards */
    --bg-card:         #FFFFFF;
    --bg-card-hover:   #F5F3FB;
    --bg-input:        #F7F5FC;
    --bg-elevated:     #FFFFFF;
    --bg-mesh:         #F0EDF8;        /* subtle ambient blocks */

    /* ── Borders & dividers ────────────────────────────────────────────── */
    --border:          rgba(15, 13, 38, 0.08);
    --border-strong:   rgba(15, 13, 38, 0.14);
    --divider:         rgba(15, 13, 38, 0.06);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text-primary:    #0E0B26;        /* near-black, indigo undertone */
    --text-secondary:  #4A4763;
    --text-muted:      #7B7895;
    --text-inverse:    #FFFFFF;

    /* ── Brand accents ─────────────────────────────────────────────────── */
    --accent:          #7C3AED;        /* primary violet */
    --accent-light:    #A78BFA;
    --accent-dark:     #5B21B6;
    --accent-glow:     rgba(124, 58, 237, 0.22);

    --pink:            #EC4899;
    --pink-light:      #F472B6;
    --pink-glow:       rgba(236, 72, 153, 0.22);

    --amber:           #F59E0B;
    --amber-light:     #FBBF24;
    --amber-glow:      rgba(245, 158, 11, 0.22);

    /* ── Semantic ──────────────────────────────────────────────────────── */
    --success:         #10B981;
    --success-light:   #34D399;
    --success-bg:      #ECFDF5;
    --success-glow:    rgba(16, 185, 129, 0.20);

    --warning:         #F59E0B;
    --warning-bg:      #FFFBEB;

    --danger:          #EF4444;
    --danger-bg:       #FEF2F2;
    --danger-glow:     rgba(239, 68, 68, 0.18);

    --info:            #3B82F6;
    --info-bg:         #EFF6FF;

    /* ── Service-specific tints (followers/likes/views/ai) ──────────────── */
    --svc-followers:   #6366F1;
    --svc-likes:       #EC4899;
    --svc-views:       #F59E0B;
    --svc-story:       #8B5CF6;
    --svc-ai:          #14B8A6;

    /* ── Gradients (the heart of Lumen Pro) ─────────────────────────────── */
    --gradient-main:   linear-gradient(135deg, #7C3AED 0%, #EC4899 60%, #F59E0B 100%);
    --gradient-cta:    linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --gradient-warm:   linear-gradient(135deg, #EC4899 0%, #F59E0B 100%);
    --gradient-cool:   linear-gradient(135deg, #6366F1 0%, #7C3AED 100%);
    --gradient-trust:  linear-gradient(135deg, #1E1B4B 0%, #4338CA 100%);
    --gradient-success:linear-gradient(135deg, #10B981 0%, #14B8A6 100%);
    --gradient-mesh:
        radial-gradient(at 8% 0%, rgba(124,58,237,0.10) 0%, transparent 50%),
        radial-gradient(at 92% 18%, rgba(236,72,153,0.08) 0%, transparent 55%),
        radial-gradient(at 50% 100%, rgba(245,158,11,0.06) 0%, transparent 50%);

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-xs:       8px;
    --radius-sm:       12px;
    --radius:          16px;
    --radius-lg:       22px;
    --radius-xl:       28px;
    --radius-full:     9999px;

    /* ── Shadows — layered depth ───────────────────────────────────────── */
    --shadow-xs:       0 1px 2px rgba(15,13,38,0.04);
    --shadow-sm:       0 1px 3px rgba(15,13,38,0.05), 0 2px 6px rgba(15,13,38,0.04);
    --shadow:          0 2px 8px rgba(15,13,38,0.06), 0 8px 24px rgba(15,13,38,0.06);
    --shadow-md:       0 4px 12px rgba(15,13,38,0.08), 0 12px 36px rgba(15,13,38,0.06);
    --shadow-lg:       0 8px 24px rgba(15,13,38,0.10), 0 24px 60px rgba(15,13,38,0.08);
    --shadow-xl:       0 16px 48px rgba(15,13,38,0.14), 0 32px 80px rgba(15,13,38,0.10);
    --shadow-cta:      0 6px 20px rgba(124,58,237,0.30), 0 14px 40px rgba(236,72,153,0.18);
    --shadow-glow:     0 0 0 1px rgba(124,58,237,0.20), 0 8px 32px rgba(124,58,237,0.18);
    --shadow-success:  0 4px 16px rgba(16,185,129,0.20), 0 8px 32px rgba(16,185,129,0.10);

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display:    'Cabinet Grotesk', 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body:       'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:           11px;
    --fs-sm:           12.5px;
    --fs-base:         14px;
    --fs-md:           16px;
    --fs-lg:           18px;
    --fs-xl:           22px;
    --fs-2xl:          28px;
    --fs-3xl:          36px;
    --fs-4xl:          48px;
    --fs-5xl:          64px;
    --fs-display:      80px;

    /* ── Spacing scale ─────────────────────────────────────────────────── */
    --sp-1:            4px;
    --sp-2:            8px;
    --sp-3:            12px;
    --sp-4:            16px;
    --sp-5:            20px;
    --sp-6:            24px;
    --sp-8:            32px;
    --sp-10:           40px;
    --sp-12:           48px;
    --sp-16:           64px;
    --sp-20:           80px;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --bottom-nav-h:    68px;
    --topbar-h:        56px;
    --safe-bottom:     env(safe-area-inset-bottom, 0px);
    --safe-top:        env(safe-area-inset-top, 0px);
    --container:       1180px;

    /* ── Motion ────────────────────────────────────────────────────────── */
    --ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:        140ms;
    --dur:             220ms;
    --dur-slow:        420ms;
}

/* ═══ Dark mode — premium midnight aurora ═════════════════════════════════
   Strategy: deep saturated indigo base, but cards lift with brightness +
   visible borders so hierarchy reads. Gradients stay vivid but with
   pre-multiplied alpha so they don't blow out against dark. */
html[data-theme="dark"] {
    --bg-primary:      #07061A;          /* near-black w/ violet undertone */
    --bg-secondary:    #0E0D29;          /* section bands */
    --bg-card:         #1A1942;          /* cards lift visibly off bg */
    --bg-card-hover:   #25234F;
    --bg-input:        #12112E;
    --bg-elevated:     #211F4D;
    --bg-mesh:         #100E2D;

    --border:          rgba(167, 139, 250, 0.16);
    --border-strong:   rgba(167, 139, 250, 0.28);
    --divider:         rgba(255, 255, 255, 0.06);

    --text-primary:    #F8F7FF;
    --text-secondary:  #C9C5E8;
    --text-muted:      #8B87B5;
    --text-inverse:    #07061A;

    --accent:          #C4B5FD;          /* lifted: violet-300 reads better on dark */
    --accent-light:    #DDD6FE;
    --accent-dark:     #A78BFA;
    --accent-glow:     rgba(196, 181, 253, 0.42);

    --pink:            #F9A8D4;
    --pink-light:      #FBCFE8;

    --amber:           #FCD34D;
    --amber-light:     #FDE68A;

    --success:         #34D399;
    --success-bg:      rgba(52, 211, 153, 0.16);

    --danger:          #F87171;
    --danger-bg:       rgba(248, 113, 113, 0.14);

    /* Brighter gradients for dark — pre-lifted to compensate for missing ambient light */
    --gradient-main:   linear-gradient(135deg, #C4B5FD 0%, #F9A8D4 50%, #FCD34D 100%);
    --gradient-cta:    linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
    --gradient-warm:   linear-gradient(135deg, #F9A8D4 0%, #FCD34D 100%);
    --gradient-cool:   linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
    --gradient-success:linear-gradient(135deg, #34D399 0%, #2DD4BF 100%);

    /* Aurora cranked up on dark — was 18%, now 32% so the mesh glow actually reads */
    --gradient-mesh:
        radial-gradient(at 8% 0%, rgba(167,139,250,0.32) 0%, transparent 55%),
        radial-gradient(at 92% 18%, rgba(244,114,182,0.26) 0%, transparent 55%),
        radial-gradient(at 50% 100%, rgba(251,191,36,0.18) 0%, transparent 50%),
        radial-gradient(at 70% 50%, rgba(99,102,241,0.18) 0%, transparent 60%);

    --shadow-xs:       0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm:       0 1px 3px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
    --shadow:          0 2px 8px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.4);
    --shadow-md:       0 4px 12px rgba(0,0,0,0.6), 0 12px 36px rgba(0,0,0,0.45);
    --shadow-lg:       0 8px 24px rgba(0,0,0,0.65), 0 24px 60px rgba(0,0,0,0.5);
    /* Dark shadows — toned down so CTA + logo don't read as "neon billboard" */
    --shadow-cta:      0 4px 14px rgba(167,139,250,0.28), 0 10px 28px rgba(244,114,182,0.16);
    --shadow-glow:     0 0 0 1px rgba(196,181,253,0.22), 0 0 18px rgba(167,139,250,0.18);
    --shadow-success:  0 4px 14px rgba(52,211,153,0.22);
}

/* Subtle lift only — no more drop-shadow halo on dark */
html[data-theme="dark"] .t-grad {
    filter: drop-shadow(0 1px 6px rgba(196, 181, 253, 0.12));
}

/* Cards on dark get a subtle inner highlight (mimics premium glass) */
html[data-theme="dark"] .card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%);
}

/* Input fields need a stronger contrast ring on dark */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
    color: var(--text-primary);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}