/* styles.css — Material-flavored theme + accessibility helpers */

/* Typography (use system fonts for best performance & privacy) */
:root{
  --primary: #0d6efd; /* bootstrap primary */
  --surface: #ffffff;
  --muted: #6c757d;
  --radius-lg: 12px;
}

/* Body */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-color: #f8f9fa;
  color: #212529;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Cards with gentle "Material" feel */
.card{
  border: none;
  border-radius: var(--radius-lg);
}

/* Navbar */
.navbar-brand {
  font-weight:600;
}

/* Hero button */
.btn-primary{
  background: linear-gradient(180deg, var(--primary), #054bbf);
  border: none;
  box-shadow: 0 6px 18px rgba(13,110,253,0.12);
}

/* Accessible focus ring for interactive elements */
:focus{
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 2px;
}

/* Small responsive tweaks */
@media (min-width:1200px){
  header .display-6 { font-size:2.3rem; }
}

/* Utilities */
.small-muted { color: var(--muted); font-size:0.9rem; }