/* ==========================================================
   AIR FRYER PRO
   DESIGN SYSTEM
========================================================== */

:root{

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

--color-primary:#F4B400;

--color-primary-dark:#D99B00;

--color-secondary:#181818;

--color-background:#FFFDF8;

--color-surface:#FFFFFF;

--color-surface-alt:#F7F7F5;

--color-border:#E8E8E5;

--color-text:#181818;

--color-text-light:#666666;

--color-text-muted:#8A8A8A;

--color-success:#22C55E;

--color-danger:#EF4444;

--color-warning:#F59E0B;

/* ==========================================================
   GRADIENTS
========================================================== */

--gradient-primary:

linear-gradient(
135deg,
#FFD54A 0%,
#F4B400 100%
);

--gradient-dark:

linear-gradient(
180deg,
#1F1F1F 0%,
#111111 100%
);

--gradient-light:

linear-gradient(
180deg,
#FFFFFF 0%,
#F8F8F6 100%
);

}

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

:root{

--font-family:

'Inter',
sans-serif;

--font-size-xs:.75rem;

--font-size-sm:.875rem;

--font-size-md:1rem;

--font-size-lg:1.125rem;

--font-size-xl:1.375rem;

--font-size-2xl:2rem;

--font-size-3xl:3rem;

--font-size-4xl:4.5rem;

--line-height:1.7;

--font-light:300;

--font-regular:400;

--font-medium:500;

--font-semibold:600;

--font-bold:700;

--font-black:800;

}

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

:root{

--container:1280px;

--container-wide:1440px;

--header-height:88px;

--section-padding:120px;

--section-padding-mobile:80px;

--grid-gap-xs:16px;

--grid-gap-sm:24px;

--grid-gap-md:36px;

--grid-gap-lg:56px;

}

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

:root{

--radius-sm:14px;

--radius-md:22px;

--radius-lg:32px;

--radius-xl:42px;

--radius-pill:999px;

}

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

:root{

--shadow-xs:

0 5px 15px rgba(0,0,0,.04);

--shadow-sm:

0 10px 25px rgba(0,0,0,.06);

--shadow-md:

0 20px 45px rgba(0,0,0,.08);

--shadow-lg:

0 30px 70px rgba(0,0,0,.12);

--shadow-xl:

0 40px 90px rgba(0,0,0,.18);

}

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

:root{

--transition-fast:.25s ease;

--transition:.35s ease;

--transition-slow:.60s ease;

}

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

:root{

--z-header:900;

--z-menu:950;

--z-overlay:980;

--z-modal:999;

--z-tooltip:9999;

}