/* ============================================================
   DesiMall — Design System Variables
   Brand colors derived from logo (orange-red gradient)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* ── Brand Colors (from logo) ─────────────────────── */
    --primary:        #FF6B00;   /* Orange — main brand     */
    --primary-dark:   #E55A00;   /* Darker orange — hover   */
    --primary-light:  #FF8C38;   /* Lighter orange          */
    --accent:         #FFB800;   /* Gold/Yellow — secondary  */
    --accent-dark:    #E6A500;   /* Darker gold             */
    --danger:         #E53935;   /* Red — alerts/delete     */
    --danger-dark:    #C62828;   /* Darker red              */
    --success:        #10B981;   /* Green                   */
    --success-dark:   #059669;   /* Darker green            */
    --warning:        #F59E0B;   /* Amber                   */
    --info:           #3B82F6;   /* Blue                    */

    /* ── Background & Surface ────────────────────────── */
    --bg:             #0D0F14;   /* Darkest — page bg        */
    --bg-2:           #111318;   /* Slightly lighter         */
    --card-bg:        #161A24;   /* Card background          */
    --card-bg-2:      #1C2133;   /* Elevated card            */
    --sidebar-bg:     #13161F;   /* Sidebar                  */
    --header-bg:      rgba(13,15,20,0.95); /* Header glass  */

    /* ── Border ──────────────────────────────────────── */
    --border:         rgba(255,107,0,0.12);
    --border-hover:   rgba(255,107,0,0.35);
    --border-active:  rgba(255,107,0,0.6);
    --border-muted:   rgba(255,255,255,0.06);

    /* ── Text ────────────────────────────────────────── */
    --text-main:      #F1F5F9;
    --text-sub:       #CBD5E1;
    --text-muted:     #64748B;
    --text-faint:     #374151;

    /* ── Gradients ───────────────────────────────────── */
    --grad-brand:     linear-gradient(135deg, #FF6B00, #E53935);
    --grad-gold:      linear-gradient(135deg, #FFB800, #FF6B00);
    --grad-card:      linear-gradient(145deg, #1C2133, #161A24);
    --grad-hero:      linear-gradient(135deg, rgba(255,107,0,0.15), rgba(229,57,53,0.1), transparent);

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
    --shadow-brand:   0 4px 20px rgba(255,107,0,0.25);
    --shadow-card:    0 2px 12px rgba(0,0,0,0.4);

    /* ── Glow Effects ────────────────────────────────── */
    --glow-primary:   0 0 20px rgba(255,107,0,0.3);
    --glow-accent:    0 0 20px rgba(255,184,0,0.3);

    /* ── Border Radius ───────────────────────────────── */
    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      18px;
    --radius-xl:      24px;
    --radius-full:    9999px;

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

    /* ── Typography ──────────────────────────────────── */
    --font:           'Outfit', sans-serif;
    --text-xs:        0.75rem;    /* 12px */
    --text-sm:        0.875rem;   /* 14px */
    --text-base:      1rem;       /* 16px */
    --text-lg:        1.125rem;   /* 18px */
    --text-xl:        1.25rem;    /* 20px */
    --text-2xl:       1.5rem;     /* 24px */
    --text-3xl:       1.875rem;   /* 30px */
    --text-4xl:       2.25rem;    /* 36px */

    /* ── Transitions ─────────────────────────────────── */
    --transition:     all 0.2s ease;
    --transition-slow: all 0.35s ease;

    /* ── Z-Index Scale ───────────────────────────────── */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ── Layout ──────────────────────────────────────── */
    --header-height:   64px;
    --sidebar-width:   260px;
    --max-width:       1400px;
    --content-width:   1200px;
}