:root {
    /* ============ Brand ============ */
    --color-primary: #87A96B;
    /* light green */
    --color-primary-light: #9dbb85;
    --color-primary-rgb: 135, 169, 107;

    --color-secondary: #2F362A;
    /* dark green */
    --color-secondary-light: #3d4736;
    --color-secondary-lighter: #5c6e58;
    --color-secondary-deepest: #1a2419;
    --color-secondary-rgb: 47, 54, 42;

    --color-cream: #F5F1E8;
    --color-cream-rgb: 245, 241, 232;

    /* Soft, low-saturation canvas for the page body - the saturated brand
       green stays reserved for chrome/accents (nav, footer, buttons, badges)
       so large reading surfaces stay easy on the eyes. */
    --color-page-bg: #EDF1E8;

    /* ============ Neutrals ============ */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-off-white: #fffef8;
    --color-paper: #fffdf8;
    --color-surface-muted: #f7f4eb;
    --color-body-bg: #f8f9fa;
    --color-gray-bg: #F1F3F5;
    --color-gray-bg-dark: #E4E7EB;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    /* ============ Text ============ */
    --color-text: #2a2a2a;
    --color-text-strong: #333333;
    --color-text-soft: #444444;
    --color-text-dim: #555555;
    --color-text-muted: #6C757D;
    --color-text-muted-dark: #666666;
    --color-text-faint: #777777;
    --color-text-faint-light: #888888;
    --color-text-whisper: #999999;
    --color-text-ghost: #aaaaaa;

    /* ============ Borders ============ */
    --color-border: #DEE2E6;
    --color-border-light: #E9ECEF;
    --color-border-lighter: #EDF2F7;
    --color-border-soft: #eeeeee;
    --color-border-faint: #f0f0f0;
    --color-border-dashed: #cccccc;

    /* ============ Accents ============ */
    --color-focus: #1a2a6c;
    --color-focus-rgb: 26, 42, 108;
    --color-focus-ring: #258cfb;

    --color-link: #1a73e8;
    --color-link-hover: #0d47a1;
    --color-link-rgb: 26, 115, 232;

    --color-danger: #c0392b;
    --color-danger-dark: #a5281b;
    --color-danger-deep: #b21f1f;
    --color-danger-rgb: 192, 57, 43;

    --color-success: #27ae60;
    --color-success-rgb: 39, 174, 96;
    --color-heart: #e63946;

    --color-gold: #b8860b;
    --color-gold-rgb: 184, 134, 11;

    /* ============ Legacy aliases ============
       Kept so every existing var(--dark-green) / var(--light-green) / etc.
       reference across the site keeps working unchanged. Change the colors
       above (--color-primary / --color-secondary / ...) to re-theme the
       whole site from this one file. */
    --dark-green: var(--color-secondary);
    --light-green: var(--color-primary);
    --soft-read-color: var(--color-cream);
    --blue-nav-color: var(--color-secondary);
}