/*
  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);
}

/* Sign in with Delic button + "or use email" divider (hand-written, same as Tailwind output; no Node needed). */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-silver { border-color: var(--silver); }
.bg-silver { background-color: var(--silver); }
.bg-silver\/20 { background-color: rgb(197 200 206 / 0.2); }
.text-charcoal { color: var(--charcoal); }
.w-full { width: 100%; }
.h-px { height: 1px; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.rounded-xl { border-radius: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-bold { font-weight: 700; }
.tracking-widest { letter-spacing: 0.1em; }
.no-underline { text-decoration-line: none; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.hover\:bg-cream:hover { background-color: var(--cream); }
.hover\:border-cream:hover { border-color: var(--cream); }