/*
 * =========================================================
 * UI-LANG COLOR
 * =========================================================
 *
 * ui-lang-color.css
 *
 * A small semantic color algebra.
 *
 *
 * ---------------------------------------------------------
 * PRINCIPLE
 * ---------------------------------------------------------
 *
 * This stylesheet does not provide a palette of named colors.
 *
 * Instead, it provides coordinates from which colors can be
 * composed:
 *
 *     hue
 *     lightness
 *     chroma
 *
 * Hue provides relationships between colors.
 *
 * Lightness and chroma provide intensity.
 *
 * Components therefore describe relationships rather than
 * selecting literal colors.
 *
 *
 * Example:
 *
 *     background:
 *         oklch(
 *             var(--ui-lightness-6)
 *             var(--ui-chroma-4)
 *             var(--ui-hue-pair-0)
 *         );
 *
 *     color:
 *         oklch(
 *             var(--ui-lightness-1)
 *             var(--ui-chroma-3)
 *             var(--ui-hue-pair-1)
 *         );
 *
 *
 * ========================================================= */


/* =========================================================
   BASE HUE
   =========================================================
 *
 * The application establishes one primary hue.
 *
 * All hue relationships are derived from this value.
 *
 * Hue is expressed in degrees.
 */

:root {

    --ui-hue:
        215;
}


/* =========================================================
   HUE RELATIONSHIPS
   =========================================================
 *
 * Each family divides the color wheel into equal parts.
 *
 *
 * PAIR
 * ----
 *
 * Two positions separated by 180°.
 *
 * This is the traditional complementary relationship.
 *
 *     0° ───────── 180°
 *
 *
 * TRIAD
 * -----
 *
 * Three positions separated by 120°.
 *
 *     0° ── 120° ── 240°
 *
 *
 * QUAD
 * ----
 *
 * Four positions separated by 90°.
 *
 *     0° ── 90° ── 180° ── 270°
 *
 *
 * The numbered positions are intentional.
 *
 * They provide stable coordinates which application CSS
 * can use to establish relationships between components.
 */


/* ---------------------------------------------------------
   PAIR
   --------------------------------------------------------- */

:root {

    --ui-hue-pair-0:
        var(--ui-hue);

    --ui-hue-pair-1:
        calc(var(--ui-hue) + 180);
}


/* ---------------------------------------------------------
   TRIAD
   --------------------------------------------------------- */

:root {

    --ui-hue-triad-0:
        var(--ui-hue);

    --ui-hue-triad-1:
        calc(var(--ui-hue) + 120);

    --ui-hue-triad-2:
        calc(var(--ui-hue) + 240);
}


/* ---------------------------------------------------------
   QUAD
   --------------------------------------------------------- */

:root {

    --ui-hue-quad-0:
        var(--ui-hue);

    --ui-hue-quad-1:
        calc(var(--ui-hue) + 90);

    --ui-hue-quad-2:
        calc(var(--ui-hue) + 180);

    --ui-hue-quad-3:
        calc(var(--ui-hue) + 270);
}


/* =========================================================
   LIGHTNESS
   =========================================================
 *
 * Eight semantic lightness levels.
 *
 * The numbers are coordinates, not percentages.
 *
 * The actual values may be changed by a theme.
 *
 * The application should think:
 *
 *     lightness-0
 *     lightness-1
 *     ...
 *     lightness-7
 *
 * rather than:
 *
 *     20%
 *     35%
 *     ...
 *
 *
 * This makes theme changes possible without changing
 * application components.
 */

:root {

    --ui-lightness-0: 18%;
    --ui-lightness-1: 28%;
    --ui-lightness-2: 38%;
    --ui-lightness-3: 48%;
    --ui-lightness-4: 58%;
    --ui-lightness-5: 68%;
    --ui-lightness-6: 80%;
    --ui-lightness-7: 94%;
}


/* =========================================================
   CHROMA
   =========================================================
 *
 * Seven semantic chroma levels.
 *
 * 0 is neutral.
 *
 * Higher levels progressively increase color intensity.
 *
 * The exact values are deliberately theme-controlled.
 */

:root {

    --ui-chroma-0: 0.01;
    --ui-chroma-1: 0.02;
    --ui-chroma-2: 0.05;
    --ui-chroma-3: 0.08;
    --ui-chroma-4: 0.12;
    --ui-chroma-5: 0.16;
    --ui-chroma-6: 0.20;
}


/* =========================================================
   DARK THEME
   =========================================================
 *
 * The semantic coordinates remain unchanged.
 *
 * Only the meaning of the lightness scale changes.
 *
 * Application CSS can therefore use exactly the same
 * color coordinates in both themes.
 *
 * Hue and chroma remain unchanged here.
 */

@media (prefers-color-scheme: dark) {

    :root {

        --ui-lightness-0: 94%;
        --ui-lightness-1: 84%;
        --ui-lightness-2: 72%;
        --ui-lightness-3: 60%;
        --ui-lightness-4: 48%;
        --ui-lightness-5: 36%;
        --ui-lightness-6: 25%;
        --ui-lightness-7: 14%;
    }
}


/* =========================================================
   COLOR COMPOSITION
 * =========================================================
 *
 * There are intentionally no predefined colors such as:
 *
 *     --ui-blue
 *     --ui-red
 *     --ui-green
 *
 * A color is composed at the point where it is needed.
 *
 *
 *     oklch(
 *         lightness
 *         chroma
 *         hue
 *     )
 *
 *
 * Example:
 *
 *     oklch(
 *         var(--ui-lightness-6)
 *         var(--ui-chroma-4)
 *         var(--ui-hue-pair-0)
 *     )
 *
 *
 * ========================================================= */


/* =========================================================
   OPTIONAL BASE COLOR
   =========================================================
 *
 * Useful when an application needs a single canonical color.
 *
 * This is intentionally just one composition of the
 * coordinate system.
 */

:root {

    --ui-color:
        oklch(
            var(--ui-lightness-5)
            var(--ui-chroma-4)
            var(--ui-hue)
        );
}


/* =========================================================
   DESIGN BOUNDARY
   =========================================================
 *
 * This stylesheet defines:
 *
 *     - hue relationships
 *     - lightness coordinates
 *     - chroma coordinates
 *     - color composition
 *     - theme-dependent coordinate values
 *
 * It does not define:
 *
 *     - buttons
 *     - panels
 *     - feeds
 *     - views
 *     - borders
 *     - shadows
 *     - component-specific appearance
 *
 * Application CSS consumes this color algebra.
 *
 * ========================================================= */