/*
 * NestPrep's public site. Every colour, size and radius is a custom property on
 * :root, here and nowhere else (FE-02). The colours mirror the app's
 * `app/lib/design/tokens/nest_colors.dart` by name, light and dark
 * (design-system ADR-0008); `functions/test/unit/site_is_generated.test.ts`
 * fails when they drift.
 */

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --color-canvas: #fff8ed;
  --color-surface: #f5e9d7;
  --color-surface-tint: #efe1cc;
  --color-outline: #d6c2a8;
  --color-outline-strong: #cdb89e;
  --color-ink: #35252e;
  --color-ink-secondary: #6e5f65;
  --color-ink-tertiary: #6e5f65;
  --color-accent: #35252e;
  --color-accent-pressed: #4a3842;
  --color-on-accent: #fff8ed;
  --color-accent-soft: #e4eadc;
  --color-accent-ink: #465c48;
  --color-secondary: #f57b91;
  --color-on-secondary: #35252e;
  --color-secondary-soft: #fcdde2;
  --color-secondary-ink: #9e2f47;
  --color-highlight: #f57b91;
  --color-success: #3d6343;
  --color-success-soft: #e2ebdb;
  --color-warning: #7a5200;
  --color-warning-soft: #faebc0;
  --color-danger: #b4232f;
  --color-danger-soft: #fbe1de;
  --color-on-danger: #fff8ed;
  --color-tile-guava: #f9b6c2;
  --color-tile-basil: #c4d4bf;
  --color-tile-lilac: #c9bce8;
  --color-tile-butter: #f3d886;
  --color-chrome: #35252e;
  --color-on-chrome: #fff8ed;
  --color-on-chrome-muted: #d9cbc6;

  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --text-display: 2rem;
  --text-headline: 1.5rem;
  --text-title: 1.125rem;
  --text-body: 1rem;
  --text-label: 0.875rem;
  --text-caption: 0.8125rem;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-huge: 48px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --control-height: 48px;
  --focus-ring: 3px;
  --measure-prose: 44rem;
  --measure-page: 66rem;
  --mark-hero: 96px;
  --mark-header: 36px;
  --wordmark-header: 1.5rem;
  --tracking-display: -0.02em;
  --tracking-wordmark: -0.04em;
  --duration-short: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #211a20;
    --color-surface: #2e252c;
    --color-surface-tint: #3a2f37;
    --color-outline: #54444d;
    --color-outline-strong: #6a5862;
    --color-ink: #fff8ed;
    --color-ink-secondary: #cdbfc4;
    --color-ink-tertiary: #b8a9af;
    --color-accent: #fff8ed;
    --color-accent-pressed: #eadfd0;
    --color-on-accent: #35252e;
    --color-accent-soft: #2f3a30;
    --color-accent-ink: #b3cdb4;
    --color-secondary: #f57b91;
    --color-on-secondary: #35252e;
    --color-secondary-soft: #4e2c37;
    --color-secondary-ink: #ffa5b5;
    --color-highlight: #f57b91;
    --color-success: #9acfa3;
    --color-success-soft: #243327;
    --color-warning: #f3d886;
    --color-warning-soft: #3d3420;
    --color-danger: #ff9b9b;
    --color-danger-soft: #4a2529;
    --color-on-danger: #2a0e12;
    --color-tile-guava: #5c2f3c;
    --color-tile-basil: #2f4031;
    --color-tile-lilac: #40375a;
    --color-tile-butter: #4d4227;
    --color-chrome: #3a2f37;
    --color-on-chrome: #fff8ed;
    --color-on-chrome-muted: #d9cbc6;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent-ink);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-ink);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

h1 {
  font-size: var(--text-display);
}

h2 {
  font-size: var(--text-headline);
  margin-top: var(--space-huge);
}

h3 {
  font-size: var(--text-title);
  margin-top: var(--space-xxl);
}

p,
ul {
  margin: 0 0 var(--space-lg);
}

ul {
  padding-left: var(--space-xxl);
}

li + li {
  margin-top: var(--space-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-lg);
  top: calc(-1 * var(--space-huge) * 2);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-lg);
  color: var(--color-on-accent);
}

.wrap {
  width: 100%;
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.wrap--prose {
  max-width: var(--measure-prose);
}

.site-header {
  border-bottom: 1px solid var(--color-outline);
  background: var(--color-canvas);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  min-height: var(--control-height);
}

.brand__mark {
  width: var(--mark-header);
  height: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: var(--wordmark-header);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  color: var(--color-ink);
}

.wordmark--large {
  font-size: calc(var(--wordmark-header) * 2);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--text-label);
  color: var(--color-ink-secondary);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--color-ink);
  text-decoration: underline;
}

main {
  display: block;
  padding: var(--space-xxxl) 0 var(--space-huge);
}

.site-footer {
  border-top: 1px solid var(--color-outline);
  padding: var(--space-xxl) 0;
  color: var(--color-ink-secondary);
  font-size: var(--text-label);
}

.site-footer .site-nav a {
  font-weight: 500;
}

.site-footer p {
  margin: var(--space-md) 0 0;
}

/* Landing */

.hero {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  text-align: center;
  justify-items: center;
  padding-bottom: var(--space-xxxl);
}

.hero__mark {
  width: var(--mark-hero);
}

.hero h1 {
  max-width: 22ch;
}

.lead {
  font-size: var(--text-title);
  color: var(--color-ink-secondary);
  max-width: 38rem;
  margin: 0 auto;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.badges li + li {
  margin-top: 0;
}

.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--control-height);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline);
  background: var(--color-surface);
  line-height: 1.3;
}

.badge__store {
  font-weight: 700;
}

.badge__status {
  font-size: var(--text-caption);
  color: var(--color-ink-secondary);
}

.section {
  padding: var(--space-xxxl) 0 0;
}

.section > h2 {
  margin-top: 0;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: var(--space-xxl) 0 0;
}

.cards li + li {
  margin-top: 0;
}

.card {
  height: 100%;
  padding: var(--space-xxl);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
}

.card h3 {
  margin-top: 0;
}

.card p {
  margin: 0;
  color: var(--color-ink-secondary);
}

.card--lunch {
  background: var(--color-tile-guava);
  border-color: transparent;
}

.card--lunch p {
  color: var(--color-ink);
}

.tile-guava {
  background: var(--color-tile-guava);
}

.tile-basil {
  background: var(--color-tile-basil);
}

.tile-lilac {
  background: var(--color-tile-lilac);
}

.tile-butter {
  background: var(--color-tile-butter);
}

.panel {
  padding: var(--space-xxl);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel--accent {
  background: var(--color-accent-soft);
  border-color: transparent;
}

/* Legal documents */

.doc-meta {
  color: var(--color-ink-secondary);
  font-size: var(--text-label);
  margin-bottom: var(--space-xxl);
}

.toc {
  margin: 0 0 var(--space-xxxl);
}

.toc h2 {
  font-size: var(--text-title);
  margin-top: 0;
}

.toc ul {
  margin: 0;
}

.prose h2 {
  scroll-margin-top: var(--space-lg);
}

.placeholder {
  background: var(--color-warning-soft);
  color: var(--color-ink);
  border-radius: 4px;
  padding: 0 0.2em;
  outline: 1px dashed var(--color-warning);
}

/* The deletion form */

.field {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.field label,
.field .label {
  font-weight: 600;
  font-size: var(--text-label);
}

.field .hint {
  font-size: var(--text-caption);
  color: var(--color-ink-secondary);
}

input[type='email'],
input[type='password'],
select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-md) var(--space-lg);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-ink-secondary);
  border-radius: var(--radius-sm);
}

textarea {
  min-height: calc(var(--control-height) * 2.5);
  resize: vertical;
}

.check {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}

.check input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--color-accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-xxl);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-on-danger);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button:hover {
  filter: brightness(0.95);
}

.button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.button--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-outline-strong);
}

/* The consent page an assistant sends a member to (assistants ADR-0002) */

.connect-scopes {
  border: 0;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

.connect-scopes legend {
  font-weight: 600;
  font-size: var(--text-label);
  margin-bottom: var(--space-md);
}

.connect-or {
  color: var(--color-ink-secondary);
  margin: var(--space-xl) 0;
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.invite-code {
  font-family: var(--font-display);
  font-size: var(--text-display);
  letter-spacing: 0.12em;
  margin: var(--space-md) 0 var(--space-xl);
}

.notice {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice--success {
  background: var(--color-success-soft);
}

.notice--error {
  background: var(--color-danger-soft);
}

.notice--info {
  background: var(--color-secondary-soft);
}

.notice h2 {
  font-size: var(--text-title);
  margin-top: 0;
}

@media (min-width: 720px) {
  :root {
    --text-display: 2.5rem;
  }

  .hero {
    padding-top: var(--space-xxxl);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .button {
    transition:
      color var(--duration-short) ease,
      filter var(--duration-short) ease;
  }
}