/* Preview input import is replaced by satrap_design_tokens at CMS integration. */

:root {
  --text-muted: color-mix(in srgb, var(--color-primary) 70%, var(--color-surface));
  --accent-soft: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  --accent-dark: color-mix(in srgb, var(--color-accent) 80%, black);
  --hero-shade: color-mix(in srgb, var(--color-primary) 70%, transparent);
  --shadow: 0 16px 36px color-mix(in srgb, var(--color-primary) 15%, transparent);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 88px; --space-10: 112px;
  --text-small: 12px; --text-meta: 13px; --text-nav: 14px; --text-body: 16px;
  --text-lead: 20px; --text-card: 27px; --text-subheading: 32px;
  --text-section: 50px; --text-page: 64px; --text-hero: 100px;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 600;
  --leading-tight: 1.08; --leading-heading: 1.2; --leading-body: 1.65;
  --container: 1280px; --reading: 740px; --gutter: 48px;
  --section-space: var(--space-9); --header-height: 90px;
}
@media(max-width:1024px){:root{--gutter:32px;--text-hero:80px;--text-page:54px;--text-section:44px;--header-height:80px;}}
@media(max-width:700px){:root{--gutter:20px;--section-space:var(--space-8);--text-hero:56px;--text-page:40px;--text-section:36px;--text-card:25px;--text-lead:18px;--header-height:72px;}}
@media(max-width:360px){:root{--text-hero:48px;--text-page:34px;--text-section:32px;}}