/* CONTEXT — MARKETING
   Marketing surfaces are scanned in seconds and seen once. Type runs large, sections
   breathe, controls are touch-first, and cards lose their borders because the page is
   already doing the structural work.

   Same components, same tokens, different scale and rhythm. A Card in this context is
   a content block on a landing page; in product context it is a panel in a dashboard.
   Neither Card knows the difference.

   Apply on the page shell:
     <div class="dt-context-marketing"> … </div> */

.dt-context-marketing {
  /* Display type earns its size here. */
  --dt-text-display-2xl-size: var(--dt-font-size-fluid-2xl);
  --dt-text-display-2xl-line: var(--dt-line-height-fluid);
  --dt-text-display-xl-size: var(--dt-font-size-fluid-xl);
  --dt-text-display-xl-line: var(--dt-line-height-fluid);
  --dt-text-display-lg-size: var(--dt-font-size-7xl);
  --dt-text-display-lg-line: var(--dt-line-height-7xl);
  --dt-text-display-md-size: var(--dt-font-size-6xl);
  --dt-text-display-md-line: var(--dt-line-height-6xl);

  --dt-text-heading-xl-size: var(--dt-font-size-5xl);
  --dt-text-heading-xl-line: var(--dt-line-height-5xl);
  --dt-text-heading-lg-size: var(--dt-font-size-4xl);
  --dt-text-heading-lg-line: var(--dt-line-height-4xl);
  --dt-text-heading-md-size: var(--dt-font-size-3xl);
  --dt-text-heading-md-line: var(--dt-line-height-3xl);

  /* 19px body. Long-form marketing copy is read at arm's length. */
  --dt-text-body-md-size: var(--dt-font-size-lg);
  --dt-text-body-md-line: var(--dt-line-height-lg);
  --dt-text-body-sm-size: var(--dt-font-size-md);
  --dt-text-body-sm-line: var(--dt-line-height-md);

  /* Generous rhythm. */
  --dt-space-section: var(--dt-dim-32);
  --dt-space-gutter: var(--dt-space-inset-xl);
  /* Re-declared here so a band inside this region takes its rhythm and its
     gutter, not the page's: custom properties resolve where declared. */
  --dt-layout-module-padding: var(--dt-space-section);
  --dt-layout-module-padding-md: var(--dt-layout-module-padding);
  --dt-layout-page-gutter: var(--dt-space-gutter);
  /* The module padding steps either side of this rhythm. */
  --dt-layout-module-padding-sm: var(--dt-dim-20);  /* 80 */
  --dt-layout-module-padding-lg: var(--dt-dim-40);  /* 160 */
  --dt-layout-module-padding-xl: var(--dt-dim-48);  /* 192 */
  --dt-layout-module-inset: var(--dt-dim-12);  /* 48 */
  --dt-space-stack-xl: var(--dt-dim-12);
  --dt-space-stack-2xl: var(--dt-dim-24);

  /* Larger default controls — marketing CTAs are touch-first and want presence. */
  --dt-size-control-md: var(--dt-dim-12);
  --dt-button-height-md: var(--dt-dim-12);
  --dt-button-font-size-md: var(--dt-font-size-md);
  --dt-button-padding-md: var(--dt-space-inset-lg);

  /* Borderless, softly raised content blocks. */
  --dt-card-padding: var(--dt-space-inset-xl);
  --dt-card-border-width: var(--dt-border-width-none);
  --dt-card-elevation: var(--dt-elevation-0);
  --dt-card-elevation-hover: var(--dt-elevation-2);
  --dt-card-radius: var(--dt-radius-overlay);
}