/* Modern, minimal styles for the Hajpa hello world starter */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;
  --accent:#6366f1;
  --card:#f8fafc;
  --radius:12px;
  --container:min(90ch, 96%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#071023;
  --fg:#e6eef8;
  --muted:#9aa8bf;
  --accent:#7c5cff;
  --card:#031022;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--card));
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:2rem 1rem;
}

.site-header{
  background:transparent;
  padding:0.5rem 0;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{margin:0;font-size:1.125rem;font-weight:700;letter-spacing:0.01em}

.theme-toggle{
  background:transparent;border:1px solid transparent;padding:0.4rem 0.6rem;border-radius:8px;cursor:pointer;font-size:1rem
}
.theme-toggle:focus{outline:3px solid color-mix(in srgb, var(--accent) 20%, transparent);}

.hero{flex:1;display:flex;align-items:center}
.hero h2{font-size:clamp(1.75rem,4vw,2.5rem);margin:0 0 0.25rem}
.lead{color:var(--muted);margin-top:0}

.btn{
  display:inline-block;padding:0.65rem 1rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%, black));color:white;text-decoration:none;margin-top:1rem;font-weight:600;border:none
}
.btn:focus{outline:3px solid color-mix(in srgb,var(--accent) 30%, transparent)}

.site-footer{padding:1rem 0;color:var(--muted);font-size:0.95rem}

@media (min-width:768px){
  .container{padding:3rem 1.5rem}
  .brand{font-size:1.25rem}
}