:root {
    /* Typography */
    --ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Brand and semantic colours */
    --ds-color-accent: #ef3124;
    --ds-color-accent-strong: #c9251a;
    --ds-color-accent-hover: #ad1f17;
    --ds-color-accent-on-dark: #ff756c;
    --ds-color-focus: #0068d9;
    --ds-color-accent-soft: #fff0ee;
    --ds-color-text: #191919;
    --ds-color-text-muted: #666;
    --ds-color-line: #dedede;
    --ds-color-page: #f4f4f2;
    --ds-color-surface: #fff;
    --ds-color-surface-soft: #f2f2f2;
    --ds-color-inverse: #303236;
    --ds-color-footer: #26282b;
    --ds-color-on-inverse: #fff;
    --ds-color-on-inverse-muted: #c7c7c7;

    /* Spacing: all component values are assembled from this 4/8px scale. */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 32px;
    --ds-space-8: 40px;
    --ds-space-9: 48px;
    --ds-space-10: 56px;
    --ds-space-11: 64px;
    --ds-space-12: 72px;
    --ds-space-13: 96px;

    /* Layout rhythm */
    --ds-gutter-mobile: 20px;
    --ds-gutter-desktop: 32px;
    --ds-section-compact: 56px;
    --ds-section-mobile: 60px;
    --ds-section-standard: 72px;
    --ds-section-desktop: 96px;
    --ds-footer-top: 56px;
    --ds-footer-bottom-mobile: 120px;
    --ds-footer-bottom-desktop: 64px;

    /* Shape */
    --ds-radius-small: 8px;
    --ds-radius-control: 14px;
    --ds-radius-card: 18px;
    --ds-radius-feature: 20px;
    --ds-radius-round: 999px;

    /* Motion */
    --ds-ease-out: cubic-bezier(.23, 1, .32, 1);
    --ds-duration-press: 140ms;
    --ds-duration-ui: 180ms;
}