/* ==========================================
   MUFFIN • THE BROWN BULL
   DESIGN SYSTEM
========================================== */

:root{

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

--bg:#070707;
--bg-secondary:#111111;
--card:#161616;

--brown:#6B3E26;
--brown-light:#8B5A3C;

--gold:#D8A63A;
--gold-light:#FFD36A;

--green:#00E676;
--green-dark:#00B85C;

--white:#FFFFFF;
--offwhite:#F5F5F5;

--text:#EDEDED;
--muted:#9A9A9A;

--danger:#ff4b4b;


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

--gold-gradient:
linear-gradient(
135deg,
#FFD36A,
#D8A63A,
#8B5A3C
);

--green-gradient:
linear-gradient(
135deg,
#00E676,
#00B85C
);

--dark-gradient:
linear-gradient(
180deg,
#090909,
#111111,
#090909
);


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

--heading:'Anton',sans-serif;

--body:'Space Grotesk',sans-serif;


/*==================================
FONT SIZE
==================================*/

--fs-xs:.85rem;
--fs-sm:1rem;
--fs-md:1.15rem;
--fs-lg:1.4rem;
--fs-xl:2rem;
--fs-2xl:3rem;
--fs-3xl:5rem;
--fs-4xl:7rem;


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

--space-xs:.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:4rem;
--space-xl:6rem;
--space-2xl:8rem;


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

--radius-sm:10px;
--radius:18px;
--radius-lg:30px;
--radius-full:999px;


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

--shadow-small:
0 10px 25px rgba(0,0,0,.35);

--shadow:
0 20px 50px rgba(0,0,0,.55);

--shadow-glow:
0 0 25px rgba(216,166,58,.35);

--green-glow:
0 0 35px rgba(0,230,118,.35);


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

--transition:.35s ease;

--transition-slow:.8s ease;


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

--container:1280px;

}