/* Global styles for the Avara RSVP microsite.
   One small sheet: the pages are two forms, and a design system here is
   cheaper than component styles that drift apart. Everything sizes in rem so
   the page follows the browser's text size, and the layout holds at 320px. */

:root {
  color-scheme: light dark;

  /* The same register as the app (ADR-0056): ink on paper, and colour only
     where it means something. These are the iOS semantic colours written out,
     because CSS has no equivalent to `label` or `systemGroupedBackground` — so
     they live here, in one place, rather than being scattered as literals. A
     form on a grouped background with white cards is what Settings and
     Contacts look like, and this microsite is a form. */
  --paper: #f2f2f7;
  --card: #ffffff;
  --ink: #1c1c1e;
  --ink-muted: #6c6c70;
  --line: #c6c6c8;

  /* apple.com's blue rather than iOS's #0088FF: white on it clears 4.5:1,
     which #0088FF does not, and this is a web page where a button's label is
     the only thing carrying the action. */
  --accent: #0071e3;
  --accent-ink: #ffffff;

  --danger: #d70015;
  --danger-wash: #fff2f2;
  --focus: #0071e3;
  --radius: 0.75rem;

  /* Two faces, the same two the printed keepsake uses. The system face for
     everything you *do*, and New York for the names — which is the only
     warmth a page about somebody's wedding needs, and the thing that makes
     the invitation, the app and the printed chart look like one product. */
  --font-body:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: ui-serif, 'New York', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --card: #1c1c1e;
    --ink: #f2f2f7;
    --ink-muted: #98989f;
    --line: #38383a;
    --accent: #0a84ff;
    --accent-ink: #ffffff;
    --danger: #ff6961;
    --danger-wash: #2a1416;
    --focus: #64b5ff;
  }
}

* {
  box-sizing: border-box;
}

/* The page hides and reveals things with the `hidden` attribute rather than a
   class, so that "not shown" and "not announced" stay the same fact. The UA
   sheet's `display: none` for it is only a default, and several rules below
   set `display` on the very elements that get hidden — this makes the
   attribute win, which is what every author who writes `hidden` means. */
[hidden] {
  display: none !important;
}

/* Cross-document transitions between the entry page and a household's page.
   Ignored where it is unsupported, which is the whole reason it can be one
   line rather than a script. */
@view-transition {
  navigation: auto;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* The names, in the display face. This is the one editorial note on the page
   and it is deliberately the only one — everything else is the system's. */
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.lede {
  color: var(--ink-muted);
  margin: 0 0 2rem;
}

a {
  color: var(--accent);
}

/* Forms ------------------------------------------------------------------ */

.field {
  margin-block-end: 1.5rem;
}

label,
legend {
  display: block;
  font-weight: 600;
  padding: 0;
  margin-block-end: 0.375rem;
}

input[type='text'],
input[type='email'],
select,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card);
}

textarea {
  resize: vertical;
}

input#invitation-code {
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;
}

.hint {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0.375rem 0 0;
}

.error {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--danger);
  margin: 0.5rem 0 0;
}

.actions {
  display: flex;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* 17px semibold is the iOS button size, and it is also what puts this over
   WCAG's large-text threshold — so the 3:1 bar applies rather than 4.5:1, and
   the accent clears it in both appearances. The size is the accessibility
   argument, not just the look. */
button {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

button[type='button'] {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A visible focus ring everywhere, including on the radio labels, which are
   the real target on touch. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.status {
  color: var(--ink-muted);
}