/*
 * GRDS design tokens.
 * Mirrors the existing brand hex values already used inline across the app
 * (button-styles.css, style.css:101, and per-page `var primary` locals) —
 * values are copied, not reinvented, so nothing shifts color just from
 * adopting these tokens.
 */
:root {
    /* Brand */
    --grds-green-900: #003E00; /* primary, same as style.css --primary / --bs-primary */
    --grds-green-700: #008600; /* secondary / hover green */
    --grds-green-500: #587a50; /* .tracking-button base */
    --grds-green-300: #a9c287; /* lighter hover accent */
    --grds-green-100: #e8f0e4; /* light tint, for surfaces/badges */

    --grds-red-700: #b30000;
    --grds-red-500: #8B0000;

    /* Surfaces */
    --grds-surface: #ffffff;
    --grds-surface-muted: #f9f9f9;
    --grds-border: #e0e0e0;

    /* Radius */
    --grds-radius-sm: 5px;
    --grds-radius-md: 10px;
    --grds-radius-lg: 14px;

    /* Shadow (tinted green, not pure black) */
    --grds-shadow-sm: 0 1px 3px rgba(0, 62, 0, 0.08);
    --grds-shadow-md: 0 4px 16px rgba(0, 62, 0, 0.10);

    /* Spacing */
    --grds-space-1: 4px;
    --grds-space-2: 8px;
    --grds-space-3: 16px;
    --grds-space-4: 24px;
    --grds-space-5: 40px;

    /* Type */
    --grds-font-heading: 'Raleway', sans-serif;
    --grds-font-body: 'Lato', sans-serif;
}

.text-brand { color: var(--grds-green-900) !important; }
.bg-brand { background-color: var(--grds-green-900) !important; }
.border-brand { border-color: var(--grds-green-900) !important; }