:root {
    color-scheme: light;
    --kw-brand: #4f866b;
    --kw-brand-strong: #3f6f59;
    --kw-brand-soft: #eef4ed;
    --kw-brand-wash: #e7f0e8;
    --kw-brand-line: #cbddce;
    --kw-brand-muted: #86a893;
    --kw-brand-rgb: 79, 134, 107;
    --kw-ink: #2f3932;
    --kw-ink-rgb: 47, 57, 50;
    --kw-text: #667168;
    --kw-muted: #89928a;
    --kw-line: #e2e6de;
    --kw-line-rgb: 226, 230, 222;
    --kw-surface: #fffefa;
    --kw-surface-soft: #f5f6f1;
    --kw-page-bg: #faf9f5;
    --kw-shadow-sm: 0 3px 14px rgba(47, 57, 50, 0.045);
    --kw-shadow-md: 0 12px 34px rgba(47, 57, 50, 0.075);
}

html,
body {
    accent-color: var(--kw-brand);
}

::selection {
    color: #fff;
    background: var(--kw-brand);
}

:where(a, button, input, textarea, select):focus-visible {
    outline-color: rgba(var(--kw-brand-rgb), 0.48);
}