/* Shared typography system — loaded after page-specific styles. */

:root {
  --type-display: clamp(42px, 4.4vw, 58px);
  --type-page-title: clamp(36px, 3.8vw, 52px);
  --type-section-title: clamp(28px, 2.8vw, 40px);
  --type-card-title: clamp(18px, 1.55vw, 22px);
  --type-body-large: 16px;
  --type-body: 14px;
  --type-body-small: 12px;
  --type-label: 10px;
  --type-leading-display: 1.06;
  --type-leading-heading: 1.18;
  --type-leading-body: 1.65;
  --type-leading-compact: 1.45;
  --type-tracking-display: -.035em;
  --type-tracking-heading: -.02em;
  --type-tracking-label: .12em;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  font-size: var(--type-body);
  font-weight: var(--weight-normal);
  line-height: var(--type-leading-body);
  word-spacing: .035em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  word-spacing: .018em;
}

button,
input,
select,
textarea {
  word-spacing: .025em;
}

button,
input,
select,
textarea {
  line-height: 1.25;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  max-width: 100%;
  margin-block-start: 0;
  font-weight: var(--weight-black);
  line-height: var(--type-leading-heading);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

p,
li,
label,
small,
dt,
dd,
summary {
  max-width: 100%;
  line-height: inherit;
  overflow-wrap: anywhere;
}

p {
  text-wrap: pretty;
}

.eyebrow,
.ls-kicker,
.login-eyebrow,
.legal-kicker {
  font-size: var(--type-label);
  font-weight: var(--weight-black);
  line-height: 1.4;
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
}

/* Public landing page */
.lenspire-site .ls-nav-links > a,
.lenspire-site .ls-nav-item > button,
.lenspire-site .ls-nav-actions > a {
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.lenspire-site .ls-hero h1 {
  font-size: var(--type-display);
  font-weight: var(--weight-black);
  line-height: var(--type-leading-display);
  letter-spacing: var(--type-tracking-display);
}

.lenspire-site :is(
  .ls-experience,
  .ls-gallery-showcase,
  .ls-ai-showcase,
  .ls-workflow-proof,
  .ls-pricing,
  .ls-studio-notes,
  .ls-faq,
  .ls-capability-heading,
  .ls-studio-showcase,
  .ls-event-engagement,
  .ls-how,
  .ls-cta
) h2 {
  font-size: var(--type-section-title);
  font-weight: var(--weight-black);
  line-height: 1.1;
  letter-spacing: var(--type-tracking-display);
}

.lenspire-site :is(
  .ls-audience-grid,
  .ls-experience-copy,
  .ls-gallery-cards,
  .ls-capability-grid,
  .ls-engagement-grid,
  .ls-steps,
  .ls-note-grid
) h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--type-tracking-heading);
}

.lenspire-site :is(
  .ls-hero-copy,
  .ls-experience-intro,
  .ls-experience-copy,
  .ls-gallery-heading,
  .ls-gallery-cards,
  .ls-ai-copy,
  .ls-capability-heading,
  .ls-capability-grid,
  .ls-studio-showcase-copy,
  .ls-event-engagement-heading,
  .ls-engagement-grid,
  .ls-steps,
  .ls-workflow-proof,
  .ls-pricing-card,
  .ls-notes-heading,
  .ls-note-grid,
  .ls-faq-heading,
  .ls-faq-list
) p {
  line-height: var(--type-leading-body);
}

.lenspire-site :is(
  .ls-experience-intro,
  .ls-gallery-heading,
  .ls-ai-copy,
  .ls-capability-heading,
  .ls-studio-showcase-copy,
  .ls-event-engagement-heading,
  .ls-workflow-proof,
  .ls-pricing-card,
  .ls-notes-heading,
  .ls-faq-heading
) > p:not(.ls-kicker) {
  font-size: var(--type-body);
}

.lenspire-site :is(.ls-gallery-cards, .ls-capability-grid, .ls-engagement-grid, .ls-steps, .ls-note-grid) p {
  font-size: var(--type-body-small);
}

.lenspire-site .ls-capability-flow-top {
  font-size: var(--type-label);
  font-weight: var(--weight-black);
  line-height: 1.4;
  letter-spacing: .1em;
}

.lenspire-site .ls-capability-flow-slide small {
  font-size: var(--type-label);
  font-weight: var(--weight-black);
  line-height: 1.4;
  letter-spacing: .09em;
}

.lenspire-site .ls-capability-flow-slide strong {
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--type-tracking-heading);
}

.lenspire-site .ls-capability-flow-slide p {
  font-size: var(--type-body-small);
  line-height: 1.55;
}

.lenspire-site .ls-capability-flow-slide em {
  font-size: var(--type-body-small);
  font-weight: var(--weight-black);
  line-height: 1;
}

.lenspire-site .ls-faq-list summary {
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
}

.lenspire-site .ls-footer-rich {
  font-size: var(--type-body-small);
  line-height: 1.6;
}

.lenspire-site .ls-footer-rich h3 {
  font-size: var(--type-body-small);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: 0;
}

/* Studio and guest workspace */
.studio-app main h1 {
  font-weight: var(--weight-black);
  line-height: var(--type-leading-display);
  letter-spacing: var(--type-tracking-display);
}

.studio-app :is(
  .studio-hero,
  .studio-page-hero,
  .event-hero,
  .event-settings-hero,
  .subscription-hero,
  .account-hero,
  .guest-results-hero
) h1 {
  font-size: var(--type-page-title);
}

.studio-app :is(
  .studio-create-copy,
  .studio-section-heading,
  .event-gallery-heading,
  .event-organize-heading,
  .subscription-section-heading,
  .subscription-history,
  .team-heading
) h2 {
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: var(--weight-black);
  line-height: 1.15;
  letter-spacing: var(--type-tracking-heading);
}

.studio-app :is(
  .studio-dashboard-card,
  .event-processing,
  .event-action,
  .event-settings-card,
  .event-settings-tool,
  .account-card,
  .event-danger
) h2 {
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--type-tracking-heading);
}

.studio-app :is(
  .studio-event-card,
  .studio-empty,
  .event-gallery-empty,
  .event-organize-card,
  .subscription-plan,
  .team-add-form
) h3 {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.studio-app :is(
  .studio-hero,
  .studio-page-hero,
  .event-hero,
  .event-settings-hero,
  .subscription-hero,
  .account-hero,
  .guest-results-hero,
  .studio-create-copy,
  .event-processing,
  .event-action,
  .event-gallery,
  .event-organize-heading,
  .event-settings-card,
  .event-settings-tool,
  .account-card,
  .team-heading
) p:not(.eyebrow) {
  line-height: var(--type-leading-body);
}

.studio-app .studio-nav-welcome,
.studio-app .event-photo .pad > b,
.studio-app .guest-result-card b,
.studio-app .event-album-list li > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-app :is(.team-member, .event-video-list, .event-photo-badges, .subscription-history-row) > * {
  min-width: 0;
}

.studio-app :is(.team-member, .event-video-list, .event-photo-badges, .subscription-history-row) {
  overflow-wrap: anywhere;
}

/* Login and account-access pages */
.login-page .login-intro h1 {
  font-size: clamp(28px, 2.7vw, 34px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: var(--type-tracking-heading);
}

.login-page .login-card h2 {
  font-size: clamp(24px, 2.25vw, 28px);
  font-weight: var(--weight-bold);
  line-height: 1.18;
  letter-spacing: var(--type-tracking-heading);
}

.login-page :is(.login-description, .login-card-heading > p:last-child) {
  line-height: var(--type-leading-body);
}

.login-page :is(.login-form, .google-button, .login-card) :is(label, input, button, a) {
  line-height: 1.35;
}

/* Legal pages */
.legal-shell h1 {
  font-size: var(--type-page-title);
  font-weight: var(--weight-black);
  line-height: var(--type-leading-display);
  letter-spacing: var(--type-tracking-display);
}

.legal-shell h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--type-tracking-heading);
}

.legal-shell p {
  font-size: var(--type-body);
  line-height: 1.7;
}

/* Public pricing */
.pricing-site .pricing-hero h1 {
  font-size: var(--type-page-title);
  font-weight: var(--weight-black);
  line-height: var(--type-leading-display);
  letter-spacing: var(--type-tracking-display);
}

.pricing-site .public-plan-heading h2 {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: var(--weight-black);
  line-height: 1.15;
  letter-spacing: var(--type-tracking-heading);
}

.pricing-site .public-plan h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--type-tracking-heading);
}

.pricing-site :is(.pricing-hero, .public-plan-heading, .public-plan, .pricing-note) p {
  line-height: var(--type-leading-body);
}

/* Visual hierarchy audit: keep section titles and primary actions consistent. */
.lenspire-site .ls-section-title h2 {
  font-size: var(--type-section-title);
  font-weight: var(--weight-black);
  line-height: 1.1;
  letter-spacing: var(--type-tracking-display);
}

.login-page .login-submit {
  font-weight: var(--weight-black) !important;
  letter-spacing: 0;
}

.studio-app .subscription-plan button,
.pricing-site .public-plan a {
  font-size: 12px;
  font-weight: var(--weight-black);
  line-height: 1.35;
}

@media (max-width: 760px) {
  :root {
    --type-display: clamp(36px, 10vw, 42px);
    --type-page-title: clamp(32px, 9vw, 40px);
    --type-section-title: clamp(28px, 8vw, 34px);
    --type-card-title: 18px;
  }

  .lenspire-site :is(
    .ls-experience,
    .ls-gallery-showcase,
    .ls-ai-showcase,
    .ls-workflow-proof,
    .ls-pricing,
    .ls-studio-notes,
    .ls-faq,
    .ls-capability-heading,
    .ls-studio-showcase,
    .ls-event-engagement,
    .ls-how,
    .ls-cta
  ) h2 {
    letter-spacing: -.025em;
  }

  .lenspire-site .ls-section-title h2 {
    font-size: var(--type-section-title);
    letter-spacing: -.025em;
  }

  .lenspire-site .ls-nav-links > a,
  .lenspire-site .ls-nav-item > button,
  .lenspire-site .ls-nav-actions > a {
    font-size: 14px;
    white-space: normal;
  }

  .lenspire-site .ls-capability-flow-slide strong {
    font-size: 15px;
  }

  .studio-app :is(
    .studio-create-copy,
    .studio-section-heading,
    .event-gallery-heading,
    .event-organize-heading,
    .subscription-section-heading,
    .subscription-history,
    .team-heading
  ) h2 {
    font-size: clamp(24px, 7.2vw, 29px);
  }

  .studio-app :is(
    .studio-dashboard-card,
    .event-processing,
    .event-action,
    .event-settings-card,
    .event-settings-tool,
    .account-card,
    .event-danger
  ) h2 {
    font-size: clamp(21px, 6.2vw, 24px);
  }

  .studio-app :is(.subscription-section-heading, .public-plan-heading) > p,
  .pricing-site .public-plan-heading > p {
    text-align: left;
  }

  .login-page .login-intro h1 {
    font-size: 28px;
  }

  .legal-shell h2 {
    font-size: 19px;
  }
}

@media (max-width: 420px) {
  :root {
    --type-display: clamp(34px, 10vw, 38px);
    --type-page-title: clamp(30px, 9vw, 36px);
    --type-section-title: clamp(26px, 8vw, 32px);
  }

  .lenspire-site .ls-hero h1,
  .studio-app main h1,
  .legal-shell h1,
  .pricing-site .pricing-hero h1 {
    letter-spacing: -.03em;
  }

  .lenspire-site :is(.ls-primary, .ls-dark-button, .ls-text-link),
  .studio-app main :is(button, .studio-button, .event-action-cta),
  .login-page :is(button, .google-button) {
    white-space: normal;
    text-align: center;
  }
}