:root {
    --color-primary: var(--theme-primary);
    --color-primary-deep: var(--theme-primary-deep);
    --color-secondary: var(--theme-secondary);
    --color-accent: var(--theme-accent);
    --color-background: #fcfdf9;
    --color-surface: var(--theme-surface);
    --color-surface-strong: #ffffff;
    --color-text: var(--theme-text);
    --color-text-muted: var(--theme-muted);
    --color-border: var(--theme-border);
    --color-on-primary: #f7faf8;
    --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 65%);
    --gradient-panel: linear-gradient(180deg, rgba(217, 242, 94, 0.18), rgba(217, 242, 94, 0.02));
    --shadow-soft: 0 20px 60px rgba(6, 24, 19, 0.09);
    --shadow-card: 0 18px 40px rgba(8, 21, 18, 0.12);
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
    --container-width: 1200px;
    --page-gutter: clamp(1.25rem, 3vw, 2rem);
    --section-space: clamp(4.5rem, 8vw, 7rem);
    --header-height: 88px;
    --transition-fast: 180ms ease;
    --transition-base: 260ms ease;

    /* Motion tokens. The built-in CSS easings are too weak for UI work, so the
       shared curves live here next to the other design tokens and every public
       page picks them up (theme.css loads on every page via includes/head.php). */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press: 160ms;
    --dur-hover: 200ms;
    --dur-panel: 240ms;
    --dur-reveal: 560ms;
    --dur-hero: 520ms;
}