/* Spotted has five text styles. Reuse these roles instead of local font rules. */
:root {
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-editorial: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --type-title: 400 2.25rem/1.15 var(--font-editorial);
  --type-heading: 400 1.5rem/1.25 var(--font-editorial);
  --type-body: 400 1rem/1.5 var(--font);
  --type-label: 500 1rem/1.5 var(--font);
  --type-meta: 400 .875rem/1.4 var(--font);
}

/* Nested text never introduces a sixth style through browser defaults. */
*,*::before,*::after {
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}
body { font:var(--type-body); letter-spacing:0; text-transform:none; }

/* 1 — Main title. The same size on mobile and desktop. */
h1,.brand,.display,.plan-card h2,
.workspace-screen .content h1,.onboarding-screen .content>h1,
.ready-screen .content>h1,.dashboard-title h1 {
  font:var(--type-title);
  letter-spacing:-.02em;
}

/* 2 — Section titles, navigation titles and key numbers. */
h2,h3,h4,h5,h6,.page-header h1,.hunt-header h1,.viewer-head h1,
.camera-meta h2,.editorial-couple,.invitation-preview>strong,
.stat b,.unit b,.slot-meter>strong {
  font:var(--type-heading);
  letter-spacing:-.01em;
}
.page-header h1,.hunt-header h1,.viewer-head h1,.camera-meta h2 {
  white-space:normal;
  text-wrap:wrap;
  word-break:normal;
  overflow-wrap:break-word;
}

/* 3 — Reading text, form values and explanations. */
p,.body,.instruction,.camera-style-intro,.choice-card>span,
.camera-loading,.account-notice,.slot-meter p,.toast,
input,select,textarea,option,dialog,li,td,code {
  font:var(--type-body);
  letter-spacing:0;
}

/* 4 — Every action and field label uses the same weight and size. */
button,.button,label,legend,summary,strong,b,th,.upload,.delete-photo,
.spot .name,.choice-card>strong,.permission-row strong,.plan-option strong,
.camera-style-copy b,.camera-loading strong,.payment-state,
.slot-meter>strong>span,.tabs button,.filter,.text-button,.layout-switch button {
  font:var(--type-label);
  letter-spacing:0;
}

/* 5 — Supporting details; never smaller than 14 px at the default setting. */
small,.camera-loading>span,.microcopy,.eyebrow,.subtitle,.badge,.shots,.progress-copy,
.stat span,.unit span,.camera-style-copy small,.permission-row small,
.optional,.share-link,.viewer-head p,.done-mark,.view-spot,
.spot-gallery-head p,.photo-caption,.chapter-number,.category-title>span,
.editorial-meta,.active-camera-style,.active-camera-style b,
.active-camera-style span,.wedding-card-top,.stepper small,
.preview-banner,.google-status,.splash-legal,.updated,
.invitation-preview>span,.camera-screen .page-header h1,
.demo-chrome,.demo-chrome nav a,.demo-chrome nav button,
.demo-chrome nav strong,.demo-chrome details p,.demo-chrome summary,
.demo-index .case-card p,.demo-index .open-case,.demo-index aside,
.qa-guide>main>header,.qa-guide td,.qa-guide th,.legal-page footer {
  font:var(--type-meta);
  letter-spacing:0;
}
.viewer-main::after { font:var(--type-meta); letter-spacing:0; }

/* Emphasis in titles stays in the existing role, without an italic variant. */
h1 :is(em,strong,span),h2 :is(em,strong),h3 :is(em,strong),
.brand :is(em,strong),.display :is(em,strong) { font:inherit; letter-spacing:inherit; }

/* Emoji and icon glyphs are graphics, independent of the five text roles. */
.emoji,.camera-badge,.empty-review>span,.celebration-emoji {
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-variant-emoji:emoji;
  filter:none;
}
.emoji,.camera-badge,.empty-review>span { font-size:1.75rem; line-height:1; }
.camera-meta .emoji,.viewer-head .emoji { font-size:1.25rem; }
.celebration-emoji { font-size:var(--emoji-size); line-height:1; }
.back,.icon-btn,.arrow { font:var(--type-heading); }

/* Dashboards reuse the same five roles. */
.organizer-brand,.compact-wedding .wedding-open { font:var(--type-heading); letter-spacing:-.01em; }
.account-status,.wedding-state,.disclosure-state,.photo-total { font:var(--type-meta); letter-spacing:0; }
.dialog-close,.toast-icon { font:var(--type-heading); }

.plan-price{font:var(--type-heading)}.plan-price span,.cover-edit{font:var(--type-meta)}