/*
|--------------------------------------------------------------------------
| Aanya Organics Theme
|--------------------------------------------------------------------------
| Module : Design System
| File   : variables.css
| Version: 1.0.0
|--------------------------------------------------------------------------
*/

:root {

    /* ==========================
       Brand Colors
    ========================== */

    --color-primary: #74B12F;
    --color-primary-light: #A4D65E;
    --color-brown: #745638;

    --color-background: #FCFAF6;
    --color-section: #F5F0E7;

    --color-text: #2F2F2F;
    --color-text-light: #666666;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-border: #E7DFD4;

    --color-success: #2E7D32;
    --color-warning: #F9A825;
    --color-error: #C62828;
    --color-info: #1565C0;

    /* ==========================
       Typography
    ========================== */

    --font-heading: "Manrope", sans-serif;
    --font-body: "Inter", sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 3.5rem;

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

    /* ==========================
       Font Weights
    ========================== */

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

    /* ==========================
       Layout
    ========================== */

    --container-width: 1320px;
    --container-padding: 20px;

    --header-height: 80px;

    /* ==========================
       Spacing
    ========================== */

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;

    /* ==========================
       Border Radius
    ========================== */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ==========================
       Shadows
    ========================== */

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);

    --shadow-sm: 0 4px 10px rgba(0,0,0,.06);

    --shadow-md: 0 10px 25px rgba(0,0,0,.08);

    --shadow-lg: 0 20px 45px rgba(0,0,0,.10);

    /* ==========================
       Animation
    ========================== */

    --transition-fast: .2s ease;
    --transition-normal: .3s ease;
    --transition-slow: .45s ease;

    /* ==========================
       Z-Index
    ========================== */

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
}