/* Foundation styles for server-rendered pages. Keep the token subset in sync
   with web/src/styles/tokens.css until the frontend fully migrates. */
:root {
  color-scheme: light;
  --ui-ink: #30394a;
  --ui-muted: #566174;
  --ui-link: #614184;
  --ui-primary-start: #8765b4;
  --ui-primary-end: #674693;
  --ui-primary-background: linear-gradient(135deg, var(--ui-primary-start), var(--ui-primary-end));
  --ui-surface-raised: #ffffff9c;
  --ui-surface-solid: #fffdf8;
  --ui-edge: #ffffffb8;
  --ui-panel-shadow: inset 0 1px 0 #ffffffd9, 0 18px 60px #52435812;
  --ui-font: 'Proxima Nova', 'Avenir Next', Avenir, Arial, sans-serif;
  --ui-screen-background: linear-gradient(165deg, #eaf0f1 0, #f4eee2 30rem, #f2dfce 56rem);
}

* { box-sizing: border-box; scrollbar-color: #a99aad80 transparent; }
html { min-height: 100%; background: var(--ui-screen-background); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ui-ink);
  background: var(--ui-screen-background);
  font-family: var(--ui-font);
}
a { color: var(--ui-link); }

.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1.25rem;
}
.not-found-card {
  width: min(38rem, 100%);
  padding: 2.5rem 2.25rem;
  border: 1px solid var(--ui-edge);
  border-radius: 20px;
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-panel-shadow);
  text-align: center;
}
.not-found-eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.not-found-code {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  background: var(--ui-primary-background);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.not-found-card h1 { margin: 1rem 0 .75rem; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.not-found-lede { margin: 0 auto 1.75rem; max-width: 28rem; color: var(--ui-muted); line-height: 1.6; }
.not-found-links { display: grid; gap: .75rem; margin-bottom: 1.75rem; text-align: left; }
.not-found-link {
  display: grid;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--ui-edge);
  border-radius: 14px;
  background: var(--ui-surface-solid);
  color: var(--ui-ink);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.not-found-link:hover { border-color: var(--ui-link); transform: translateY(-1px); }
.not-found-link span { color: var(--ui-muted); font-size: .92rem; }
.not-found-home {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--ui-primary-background);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.not-found-home:hover { filter: brightness(1.05); }

.dev-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1.25rem;
}
.dev-error-card {
  width: min(40rem, 100%);
  padding: 2rem;
  border: 1px solid #f87171;
  border-radius: 18px;
  background: var(--ui-surface-solid);
  box-shadow: var(--ui-panel-shadow);
}
.dev-error-eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #943f4a;
}