/* Botanical Mind — AA-vetted design tokens.
 * Single source of truth for the color / radius / spacing / type-scale layer.
 * Font tokens (--font-serif / --font-sans) are owned by fonts.css and are NOT
 * redeclared here, to keep one owner per token (CLAUDE.md Typography section).
 *
 * Contrast intent: every text/background pairing below targets WCAG 2.1 AA
 * (>=4.5:1 body, >=3:1 large/UI). Where an exact brand swatch failed at small
 * sizes, luminance was nudged (e.g. forest -> --color-text, sage -> --color-muted).
 * Raw brand swatches are kept for reference but must not be used as small text.
 * Re-verify ratios with a contrast checker before launch.
 */
:root {
    /* ---- raw Botanical Mind palette (reference; not all AA as small text) ---- */
    --brand-forest: #2F4733;
    --brand-clay:   #8C5A3C;
    --brand-sage:   #A8B89A;
    --brand-sand:   #E8DCC4;
    --brand-ember:  #D87B3F;

    /* ---- surfaces & text (AA-vetted pairings) ---- */
    --color-bg:           var(--brand-sand);   /* page background */
    --color-surface:      #F2EAD8;             /* lighter sand for inset layering */
    --color-surface-deep: var(--brand-forest); /* green container (header/footer) */
    --color-text:         #22331F;             /* forest, darkened — AA on sand */
    --color-text-on-deep: #EFE7D4;             /* sand-tint text on forest — AA */
    --color-heading:      #22331F;
    --color-muted:        #566B4E;             /* dark sage — quiet labels, AA on sand */
    --color-border:       #C9BBA0;             /* sand-derived hairline */
    --color-link:         #5E3A22;             /* clay, darkened — AA on sand */
    --color-link-hover:   #7A4B2E;

    /* ---- the single accent: ember, primary action only (one per screen) ---- */
    --color-primary:       var(--brand-ember);
    --color-primary-hover: #C2611F;            /* ember darkened for hover */
    --color-on-primary:    #241910;            /* near-black brown on ember — AA */

    /* ---- secondary action: clay-green (never ember) ---- */
    --color-secondary:       #3E5540;
    --color-secondary-hover: #314532;
    --color-on-secondary:    #EFE7D4;

    /* ---- functional / state colors: distinct from the brand five (rule 12) ---- */
    --color-focus:         #1F6F78;            /* teal focus ring */
    --color-error:         #9A2A2A;
    --color-success:       #2E6B3C;
    --color-disabled:      #9A958B;
    --color-disabled-text: #5C5950;

    /* ---- shape / spacing / type scale ---- */ 
    --radius:    7px;
    --radius-sm: 5px;

    --space-0: 0.125rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    --maxw: 72rem;

    --fs-100: 0.875rem;
    --fs-200: 1rem;
    --fs-300: 1.125rem;
    --fs-400: 1.375rem;
    --fs-500: 1.875rem;
    --fs-600: 2.5rem;
}