/* =====================================================
   EAGLE FURNITURE NGARA
   DESIGN SYSTEM
   Version: 2.0
===================================================== */

:root{

    /* ==========================================
       BRAND COLORS
    ========================================== */

    --color-primary:#5D4037;
    --color-primary-dark:#493129;
    --color-primary-light:#7A5A4F;

    --color-secondary:#E7D8C9;

    --color-accent:#C89B3C;

    /* ==========================================
       NEUTRAL COLORS
    ========================================== */

    --color-white:#FFFFFF;

    --color-background:#F8F7F5;

    --color-surface:#FFFFFF;

    --color-border:#E5E7EB;

    --color-text:#232323;

    --color-text-light:#6B7280;

    /* ==========================================
       TYPOGRAPHY
    ========================================== */

    --font-family:'Poppins',sans-serif;

    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;
    --font-extra-bold:800;

    /* ==========================================
       FONT SIZES
    ========================================== */

    --fs-xs:0.75rem;
    --fs-sm:0.875rem;
    --fs-base:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:2rem;
    --fs-4xl:2.8rem;
    --fs-5xl:4rem;

    /* ==========================================
       SPACING SYSTEM
    ========================================== */

    --space-1:8px;
    --space-2:16px;
    --space-3:24px;
    --space-4:32px;
    --space-5:48px;
    --space-6:64px;
    --space-7:96px;
    --space-8:120px;

    /* ==========================================
       LAYOUT
    ========================================== */

    --container-width:1200px;

    --navbar-height:80px;

    /* ==========================================
       BORDER RADIUS
    ========================================== */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:28px;

    --radius-pill:999px;

    /* ==========================================
       SHADOWS
    ========================================== */

    --shadow-sm:0 4px 12px rgba(0,0,0,.05);

    --shadow-md:0 12px 30px rgba(0,0,0,.08);

    --shadow-lg:0 24px 60px rgba(0,0,0,.12);

    /* ==========================================
       TRANSITIONS
    ========================================== */

    --transition-fast:.2s ease;

    --transition:.35s ease;

    --transition-slow:.5s ease;

}