/* ==========================================================
   GetPro Design
   Design Tokens
   Version: 1.0
========================================================== */

:root {

    /* -------------------------------------------------------
       COLORS
    ------------------------------------------------------- */

    --color-primary: #111111;
    --color-secondary: #2A2A2A;

    --color-accent: #FF7A00;
    --color-accent-hover: #E66A00;
    --color-accent-light: #FFF4EB;

    --color-white: #FFFFFF;
    --color-surface: #F8F9FB;
    --color-surface-alt: #F3F4F6;

    --color-border: #E5E7EB;

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* -------------------------------------------------------
       TEXT
    ------------------------------------------------------- */

    --text-heading: #1D1D1D;
    --text-body: #555555;
    --text-light: #888888;
    --text-white: #FFFFFF;

    /* -------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------- */

    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

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

    /* Font Sizes */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.5rem;

    /* -------------------------------------------------------
       SPACING (8px System)
    ------------------------------------------------------- */

    --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;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-30: 120px;
    --space-40: 160px;

    /* -------------------------------------------------------
       BORDER RADIUS
    ------------------------------------------------------- */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --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 20px 60px rgba(0,0,0,.10);

    --shadow-hover: 0 25px 60px rgba(255,122,0,.18);

    /* -------------------------------------------------------
       TRANSITIONS
    ------------------------------------------------------- */

    --transition-fast: .25s ease;

    --transition-normal: .4s ease;

    --transition-slow: .7s ease;

    /* -------------------------------------------------------
       CONTAINER
    ------------------------------------------------------- */

    --container-width: 1320px;

    --header-height: 90px;

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

    --z-dropdown: 999;

    --z-sticky: 1000;

    --z-fixed: 1010;

    --z-modal: 1050;

    --z-loader: 9999;

}