/* =========================================================
   colors.css
   Purpose:
   - Theme tokens (light/dark)
   - Color selector classes (.c-*) that set --kn-c (+ optional --kn-on)
   - NO component styling and NO hover/focus behavior here
   ========================================================= */

/* -------------------------
   1) Theme tokens
   ------------------------- */
:root,
[data-bs-theme="light"] {
    /* semantic colors (single source of truth) */
    --kn-color-excellent: #198754;
    --kn-color-good: #0d6efd;
    --kn-color-average: #0dcaf0;
    --kn-color-poor: #ffca2c;
    --kn-color-bad: #dc3545;
    --kn-color-ntrl: #6c757d;
    /*duplicate color with -kn-color-ntrl because of need pair and color on dark theme is different*/
    --kn-color-ln-ntrl: #6c757d;

    /* soft surfaces (jumbotron / blocks) */
    --kn-soft-green: #d1e7dd;
    --kn-soft-blue: #cfe2ff;
    --kn-soft-yellow: #fff3cd;
    --kn-soft-red: #f8d7da;
    --kn-soft-gray: #f8f9fa;

    /* site-specific surfaces */
    --kn-hero-background: #E3EEFF;
    --kn-headGray: #E5EAF1;
    --kn-lGray: #F2F4F7;

    /* readable text over colored backgrounds */
    --kn-on-default: #ffffff;
    --kn-on-dark: #212529;
    --kn-gray-nav-active-bg: #6c757d;
    --kn-nav-icon: #ffffff;

    --kn-color-orange: #fd7e14;
}

[data-bs-theme="dark"] {
    /* semantic colors */
    --kn-color-excellent: #157347;
    --kn-color-good: #0a58ca;
    --kn-color-average: #31d2f2;
    --kn-color-poor: #cc9a06;
    --kn-color-bad: #bb2d3b;
    --kn-color-ntrl: #343a40;
    --kn-color-ln-ntrl: #dee2e6;


    /* soft surfaces */
    --kn-soft-green: #0f5132;
    --kn-soft-blue: #052c65;
    --kn-soft-yellow: #664d03;
    --kn-soft-red: #58151c;
    --kn-soft-gray: #343a40;

    /* site-specific surfaces */
    --kn-hero-background: #1B2A41;
    --kn-headGray: #0F141C;
    --kn-lGray: #151a21;

    /* readable text over colored backgrounds */
    --kn-on-default: #DEE2E6;
    --kn-on-dark: #212529;

    --kn-gray-nav-active-bg: #6c757d;
    --kn-nav-icon: #ffffff;

    --kn-color-orange: #fd7e14;
}

/* -------------------------
   2) Color selectors
   ------------------------- */

.c-excellent {
    --kn-c: var(--kn-color-excellent);
}

.c-good {
    --kn-c: var(--kn-color-good);
}

.c-average {
    --kn-c: var(--kn-color-average);
    --kn-on: var(--kn-on-dark); /* dark text on light blue */
}

.c-poor {
    --kn-c: var(--kn-color-poor);
    --kn-on: var(--kn-on-dark);/* dark text on yellow */
}

.c-bad {
    --kn-c: var(--kn-color-bad);
}

.c-neutral {
    --kn-c: var(--kn-color-ntrl);
}

.c-neutral-ln {
    --kn-c: var(--kn-color-ln-ntrl);
}

.c-orange {
    --kn-c: var(--kn-color-orange);
}

.c-soft-green {
    --kn-c: var(--kn-soft-green);
}

.c-soft-blue {
    --kn-c: var(--kn-soft-blue);
}

.c-soft-yellow {
    --kn-c: var(--kn-soft-yellow);
}

.c-soft-red {
    --kn-c: var(--kn-soft-red);
}

.c-soft-gray {
    --kn-c: var(--kn-soft-gray);
}

.c-hero-bg {
    --kn-c: var(--kn-hero-background);
}

.c-head-gray {
    --kn-c: var(--kn-headGray);
}

.c-bg-gray {
    --kn-c: var(--kn-lGray);
}

/* data-color selectors (same meaning as .c-* but much better for edit)  */
[data-kn-color="excellent"] { --kn-c: var(--kn-color-excellent); }
[data-kn-color="good"]      { --kn-c: var(--kn-color-good); }
[data-kn-color="average"]   { --kn-c: var(--kn-color-average); --kn-on: var(--kn-on-dark); }
[data-kn-color="poor"]      { --kn-c: var(--kn-color-poor);    --kn-on: var(--kn-on-dark); }
[data-kn-color="bad"]       { --kn-c: var(--kn-color-bad); }
[data-kn-color="neutral"]   { --kn-c: var(--kn-color-ntrl); }

/* soft surfaces */
/*[data-color="soft-blue"] { --kn-c: var(--kn-soft-blue); }*/
/*[data-color="soft-gray"] { --kn-c: var(--kn-soft-gray); }*/
/* etc... */