/* Design tokens, reset and page shell */

:root {
  --paper: #eef2f4;
  --paper-strong: #ffffff;
  --paper-deep: #e5ebee;
  --ink: #1d2a30;
  --ink-soft: #3d4d57;
  --muted: #5b6d77;
  --line: rgba(29, 42, 48, 0.14);
  --rust: #b6624e;
  --rust-soft: #d3947d;
  --sage: #447a6f;
  --amber: #a77b2a;
  --clay: #be5b4e;
  --shadow: rgba(15, 23, 31, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

body {
  min-height: 100vh;
  background: var(--paper);
}

.app-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 18px 42px;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 560px) {
  .app-shell {
    padding-top: 18px;
    padding-bottom: 28px;
  }
}