/* Public design tokens extend the existing site/theme variables. */
:root {
    --dmf-color-primary: var(--brand);
    --dmf-color-primary-hover: var(--brand-light);
    --dmf-color-accent: var(--accent);
    --dmf-color-text: var(--ink);
    --dmf-color-muted: var(--ink-muted);
    --dmf-color-border: var(--line);
    --dmf-color-surface: var(--surface);
    --dmf-color-ground: var(--ground);
    --dmf-font-body: "Sarabun", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
    --dmf-font-heading: var(--dmf-font-body);
    --dmf-text-sm: .875rem;
    --dmf-text-base: 1rem;
    --dmf-text-lg: 1.25rem;
    --dmf-space-1: .25rem;
    --dmf-space-2: .5rem;
    --dmf-space-3: .75rem;
    --dmf-space-4: 1rem;
    --dmf-space-6: 1.5rem;
    --dmf-space-8: 2rem;
    --dmf-space-12: 3rem;
    --dmf-radius-sm: var(--radius-control);
    --dmf-radius-md: var(--radius);
    --dmf-radius-lg: 1rem;
    --dmf-shadow-card: var(--shadow);
    --dmf-shadow-hover: 0 20px 46px rgba(7, 29, 61, .12);
    --dmf-container: 1220px;
    --dmf-breakpoint-sm: 560px;
    --dmf-breakpoint-md: 760px;
    --dmf-breakpoint-lg: 980px;
    --dmf-motion-fast: 160ms;
    --dmf-motion-normal: 280ms;
    --dmf-motion-slow: 480ms;
    --dmf-ease: var(--ease);
    --dmf-z-content: 1;
    --dmf-z-sticky: 10;
    --dmf-z-overlay: 100;
}