:root {
    --ak-color-primary: #01bbb0;
    --ak-color-primary-deep: #019992;
    --ak-color-primary-muted: #e6f9f7;
    --ak-color-ink: #152028;
    --ak-color-ink-muted: #5c6b73;
    --ak-color-neutral-bg: #ffffff;
    --ak-color-surface: #f4f7f7;
    --ak-color-border: #dde5e7;
    --ak-color-danger: #c0392b;
    --ak-color-hero-fallback: #0e3a38;

    --ak-font-display: "Google Sans", system-ui, sans-serif;
    --ak-font-body: "Google Sans", system-ui, sans-serif;

    --ak-space-xs: 4px;
    --ak-space-sm: 8px;
    --ak-space-md: 16px;
    --ak-space-lg: 24px;
    --ak-space-xl: 40px;
    --ak-space-xxl: 64px;
    --ak-space-section: 50px;

    --ak-radius-sm: 4px;
    --ak-radius-md: 8px;
    --ak-radius-lg: 12px;

    --ak-z-dropdown: 100;
    --ak-z-sticky: 150;
    --ak-z-drawer: 200;
    --ak-z-modal-backdrop: 300;
    --ak-z-modal: 310;

    --ak-header-inner-max: 1280px;
    --ak-header-inner-padding: 20px;

    --ak-font-size-label: 0.8125rem;
    --ak-font-size-ui: 0.875rem;
    --ak-font-size-body: 1rem;
    --ak-font-size-title: 1.125rem;
    --ak-font-size-headline: 1.375rem;
    --ak-font-size-display: 1.8rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ak-color-ink);
    font-family: var(--ak-font-body);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--ak-color-neutral-bg);
}

.ak-site-main {
    min-height: 50vh;
}

@media (min-width: 768px) {
    :root {
        --ak-space-section: 75px;
    }
}