:root {
    color-scheme: light;
    --df-color-brand-900: #102f2b;
    --df-color-brand-800: #173f3a;
    --df-color-brand-700: #1f625a;
    --df-color-brand-600: #246f66;
    --df-color-accent-500: #d3aa45;
    --df-color-accent-300: #f0ca68;
    --df-color-text: #17221f;
    --df-color-text-muted: #5b6b66;
    --df-color-surface: #ffffff;
    --df-color-surface-soft: #f5f7f4;
    --df-color-surface-warm: #f6f3eb;
    --df-color-border: #dce5e0;
    --df-color-focus: #0b6b60;
    --df-font-sans: Arial, Helvetica, sans-serif;
    --df-font-size-body: 1rem;
    --df-line-height-body: 1.65;
    --df-content-width: 71.25rem;
    --df-space-1: 0.25rem;
    --df-space-2: 0.5rem;
    --df-space-3: 0.75rem;
    --df-space-4: 1rem;
    --df-space-5: 1.5rem;
    --df-space-6: 2rem;
    --df-space-7: 3rem;
    --df-radius-sm: 0.5rem;
    --df-radius-md: 0.75rem;
    --df-radius-lg: 1.5rem;
    --df-shadow-soft: 0 1rem 2.875rem rgba(31, 58, 50, 0.06);
    --df-touch-target: 2.75rem;

    /* Compatibility aliases while older public styles are migrated. */
    --df-green: var(--df-color-brand-800);
    --df-green-2: var(--df-color-brand-700);
    --df-ink: var(--df-color-text);
    --df-muted: var(--df-color-text-muted);
    --df-gold: var(--df-color-accent-500);
    --df-cream: var(--df-color-surface-warm);
    --df-line: var(--df-color-border);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--df-color-surface);
    color: var(--df-color-text);
    font-family: var(--df-font-sans);
    font-size: var(--df-font-size-body);
    line-height: var(--df-line-height-body);
    text-rendering: optimizeLegibility;
}

:root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px var(--df-color-focus) !important;
}

:where(main, section, article, nav, footer, [id]) {
    scroll-margin-top: 6rem;
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(img, svg) {
    max-width: 100%;
}

::selection {
    background: var(--df-color-accent-300);
    color: var(--df-color-text);
}

@media (max-width: 48rem) {
    :where(input, select, textarea) {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    :root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid CanvasText !important;
        box-shadow: none !important;
    }
}