/* ============================================================
   GREEN STORE — Design System · CSS Variables & Tokens
   Premium Modern Tech E-Commerce | Fresh Green Identity
   ============================================================ */

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

:root {
    /* =====================
       GREEN STORE Color Palette
       60% White/Light — 25% Green — 10% Lime/Turquoise — 5% Yellow/Orange
    ===================== */

    /* Primary Green */
    --primary-green:        #16A34A;
    --primary-green-hover:  #15803D;
    --primary-green-dark:   #166534;
    --primary-green-light:  rgba(22, 163, 74, 0.08);
    --primary-green-medium: rgba(22, 163, 74, 0.15);
    --primary-green-glow:   rgba(22, 163, 74, 0.22);

    /* Dark Green */
    --dark-green:           #087F5B;
    --dark-green-hover:     #06704F;
    --dark-green-deep:      #064E3B;
    --dark-green-light:     rgba(8, 127, 91, 0.10);

    /* Lime */
    --lime:                 #84CC16;
    --lime-hover:           #65A30D;
    --lime-light:           rgba(132, 204, 22, 0.10);
    --lime-medium:          rgba(132, 204, 22, 0.20);

    /* Turquoise */
    --turquoise:            #14B8A6;
    --turquoise-hover:      #0D9488;
    --turquoise-light:      rgba(20, 184, 166, 0.10);
    --turquoise-medium:     rgba(20, 184, 166, 0.20);

    /* Yellow */
    --yellow:               #FACC15;
    --yellow-hover:         #EAB308;
    --yellow-light:         rgba(250, 204, 21, 0.12);
    --yellow-dark:          #854D0E;

    /* Orange */
    --orange:               #F97316;
    --orange-hover:         #EA580C;
    --orange-light:         rgba(249, 115, 22, 0.10);
    --orange-dark:          #9A3412;

    /* Legacy aliases — يحافظ على التوافق مع الكود القديم */
    --accent:               #16A34A;
    --accent-hover:         #15803D;
    --accent-dark:          #166534;
    --accent-light:         rgba(22, 163, 74, 0.08);
    --accent-medium:        rgba(22, 163, 74, 0.15);
    --accent-glow:          rgba(22, 163, 74, 0.22);
    --gold:                 #16A34A;
    --gold-light:           rgba(22, 163, 74, 0.10);
    --gold-dark:            #15803D;
    --primary:              #17221B;
    --primary-deep:         #0B130E;
    --primary-light:        #1A2C21;
    --primary-medium:       #2D4037;

    /* =====================
       60% — الخلفيات الفاتحة
    ===================== */
    --bg-body:              #F7FBF8;
    --bg-alt:               #EFFAF3;
    --bg-section:           #EFFAF3;
    --bg-card:              #FFFFFF;
    --bg-card-hover:        #F7FBF8;
    --bg-dark:              #064E3B;
    --bg-dark-2:            #065F46;
    --bg-dark-3:            #087F5B;

    /* =====================
       النصوص
    ===================== */
    --text-primary:         #17221B;
    --text-secondary:       #64746A;
    --text-muted:           #94A3A0;
    --text-light:           #B0C4BB;
    --text-inverse:         #FFFFFF;

    /* =====================
       الحدود
    ===================== */
    --border:               #DCE9E0;
    --border-light:         #EBF4EE;
    --border-dark:          #C8DED2;
    --border-accent:        rgba(22, 163, 74, 0.25);

    /* =====================
       السطح
    ===================== */
    --surface:              #FFFFFF;
    --surface-2:            #F7FBF8;
    --surface-3:            #EFFAF3;
    --surface-dark:         #064E3B;

    /* =====================
       الحالات
    ===================== */
    --success:              #16A34A;
    --success-light:        rgba(22, 163, 74, 0.10);
    --success-dark:         #15803D;

    --warning:              #FACC15;
    --warning-light:        rgba(250, 204, 21, 0.12);

    --danger:               #EF4444;
    --danger-light:         rgba(239, 68, 68, 0.10);
    --danger-dark:          #DC2626;

    --info:                 #14B8A6;
    --info-light:           rgba(20, 184, 166, 0.10);

    --rose:                 #F43F5E;
    --rose-light:           rgba(244, 63, 94, 0.10);

    /* =====================
       التدرجات
    ===================== */
    --gradient-accent:      linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
    --gradient-dark:        linear-gradient(135deg, #064E3B 0%, #087F5B 100%);
    --gradient-hero:        linear-gradient(160deg, #FFFFFF 0%, #F7FBF8 100%);
    --gradient-card:        linear-gradient(145deg, #FFFFFF 0%, #F7FBF8 100%);
    --gradient-shimmer:     linear-gradient(90deg, #F1F7F4 25%, #E6F2EA 50%, #F1F7F4 75%);
    --gradient-green:       linear-gradient(135deg, #16A34A 0%, #14B8A6 100%);
    --gradient-lime:        linear-gradient(135deg, #84CC16 0%, #65A30D 100%);
    --gradient-footer:      linear-gradient(160deg, #064E3B 0%, #075B3A 100%);
    /* Legacy */
    --gradient-primary:     linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
    --gradient-gold:        linear-gradient(135deg, #16A34A 0%, #22C55E 100%);

    /* =====================
       Typography — Tajawal Modern
    ===================== */
    --font-primary:         'Tajawal', sans-serif;

    /* Responsive clamp sizes */
    --fs-hero:              clamp(2.2rem, 5vw, 4rem);
    --fs-hero-sub:          clamp(1.3rem, 2.5vw, 1.75rem);
    --fs-section:           clamp(1.3rem, 2vw, 1.75rem);
    --fs-card-title:        clamp(0.8rem, 1.2vw, 0.9rem);
    --fs-price:             clamp(1rem, 1.5vw, 1.125rem);

    /* Fixed sizes */
    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.875rem;   /* 14px */
    --font-size-base:       1rem;       /* 16px */
    --font-size-lg:         1.125rem;   /* 18px */
    --font-size-xl:         1.25rem;    /* 20px */
    --font-size-2xl:        1.5rem;     /* 24px */
    --font-size-3xl:        1.875rem;   /* 30px */
    --font-size-4xl:        2.25rem;    /* 36px */
    --font-size-5xl:        3rem;       /* 48px */
    --font-size-6xl:        3.75rem;    /* 60px */

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-bold:     700;
    --font-weight-black:    900;

    --line-height-tight:    1.2;
    --line-height-normal:   1.6;
    --line-height-relaxed:  1.8;

    /* =====================
       Spacing System
    ===================== */
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* =====================
       Border Radius — Unified System
    ===================== */
    --radius-xs:    3px;
    --radius-sm:    8px;     /* Buttons, Inputs */
    --radius-md:    10px;    /* Cards small */
    --radius-lg:    16px;    /* Cards */
    --radius-xl:    20px;    /* Large containers */
    --radius-2xl:   24px;    /* Hero, Sections */
    --radius-3xl:   32px;    /* Extra large */
    --radius-full:  9999px;  /* Pills */

    /* =====================
       الظلال — Green-tinted
    ===================== */
    --shadow-xs:          0 1px 2px rgba(23, 34, 27, 0.04);
    --shadow-sm:          0 2px 6px rgba(23, 34, 27, 0.06);
    --shadow-md:          0 4px 12px rgba(23, 34, 27, 0.08);
    --shadow-lg:          0 8px 24px rgba(23, 34, 27, 0.09);
    --shadow-xl:          0 16px 48px rgba(23, 34, 27, 0.10);
    --shadow-card:        0 1px 3px rgba(22, 163, 74, 0.04), 0 2px 8px rgba(23, 34, 27, 0.04);
    --shadow-card-hover:  0 4px 20px rgba(22, 163, 74, 0.12), 0 2px 8px rgba(23, 34, 27, 0.05);
    --shadow-accent:      0 4px 16px rgba(22, 163, 74, 0.25);
    --shadow-gold:        0 4px 16px rgba(22, 163, 74, 0.25);
    --shadow-green:       0 4px 20px rgba(22, 163, 74, 0.30);

    /* =====================
       Transitions
    ===================== */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    400ms ease;
    --transition-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* =====================
       Z-Index
    ===================== */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-overlay:    600;
    --z-modal:      1000;
    --z-toast:      1100;

    /* =====================
       Layout
    ===================== */
    --container-max:      1360px;
    --container-wide:     1600px;
    --header-height:      68px;
    --topbar-height:      36px;
    --sidebar-width:      260px;
    --admin-sidebar-bg:   #064E3B;
}