/*
  Prefer `npm run build:css` (Tailwind).
  This file is committed so the site is not unstyled if Tailwind has not been built yet.
  Tokens: charcoal + silver (both Visidelic and Aurisity).
  Instadelic keeps gold. Lyridelic keeps blue.
*/

:root {
  --canvas: #1c1a17;
  --charcoal: #1c1a17;
  --cream: #e8eaed;
  --silver: #c5c8ce;
  --muted: #8a8e96;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html.h-full,
body.min-h-full {
  height: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--cream);
  font-family: ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bg-canvas { background-color: var(--canvas); }
.bg-charcoal { background-color: var(--charcoal); }
.text-cream { color: var(--cream); }
.text-silver { color: var(--silver); }
.text-muted { color: var(--muted); }
.font-serif { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; }
.antialiased { -webkit-font-smoothing: antialiased; }

.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-silver\/40 { border-color: rgb(197 200 206 / 0.4); }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; }
.max-w-xl { max-width: 36rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 2rem; }

.flex { display: flex; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.mt-6 { margin-top: 1.5rem; }

.day-label { width: 7.5rem; flex: 0 0 7.5rem; }
.bar-track {
  flex: 1;
  height: 0.45rem;
  background: rgb(197 200 206 / 0.15);
  align-self: center;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--silver);
}

.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.uppercase { text-transform: uppercase; }

.underline { text-decoration: underline; }
.decoration-silver\/40 { text-decoration-color: rgb(197 200 206 / 0.4); }

.hidden { display: none; }
@media (min-width: 640px) {
  .sm\:block { display: block; }
}

.space-y-4 > * + * { margin-top: 1rem; }
.block { display: block; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.max-w-md { max-width: 28rem; }

select,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  color: var(--cream);
  background: #141311;
  border: 1px solid rgb(197 200 206 / 0.35);
  font: inherit;
}

button {
  cursor: pointer;
  font: inherit;
  background: transparent;
}

.errorlist {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  color: var(--silver);
}