:root {
    /* The five base colours; AppView::SITE_COLORS lets an admin override them,
       so every other shade is mixed from these rather than hard-coded. */
    --color-primary: #2A7A4E;
    --color-primary-dark: #1B5236;
    --color-soft: #EDF5EF;
    --color-text: #1B2520;
    --color-highlight: #C4952F;

    --color-primary-tint: color-mix(in srgb, var(--color-primary) 14%, white);
    --color-text-mid: color-mix(in srgb, var(--color-text) 86%, white);
    --color-text-soft: color-mix(in srgb, var(--color-text) 72%, white);
    /* Highlight is too light for text on white; these two are the readable forms. */
    --color-highlight-deep: color-mix(in srgb, var(--color-highlight) 62%, black);
    --color-highlight-light: color-mix(in srgb, var(--color-highlight) 45%, white);
    --color-live: #A8423A;
    --color-white: #FFFFFF;
    --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
    --color-border-dark: rgba(255, 255, 255, 0.20);
    /* Form fields need 3:1 against white to read as fields. */
    --color-border-strong: color-mix(in srgb, var(--color-text) 42%, white);
    --color-on-dark: rgba(255, 255, 255, 0.86);
    --color-on-dark-dim: rgba(255, 255, 255, 0.66);

    --shadow-sm: 0 1px 3px rgba(20, 38, 28, 0.18);
    --shadow-soft: 0 1px 2px rgba(20, 38, 28, 0.04), 0 8px 24px rgba(20, 38, 28, 0.06);
    --shadow-lift: 0 2px 4px rgba(20, 38, 28, 0.05), 0 16px 40px rgba(20, 38, 28, 0.10);

    --color-success: #2F6B4A;
    --color-error: #B33B3B;
    --color-pending: var(--color-highlight-deep);

    --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --text-xs: 0.84rem;
    --text-sm: 0.98rem;
    --text-base: 1.08rem;
    --text-lg: 1.28rem;
    --text-xl: 1.7rem;
    --text-2xl: 2.25rem;
    --text-3xl: clamp(2.05rem, 3.4vw, 2.75rem);
    --text-hero: clamp(2.7rem, 5.4vw, 4.6rem);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 44px;
    --space-8: 56px;
    --space-9: 88px;

    --container-max: 1200px;
    --header-h: 76px;
    --radius: 8px;
    --radius-card: 12px;
    --border-width: 1px;

    --transition-fast: 0.2s ease;
    --transition-base: 0.25s ease;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}