/* styles.css — Simple, modern styling with CSS variables for easy theming */
:root{
  /* Minimal palette: monochrome + single accent */
  --bg: #fbfbfc;            /* light, neutral background */
  --text: #0b1220;          /* near-black text for good contrast */
  --muted: #6b7280;         /* subtle secondary text */
  --accent: #0a84ff;        /* single clear accent for links */
  --max-width: 720px;       /* comfortable measure for readable lines */
}

/* Global reset and typography */
*{box-sizing:border-box}
html,body{height:100%}
.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}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5; /* slightly more airy */
}
.container{
  width:calc(100% - 2rem);
  max-width:var(--max-width);
  margin:0 auto;
}

/* Header */
/* Minimal centered main column */
.center{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 0;
}
.title{
  margin:0 0 0.5rem 0;
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  font-weight:600;
}
.subtitle{
  margin:0 0 1rem 0;
  color:var(--muted);
  max-width:60ch;
}

/* Minimal links instead of heavy buttons */
.links{margin:0 0 1rem 0}
.link{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.link:hover,.link:focus{text-decoration:underline}
.sep{color:var(--muted);margin:0 0.6rem}

.muted{color:var(--muted);font-size:.95rem;margin-top:1.25rem}

/* Footer */
.site-footer{
  padding:2.25rem 0 3rem 0;
  color:var(--muted);
  text-align:center;
  font-size:0.95rem;
}

/* Minimal design notes: keep CSS variables small and use spacing as a primary visual tool */

/* Responsive tweaks */
@media (max-width:520px){
  .center{padding:2.5rem 0}
}

/* Accessibility tip in comments:
 - Use :focus-visible styles in production to help keyboard users.
 - Ensure color contrast is tested with tools like axe or contrast checkers.
*/

/* Accessibility: focus-visible for keyboard users */
.btn:focus-visible{
  outline:3px solid rgba(85,230,255,0.22);
  outline-offset:4px;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}