:root{
/* ---------- VARIABLES ---------- */
/* colors */
--c-bg:#0A0A0A;
--c-text:#E0E0E0;
--c-primary:#00B4FF;
--c-success:#39FF14;
--c-warning:#FFD60A;
--c-danger:#FF3B30;
--c-neutral-50:#121212;
--c-neutral-100:#1A1A1A;
--c-neutral-200:#2C2C2E;
--c-neutral-300:#3A3A3C;
--c-neutral-400:#48484A;
--c-neutral-500:#636366;
--c-neutral-600:#8E8E93;
--c-neutral-700:#AEAEB2;
--c-neutral-800:#C7C7CC;
--c-neutral-900:#F2F2F7;

/* typography */
--ff-base:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--ff-mono:"JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
--fs-xs:0.75rem;
--fs-sm:0.875rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:1.25rem;
--fs-2xl:1.5rem;
--fs-3xl:1.875rem;
--fs-4xl:2.25rem;
--fs-5xl:3rem;
--lh-tight:1.25;
--lh-normal:1.5;
--lh-relaxed:1.75;

/* spacing */
--space-0:0;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--space-20:5rem;
--space-24:6rem;
--space-32:8rem;
--space-40:10rem;
--space-48:12rem;
--space-56:14rem;
--space-64:16rem;
--space-72:18rem;
--space-80:20rem;
--space-96:24rem;

/* radius/shadows/motion */
--radius:0.375rem;
--radius-lg:0.5rem;
--shadow-sm:0 1px 2px 0 rgba(0,0,0,.5);
--shadow-md:0 4px 6px -1px rgba(0,0,0,.6),0 2px 4px -2px rgba(0,0,0,.6);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,.7),0 4px 6px -4px rgba(0,0,0,.7);
--shadow-glow:0 0 12px var(--c-primary);
--duration:200ms;
--timing:ease-out;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
body{line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
#root,#__next{isolation:isolate}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html:focus-within{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- BASE ---------- */
body{
font-family:var(--ff-base);
font-size:var(--fs-base);
background-color:var(--c-bg);
color:var(--c-text);
}
h1,h2,h3,h4,h5,h6{
font-weight:600;
line-height:var(--lh-tight);
margin-bottom:var(--space-4);
}
h1{font-size:var(--fs-5xl)}
h2{font-size:var(--fs-4xl)}
h3{font-size:var(--fs-3xl)}
h4{font-size:var(--fs-2xl)}
h5{font-size:var(--fs-xl)}
h6{font-size:var(--fs-lg)}
p{margin-bottom:var(--space-4);max-width:65ch}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- UTILITIES ---------- */
.container{
width:100%;
max-width:80rem;
margin-inline:auto;
padding-inline:var(--space-4);
}
@media(min-width:768px){
.container{padding-inline:var(--space-8)}
}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.grid{display:grid;gap:var(--space-4)}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* ---------- COMPONENTS ---------- */
.btn{
--btn-bg:var(--c-primary);
--btn-color:#000;
display:inline-flex;align-items:center;justify-content:center;
font-weight:600;
padding:var(--space-3) var(--space-5);
border-radius:var(--radius);
background:var(--btn-bg);
color:var(--btn-color);
border:1px solid transparent;
cursor:pointer;
transition:background var(--duration) var(--timing),box-shadow var(--duration) var(--timing);
}
.btn:hover{box-shadow:var(--shadow-glow)}
.btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn--ghost{
--btn-bg:transparent;
--btn-color:var(--c-primary);
border-color:var(--c-primary);
}
.btn--ghost:hover{background:var(--c-primary);color:#000}

input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
width:100%;
padding:var(--space-3) var(--space-4);
font-size:var(--fs-base);
background:var(--c-neutral-100);
color:var(--c-text);
border:1px solid var(--c-neutral-300);
border-radius:var(--radius);
transition:border-color var(--duration) var(--timing),box-shadow var(--duration) var(--timing);
}
input:focus,textarea:focus,select:focus{
outline:none;
border-color:var(--c-primary);
box-shadow:0 0 0 2px var(--c-primary);
}

.card{
background:var(--c-neutral-50);
border:1px solid var(--c-neutral-200);
border-radius:var(--radius-lg);
padding:var(--space-6);
box-shadow:var(--shadow-md);
}