/* ============================================================
   DesignoFly Studio — Design System V2
   "Ethereal Dark" — Inspired by Linear, Vercel, Raycast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Colors: Deep Space Palette ─────────────────── */
    --color-bg:             #050507;
    --color-bg-raised:      #0a0a0f;
    --color-bg-card:        rgba(255, 255, 255, 0.03);
    --color-bg-card-hover:  rgba(255, 255, 255, 0.06);
    --color-bg-glass:       rgba(255, 255, 255, 0.04);
    --color-bg-glass-hover: rgba(255, 255, 255, 0.08);
    --color-bg-subtle:      #0c0c12;

    /* Accent: Luminous violet → cyan */
    --color-accent-1:       #a855f7;
    --color-accent-2:       #6366f1;
    --color-accent-3:       #06b6d4;
    --color-accent-warm:    #f97316;

    --color-text:           #ffffff;
    --color-text-2:         #cbd5e1;
    --color-text-3:         #94a3b8;
    --color-text-ghost:     #64748b;
    --color-text-muted:     #94a3b8;

    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-hover:   rgba(255, 255, 255, 0.16);
    --color-border-glow:    rgba(168, 85, 247, 0.35);

    /* ── Gradients ──────────────────────────────────── */
    --gradient-accent:      linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
    --gradient-text:        linear-gradient(135deg, #e2e2e8 20%, #a1a1aa 80%);
    --gradient-card-border: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(99,102,241,0.1), rgba(6,182,212,0.2));
    --gradient-glow:        radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);

    /* ── Typography ─────────────────────────────────── */
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-bangla:          'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    --text-xs:    clamp(0.7rem,  0.65rem + 0.25vw, 0.75rem);
    --text-sm:    clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
    --text-base:  clamp(0.9rem,  0.85rem + 0.25vw, 1rem);
    --text-lg:    clamp(1rem,    0.95rem + 0.25vw, 1.125rem);
    --text-xl:    clamp(1.1rem,  1rem + 0.5vw, 1.25rem);
    --text-2xl:   clamp(1.25rem, 1rem + 1vw, 1.5rem);
    --text-3xl:   clamp(1.5rem,  1rem + 1.5vw, 2rem);
    --text-4xl:   clamp(2rem,    1.5rem + 2vw, 2.75rem);
    --text-5xl:   clamp(2.5rem,  1.5rem + 3vw, 3.75rem);
    --text-6xl:   clamp(3rem,    2rem + 4vw, 5rem);
    --text-7xl:   clamp(3.5rem,  2rem + 5vw, 7rem);

    /* ── Spacing ────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ─────────────────────────────────────── */
    --container-max:     1200px;
    --container-narrow:  720px;
    --container-padding: clamp(1rem, 4vw, 2rem);

    /* ── Effects ────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    --shadow-glow-sm:  0 0 20px rgba(168, 85, 247, 0.15);
    --shadow-glow-md:  0 0 40px rgba(168, 85, 247, 0.12);
    --shadow-glow-lg:  0 0 80px rgba(168, 85, 247, 0.1);
    --shadow-float:    0 20px 60px rgba(0, 0, 0, 0.5);

    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:     cubic-bezier(0.4, 0, 0, 1);
    --dur-fast:        150ms;
    --dur-normal:      300ms;
    --dur-slow:        600ms;

    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-header:    500;
    --z-search:    600;
}