/* ==========================================================================
   variables.css — design tokens (colors, base resets)
   ========================================================================== */
:root{
  --navy-950:#080b14;
  --navy-900:#0a0e1a;
  --navy-800:#0d1526;
  --navy-700:#121d33;
  --navy-600:#1a2740;
  --gold-400:#f6d383;
  --gold-500:#e0b45e;
  --gold-600:#c9973d;
  --gold-700:#b9812f;
  --cream:#f4efe4;
  --slate:#9aa8c2;
  --slate-dim:#6d7996;
  --line: rgba(246,211,131,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--cream);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
::selection{background:var(--gold-600);color:var(--navy-950);}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy-950);}
::-webkit-scrollbar-thumb{background:var(--navy-600);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-700);}

.focus-ring:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:2px;}