/* Base variables (uses your existing tokens) */
:root {
  --container-max: 72rem;        /* ~1152px */
  --container-pad:  clamp(16px, 4vw, 32px);
  --radius-xl:      1.25rem;
  --shadow-soft:    0 10px 30px rgba(0,0,0,.06);
  --text-muted:     color-mix(in srgb, var(--text-base) 72%, transparent);
  --link-underline: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

/* Respect dark mode if your tokens switch */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  }
}

/* ===================== */
/* 404 page (matches DS) */
/* ===================== */
.error-page{ 
  min-height:100svh; 
  background:var(--bg-soft); 
  display:grid; 
  grid-template-rows:auto 1fr auto; 
}

.error-section{ 
  padding:2.5rem 0; 
}
@media (min-width:900px){
  .error-section{ padding:3.5rem 0; }
}

/* Centered card using your tokens */
.error-card{
  background:var(--card-bg);
  border:1px solid var(--ring);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:1.5rem;
  text-align:center;
  width:100%;
  max-width:680px;
  margin:0 auto;
}
@media (min-width:600px){
  .error-card{ padding:2rem; }
}

/* Icon circle to replace emoji */
.error-icon{
  width:64px; height:64px; margin:0 auto .75rem;
  display:grid; place-items:center; border-radius:50%;
  background: color-mix(in srgb, var(--primary-color) 12%, #fff);
  border:1px solid var(--ring);
}
.error-icon svg{ width:32px; height:32px; color:var(--primary-color); }

/* Headings + copy use your type scale */
.error-title{ 
  font-size:2rem; line-height:1.15; margin:.25rem 0 .5rem;
}
@media (min-width:600px){
  .error-title{ font-size:clamp(1.9rem, 1.3rem + 1.2vw, 2.4rem); }
}
.error-lead{ 
  color:var(--text-secondary); 
  line-height:1.65; 
  margin:0 0 1rem;
}

/* Links & actions use your buttons */
.error-actions{ 
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:.5rem;
}
.error-actions .btn{ min-width:220px; }

/* Inline link style consistent with site */
.error-inline a{
  color:var(--primary-color); 
  font-weight:600; 
  text-decoration:none; 
  border-bottom:1px solid currentColor;
}
.error-inline a:hover{ opacity:.9; }