/* Opt-in reference foundations for Home, Branding and AI Workflow.
   Shared tokens stay here; component styles live with their owners.
   See docs/mobile-layout-2026.md and AGENTS.md. */

@media screen and (max-width: 767px) {
  [data-mobile-layout="2026"] {
    --mobile-hero-title-size: 1.875rem;
    --mobile-hero-title-tracking: -.0375rem;
  }
}

[data-mobile-layout="2026"] {
  /* Legacy global declarations inherit the approved reference scale only here.
     These names are compatibility aliases, not additions to the authoring scale. */
  --1: var(--2);
  --18: var(--20);
  --28: var(--24);
  --34: var(--32);
  --100: var(--104);
  /* A decorative stroke is independent of the spacing scale. */
  --stroke-hairline: 1px;
  --type-section-size: 3.5rem;
  --type-section-weight: 600;
  --type-label-size: 1.375rem;
  --type-label-leading: 1.4;
  --type-body-size: 1rem;
  --type-compact-leading: 1.6;
  --type-small-size: .875rem;
  --type-impact-size: 2.5rem;
  --type-impact-leading: 1.2;
  --type-cta-copy-size: 1.25rem;
  --type-quote-size: 2rem;
  --type-quote-prominent-size: 2.5rem;
  --type-quote-leading: 1.3;
  --type-card-title-size: 1.5rem;
  --type-card-title-leading: 1.2;
  font-family: Suisse, Arial, sans-serif;
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: 1.6;
}

@media screen and (max-width: 991px) {
  [data-mobile-layout="2026"] {
    --type-section-size: 2.5rem;
    --type-label-size: 1.125rem;
    --type-label-leading: 1;
    --type-body-size: .875rem;
    --type-small-size: .75rem;
    --type-impact-size: 1.75rem;
    --type-cta-copy-size: 1rem;
    --type-quote-size: 1.75rem;
    --type-quote-prominent-size: 2rem;
    --type-card-title-size: 1.25rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  [data-mobile-layout="2026"] {
    --type-hero-tablet-size: 2.875rem;
  }
}

@media screen and (max-width: 767px) {
  [data-mobile-layout="2026"] {
    --type-section-size: 1.5rem;
    --type-section-weight: 500;
    --type-label-size: .9375rem;
    --type-body-size: .75rem;
    --type-compact-leading: 1.4;
    --type-impact-size: 1.125rem;
    --type-cta-copy-size: .75rem;
    --type-quote-size: 1.125rem;
    --type-quote-prominent-size: var(--type-quote-size);
    --type-quote-leading: 1.2;
    --type-card-title-size: 1rem;
    --type-card-title-leading: 1.1;
  }
}

[data-mobile-layout="2026"] {
  --space-page-inline: var(--20);
  --space-section-major: var(--180);
  --space-label-heading: var(--16);
  --space-heading-content: var(--64);
  --space-heading-content-wide: var(--80);
  --space-card-inline: var(--40);
  --space-metric-block: var(--32);
  --space-metric-gap: var(--24);
  --space-reasons-letters: calc(var(--80) * 2);
  --space-letters-results: var(--104);
  /* Keep the existing split around the decorative Love letters stack. */
  --space-reasons-end: var(--80);
  --space-letters-end: var(--80);
}

@media screen and (max-width: 991px) {
  [data-mobile-layout="2026"] {
    --space-page-inline: var(--32);
    --space-section-major: var(--112);
    --space-label-heading: var(--12);
    --space-heading-content: var(--56);
    --space-heading-content-wide: var(--64);
    --space-card-inline: var(--24);
    --space-metric-block: var(--20);
    --space-metric-gap: var(--16);
    --space-reasons-letters: var(--112);
    --space-letters-results: var(--64);
    --space-reasons-end: var(--56);
    --space-letters-end: var(--56);
  }
}

@media screen and (max-width: 767px) {
  [data-mobile-layout="2026"] {
    --space-page-inline: var(--16);
    --space-section-major: var(--80);
    --space-label-heading: var(--10);
    --space-heading-content: var(--40);
    --space-heading-content-wide: var(--40);
    --space-card-inline: var(--16);
    --space-metric-block: var(--16);
    --space-metric-gap: var(--8);
    --space-reasons-letters: var(--80);
    --space-letters-results: var(--80);
    --space-reasons-end: var(--16);
    --space-letters-end: var(--40);
  }
}

[data-mobile-layout="2026"] {
  --radius-card: .75rem;
}


@media screen and (max-width: 991px) {
  [data-mobile-layout="2026"] {
    /* The 768px preset has a 16.32px root. Retain fluid rem scaling while
    resolving this approved tablet radius to exactly 8px at that width. */
    --radius-card: calc(.5rem / 1.02);
  }
}

@media screen and (max-width: 767px) {
  [data-mobile-layout="2026"] {
    --radius-card: .5rem;
  }
}

@media screen and (min-width: 768px) {
  .page-ai-workflow[data-mobile-layout="2026"] {
    --type-impact-leading: 1.3;
  }
}

@media screen and (max-width: 767px) {
  .page-branding-redesign[data-mobile-layout="2026"] {
    --space-reasons-end: var(--0);
    --space-letters-end: var(--0);
  }
}