/*==========================================================
ACMOBOOK DESIGN SYSTEM
==========================================================*/

:root{

--header-height:82px;

--announcement-height:40px;

--search-width:620px;

--border:#edf1f7;

--primary:#6C63FF;

--secondary:#00C6FF;

--text:#111827;

--muted:#6B7280;

--shadow:

0 10px 30px rgba(15,23,42,.08);

--gradient:

linear-gradient(135deg,#6C63FF,#28C7FA);



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

--primary:#6C63FF;
--primary-dark:#5648F5;
--primary-light:#EEF2FF;

--secondary:#06B6D4;
--secondary-light:#ECFEFF;

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

--white:#FFFFFF;

--background:#F8FAFC;
--surface:#FFFFFF;
--surface-2:#F1F5F9;

--text:#0F172A;
--text-light:#334155;
--muted:#64748B;

--border:#E2E8F0;
--border-light:#EDF2F7;

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

--gradient-primary:
linear-gradient(
135deg,
#6C63FF 0%,
#8B5CF6 50%,
#06B6D4 100%
);

--gradient-light:
linear-gradient(
135deg,
#F8FAFC,
#FFFFFF
);

--gradient-card:
linear-gradient(
180deg,
rgba(255,255,255,.95),
rgba(255,255,255,.90)
);

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

--shadow-xs:
0 2px 6px rgba(15,23,42,.04);

--shadow-sm:
0 8px 24px rgba(15,23,42,.06);

--shadow-md:
0 18px 40px rgba(15,23,42,.08);

--shadow-lg:
0 30px 80px rgba(15,23,42,.12);

--shadow-xl:
0 45px 100px rgba(15,23,42,.16);

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

--radius-xs:8px;
--radius-sm:12px;
--radius-md:16px;
--radius-lg:20px;
--radius-xl:28px;
--radius-round:999px;

/*==========================================================
HEADER
==========================================================*/

--header-height:90px;
--announcement-height:30px;

--container:1440px;

--section-space:100px;

/*==========================================================
ANIMATION
==========================================================*/

--transition-fast:.18s;

--transition:.30s cubic-bezier(.4,0,.2,1);

--transition-slow:.45s cubic-bezier(.4,0,.2,1);

}

/*==========================================================
RESET
==========================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

font-size:15px;

background:var(--background);

color:var(--text);

line-height:1.5;

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

button{

border:none;

outline:none;

background:none;

cursor:pointer;

font-family:inherit;

}

input{

font-family:inherit;

outline:none;

}

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

.container-xl{

width:100%;

max-width:var(--container);

margin:auto;

padding:0 28px;

}