/* ============================================
   KAF Design System — Colors
   Extracted from theme custom.css :root block.
   No values changed — this is a reorganization,
   not a redesign.
   ============================================ */

:root {
    /* --- Brand colors --- */
    --kaf-primary: #8CC63F;         /* Bright light green — CTAs, primary actions, highlights */
    --kaf-secondary: #028400;       /* Dark forest green — headers, nav, emphasis */
    --kaf-accent: #F9A825;          /* Vibrant orange — interactive elements, hover states */

    /* --- Text colors --- */
    --kaf-body-text: #1F1F1F;       /* Main content text */
    --kaf-muted-text: #616161;      /* Secondary / muted text */
    --kaf-text-small: #B2B7AB;      /* Captions, small text */

    /* --- Background colors --- */
    --kaf-light-bg: #ECFAEF;        /* Pale green — light section backgrounds */
    --kaf-section-bg: #0F2A1D;      /* Very dark green — dark section backgrounds */

    /* --- Neutrals --- */
    --kaf-white: #FFFFFF;
    --kaf-black: #000000;
    --kaf-light-gray: var(--kaf-light-bg);

    /* --- Semantic aliases (used throughout components) --- */
    --kaf-text-dark: var(--kaf-body-text);
    --kaf-text-light: var(--kaf-muted-text);
    --kaf-background: var(--kaf-white);
    --kaf-surface: var(--kaf-light-bg);

    /*
     * --- Legacy aliases ---
     * These names are still referenced throughout custom.css
     * (card borders, footer, stat numbers, etc). Keeping them
     * here so nothing breaks. Once components are migrated to
     * the semantic names above, these can be retired.
     */
    --kaf-dark-green: var(--kaf-secondary);
    --kaf-darker-green: var(--kaf-section-bg);
    --kaf-light-green: var(--kaf-primary);
    --kaf-blue: var(--kaf-secondary); /* originally a blue accent; realigned to brand green */
}