/* ======================================================
   GAME TRAINING CLUB
   BASE SYSTEM
   Variables + Reset + Base HTML
   ====================================================== */

/* ======================================================
   DESIGN TOKENS
   ====================================================== */

:root{

/* HEADER */
--header-height:180px;

/* COLORS */
--color-gold:#D4AF37;
--color-black:#0A0A0A;
--color-dark:#161616;
--color-white:#FFFFFF;
--color-silver:#C6C6C6;

--color-border:rgba(255,255,255,0.08);
--color-border-gold:rgba(212,175,55,0.18);

/* TYPO SCALE */
--text-xs:clamp(.75rem,.8vw,.8rem);
--text-sm:clamp(.85rem,1vw,.95rem);
--text-base:clamp(1rem,1.2vw,1.1rem);
--text-lg:clamp(1.2rem,1.5vw,1.3rem);
--text-xl:clamp(1.6rem,2.5vw,2rem);
--text-2xl:clamp(2rem,4vw,2.8rem);
--text-3xl:clamp(2.5rem,5vw,3.6rem);

/* FONTS */
--font-main:"Inter",sans-serif;
--font-title:"Playfair Display",serif;

/* CONTAINERS */
--container-max:1600px;
--container-wide:1400px;
--container-content:1200px;

/* RADIUS */
--radius-sm:2px;
--radius-md:8px;
--radius-lg:16px;
--radius-pill:999px;

/* SHADOWS */
--shadow-soft:0 10px 30px rgba(0,0,0,.25);
--shadow-strong:0 30px 60px rgba(0,0,0,.8);

/* TRANSITIONS */
--transition-fast:.25s ease;
--transition-smooth:.6s cubic-bezier(.16,1,.3,1);

/* SPACING */
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:32px;
--space-5:48px;
--space-6:80px;

/* Z-INDEX */
--z-base:1;
--z-hero:2;
--z-overlay:10;
--z-header:1000;
--z-backdrop:1040;
--z-nav:1050;
--z-toggle:1100;
--z-lightbox:2000;

}


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

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
}

body{
font-family:var(--font-main);
background:var(--color-black);
color:var(--color-white);
line-height:1.6;
overflow-x:hidden;
text-rendering:optimizeLegibility;
}

body.nav-open{
overflow:hidden;
}

img,
picture,
video,
canvas,
svg{
display:block;
max-width:100%;
height:auto;
}

button,
input,
textarea,
select{
font:inherit;
}

button{
border:0;
}

a{
text-decoration:none;
color:inherit;
}


/* ======================================================
   ACCESSIBILITY
   ====================================================== */

:focus-visible{
outline:2px solid var(--color-gold);
outline-offset:4px;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}

.sr-only.focusable:focus,
.sr-only:focus{
position:fixed;
top:20px;
left:20px;
width:auto;
height:auto;
margin:0;
padding:10px 20px;
background:black;
color:white;
z-index:9999;
clip:auto;
clip-path:none;
overflow:visible;
white-space:normal;
}


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

h1,
h2,
h3{
text-wrap:balance;
}

p{
text-wrap:pretty;
}


/* ======================================================
   PERFORMANCE
   ====================================================== */

img,
video{
height:auto;
max-width:100%;
}

@media (prefers-reduced-motion:reduce){

html{
scroll-behavior:auto;
}

*,
*::before,
*::after{
animation:none !important;
transition:none !important;
}

}