/* design_tokens.css */

:root {
    --ui-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ui-green: #2d5a27;
    --ui-green-hover: #1e3d1a;
    --ui-green-secondary: #539462;
    --ui-gold: #c5a059;
    --ui-background: #f4f7f4;
    --ui-surface: #ffffff;
    --ui-text: #1a2e1a;
    --ui-text-muted: #6b7c6a;
    --ui-border: #e0e6e0;
    --ui-border-light: #edf1ed;
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-font-xxs: .65rem;
    --ui-font-xs: .75rem;
    --ui-font-sm: .82rem;
    --ui-font-base: .9rem;
    --ui-font-md: 1rem;
    --ui-font-lg: 1.1rem;
    --ui-font-xl: 1.25rem;
    --ui-font-2xl: 1.6rem;
    --ui-font-3xl: 2rem;
    --ui-font-4xl: 2.5rem;
    --ui-font-5xl: 3rem;
    --ui-font-display: 4rem;
    --ui-weight-normal: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 600;
    --ui-weight-bold: 700;
    --ui-control-radius: 10px;
    --ui-control-height: 42px;
    --ui-control-padding-y: 10px;
    --ui-control-padding-x: 13px;
    --ui-shadow-card: 0 2px 5px rgba(45,90,39,.12), 0 5px 12px rgba(45,90,39,.10);
    --ui-shadow-card-hover: 0 3px 7px rgba(45,90,39,.14), 0 10px 20px rgba(45,90,39,.18);
    --ui-shadow-focus: 0 0 0 3px rgba(45,90,39,.10);
    --ui-shadow-overlay: 0 20px 50px rgba(0,0,0,.20);
    --ui-shadow-button: 0 2px 8px rgba(45,90,39,.20);
    --ui-shadow-button-hover: 0 6px 16px rgba(45,90,39,.25);
}