/* Skyside tokens, from wednesday-pictures/design/Brand.dc.html and
   CrewCertManager ipad/.../SkysideColor.swift (light values). */
@font-face {
  font-family: "Manrope";
  src: url("/public/fonts/Manrope-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}

:root {
  color-scheme: light;

  --ground: #F7F4F1;
  --card: #FFFFFF;
  --ink: #100506;
  --ink-2: #726461;      /* secondary text, 5.2:1 on ground */
  --muted: #9A8C88;      /* strokes only, never text */
  --tint: #7A242F;
  --tint-pressed: #5E1B24;
  --on-tint: #FFFFFF;
  --tint-wash: rgba(122, 36, 47, 0.10);
  --separator: #EFE9E3;
  --track: #E6DFD8;
  --outline: #D6C9C0;
  --failure: #C42B2B;

  --r-button: 6px;
  --r-field: 6px;
  --r-card: 10px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  --font-text: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-brand: "Manrope", -apple-system, system-ui, sans-serif;

  --t-caption: 13px;
  --t-body: 17px;
  --t-label: 15px;
  --t-title: 30px;

  --control-h: 52px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.4;
}
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
input, button { font: inherit; color: inherit; }
[hidden] { display: none !important; }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-button);
  background: var(--tint);
  color: var(--on-tint);
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms var(--ease);
}
.btn:hover { background: var(--tint-pressed); }
.btn:active { background: var(--tint-pressed); transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn-quiet {
  background: transparent;
  color: var(--tint);
  padding: 0 var(--s-2);
}
.btn-quiet:hover { background: transparent; color: var(--tint-pressed); }

.err {
  display: none;
  margin-top: var(--s-1);
  font-size: var(--t-caption);
  line-height: 18px;
  color: var(--failure);
}
[aria-invalid="true"] ~ .err { display: block; }
[aria-invalid="true"] ~ .hint { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}