/*
========================================
ZHARFA DESIGN TOKENS
Version: 1.0.0
Purpose:
- Global Design Tokens
- No component styles
- No element styles
========================================
*/

:root {

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

    --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 */

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

    --radius-none: 0;
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 9999px;

    /* ==========================
       ELEVATION
    ========================== */

    --elevation-1: 0 2px 8px var(--shadow-light);
    --elevation-2: 0 8px 24px var(--shadow-medium);
    --elevation-3: 0 16px 40px var(--shadow-medium);
    --elevation-4: 0 24px 64px var(--shadow-strong);

    /* ==========================
       BORDER WIDTH
    ========================== */

    --border-thin: 1px;
    --border-medium: 2px;

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

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* ==========================
       CONTAINER
    ========================== */

    --container-max-width: 1200px;

    --container-padding-mobile: 1rem;
    --container-padding-tablet: 1.25rem;
    --container-padding-desktop: 1.5rem;

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

    --header-height: 5rem;
    --bottom-nav-height: 4.5rem;

    /* ==========================
       Z-INDEX
    ========================== */

    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 500;
    --z-offcanvas: 900;
    --z-modal: 1000;
    --z-toast: 1100;

}