/*
 * The placeholder pages of work order #5. Only Layar variables from layar.css.
 * The real apps replace these pages: the consumer web in #13 and the CMS in #14.
 */
* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--layar-color-ground);
  color: var(--layar-color-text-primary);
  font-family: var(--layar-font-family-ui);
}

header {
  height: var(--layar-layout-web-header-height);
  display: flex;
  align-items: center;
  gap: var(--layar-space-12);
  padding: 0 var(--layar-layout-web-margin);
  border-bottom: var(--layar-border-width-hairline) solid var(--layar-color-border-divider-subtle);
}

.wordmark {
  font-size: var(--layar-typography-web-wordmark-font-size);
  line-height: var(--layar-typography-web-wordmark-line-height);
  font-weight: var(--layar-typography-web-wordmark-font-weight);
  letter-spacing: var(--layar-typography-web-wordmark-letter-spacing);
}

.wordmark span { color: var(--layar-color-accent-saga); }

.badge {
  padding: var(--layar-space-4) var(--layar-space-8);
  border: var(--layar-border-width-hairline) solid var(--layar-color-border-badge);
  border-radius: var(--layar-radius-pill);
  color: var(--layar-color-text-secondary);
  font-size: var(--layar-typography-web-access-font-size);
  line-height: var(--layar-typography-web-access-line-height);
}

main {
  flex: 1;
  padding: var(--layar-layout-web-hero-to-rows) var(--layar-layout-web-margin);
  max-width: calc(var(--layar-layout-web-hero-text-width) + 2 * var(--layar-layout-web-margin));
}

h1 {
  margin: 0 0 var(--layar-space-16);
  font-family: var(--layar-font-family-title);
  font-weight: var(--layar-font-weight-medium);
  font-size: var(--layar-typography-phone-title-fallback-font-size);
  line-height: var(--layar-typography-phone-title-fallback-line-height);
  letter-spacing: var(--layar-typography-phone-title-fallback-letter-spacing);
}

p {
  margin: 0 0 var(--layar-space-12);
  font-size: var(--layar-typography-web-body-hero-font-size);
  line-height: var(--layar-typography-web-body-hero-line-height);
  color: var(--layar-color-text-secondary);
}

p.note {
  font-size: var(--layar-typography-web-secondary-font-size);
  line-height: var(--layar-typography-web-secondary-line-height);
  color: var(--layar-color-text-tertiary);
}

@media (max-width: 600px) {
  header, main { padding-left: var(--layar-layout-phone-margin); padding-right: var(--layar-layout-phone-margin); }
  main { padding-top: var(--layar-space-36); }
}