/* Global element defaults and application body primitives. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
}

button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: var(--control-primary-bg);
  color: var(--control-primary-text);
  cursor: pointer;
  padding: 0 16px;
}

button:hover {
  background: var(--control-primary-bg-hover);
}

.page {
  width: min(1120px, calc(100% - 32px));
  margin: 32px auto;
}

.dashboard-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30%),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 26%),
    linear-gradient(135deg, var(--surface-page) 0%, var(--surface-page-tint) 52%, var(--surface-page) 100%);
}

.dashboard-page input,
.dashboard-page select,
.dashboard-page textarea {
  color: var(--text-primary);
}

.dashboard-page :where(h1, h2, h3, label) {
  color: var(--text-primary);
}