@tailwind base;
@tailwind components;
@tailwind utilities;

:root{color-scheme:dark}

.nav-link{display:inline-flex;align-items:center;justify-content:center;border-radius:0.75rem;padding:0.5rem 0.75rem;font-size:0.875rem;font-weight:600;color:rgb(226 232 240 / 0.9);transition:background-color .2s,color .2s,transform .2s;outline:none}
.nav-link:hover{background-color:rgb(255 255 255 / 0.06);color:#fff}
.nav-link:focus-visible{box-shadow:0 0 0 2px rgb(165 180 252 / 0.9)}

.footer-link{color:rgb(203 213 225 / 0.95);text-decoration:none;transition:color .2s;text-underline-offset:3px;outline:none}
.footer-link:hover{color:#fff;text-decoration:underline;text-decoration-color:rgb(255 255 255 / 0.3)}
.footer-link:focus-visible{box-shadow:0 0 0 2px rgb(165 180 252 / 0.9);border-radius:0.5rem}

.footer-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid rgb(255 255 255 / 0.15);background-color:rgb(255 255 255 / 0.05);padding:0.5rem 0.75rem;font-size:0.75rem;font-weight:700;color:#fff;transition:background-color .2s,transform .2s;outline:none}
.footer-pill:hover{background-color:rgb(255 255 255 / 0.1);transform:translateY(-1px)}
.footer-pill:focus-visible{box-shadow:0 0 0 2px rgb(165 180 252 / 0.9)}

.card{border-radius:1rem;border:1px solid rgb(255 255 255 / 0.1);background-color:rgb(255 255 255 / 0.05);padding:1.25rem;box-shadow:0 8px 30px rgb(0 0 0 / 0.25);transition:transform .2s,box-shadow .2s,background-color .2s}
.card:hover{transform:translateY(-3px);background-color:rgb(255 255 255 / 0.07);box-shadow:0 12px 36px rgb(0 0 0 / 0.35)}
.card:focus-within{box-shadow:0 0 0 2px rgb(165 180 252 / 0.7),0 12px 36px rgb(0 0 0 / 0.35)}

.card-icon{display:inline-flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:0.9rem;border:1px solid rgb(255 255 255 / 0.1)}
.card-title{margin-top:0.9rem;font-size:1rem;font-weight:800;color:#fff;line-height:1.35}
.card-text{margin-top:0.5rem;font-size:0.875rem;line-height:1.6;color:rgb(226 232 240 / 0.9)}

img{max-width:100%;height:auto;display:block}

:focus-visible{outline:none}

@media (prefers-reduced-motion:reduce){
  .card,.nav-link,.footer-pill{transition:none}
}