/* Shared section surfaces. Use these on sections; page sheets own composition only. */
.section-surface--base { background:var(--color-background); color:var(--color-text); }
.section-surface--white { background:var(--color-surface); color:var(--color-text); }
.section-surface--muted { background:var(--color-surface-muted); color:var(--color-text); }
.section-surface--tint { background:var(--color-surface-secondary); color:var(--color-text); }
.section-surface--accent { background:var(--color-surface-accent); color:var(--color-text); }
.section-surface--callout { background:var(--color-surface-callout); color:var(--color-text); }
.section-surface--gradient { background:var(--gradient-surface); color:var(--color-text); }

.section-surface--contrast { --color-heading:var(--color-on-contrast); --color-text:var(--color-on-contrast); --color-text-muted:var(--color-on-contrast-muted); --color-text-link:var(--color-on-contrast-accent); --color-focus:var(--color-on-contrast-accent); background:var(--color-surface-contrast); color:var(--color-on-contrast); }
.section-surface--contrast .eyebrow { color:var(--color-on-contrast-accent); }
.section-surface--contrast .button--secondary { --_button-text:var(--color-on-contrast); --_button-border:var(--color-border-contrast); --_button-hover:var(--color-surface-contrast-soft); }
.section-surface--contrast .text-link { color:var(--color-on-contrast-accent); }
.section-surface--contrast .not-contrast { --color-heading:var(--color-heading-default); --color-text:var(--color-text-default); --color-text-muted:var(--color-text-muted-default); --color-text-link:var(--color-text-link-default); --color-focus:var(--color-focus-default); color:var(--color-text); }


.page-document { max-width:var(--content-width-medium); margin-inline:auto; padding:var(--section-space) var(--page-gutter); }
.page-document p + p { margin-top:var(--space-5); }
.section-white { background: var(--color-surface); }
.section-tint { background: var(--color-surface-accent); }
.section-callout { background: var(--color-surface-callout); }
.surface-contrast { --color-heading: var(--color-on-contrast); --color-text: var(--color-on-contrast); --color-text-muted: var(--color-on-contrast-muted); --color-text-link: var(--color-on-contrast-accent); --color-focus: var(--color-on-contrast-accent); --icon-tile-bg: var(--color-surface-contrast-soft); --icon-tile-color: var(--color-highlight); color: var(--color-on-contrast); background: var(--color-surface-contrast); }
.surface-contrast .eyebrow { color: var(--color-on-contrast-accent); }