/* Semantic design tokens.
 *
 * Loaded from _brand.html on every page, AFTER each template's own <style>
 * block, so a theme can override a template's baked-in :root.
 *
 * The values here reproduce the current Fusion5 light look, so adding this
 * file changes nothing on its own. Templates migrate their hardcoded colours
 * onto these names (scripts/migrate_theme_tokens.py), and a theme then only
 * has to redefine the tokens.
 *
 * The eight legacy brand vars (--fusion5-coral, --jet, ...) are deliberately
 * NOT redefined here. Each template owns its own :root copy of those, and
 * clobbering them from a later stylesheet would override any per-template
 * intent. A THEME may override them; the default must not.
 */

:root {
    /* Surfaces, lightest content plane to darkest */
    --surface:         #FFFFFF;   /* card, panel, the plane content sits on */
    --surface-raised:  #FFFFFF;   /* modal, dropdown, hover lift */
    --surface-sunken:  #F5F5F5;   /* input wells, code blocks, table stripes */
    --surface-base:    #EEF1F4;   /* page canvas behind the cards */
    --surface-inverse: #3B1D4E;   /* a deliberately dark block in a light UI */

    /* Text */
    --text:            #3F3B42;
    --text-muted:      #6B6B75;
    --text-faint:      #999999;
    --text-on-accent:  #FFFFFF;   /* sitting on an accent or brand fill */
    --text-inverse:    #FFFFFF;   /* sitting on --surface-inverse */

    /* Lines */
    --line-faint:      #EEEEEE;   /* hairline, divider */
    --line:            #DDDDDD;   /* default border */
    --line-strong:     #AAAAAA;   /* emphasised or focused border */

    /* Brand and interactive */
    --accent:          #FF5C39;
    --accent-hover:    #E64A28;
    --accent-text:     #D8451F;   /* coral as TEXT needs more contrast than as fill */
    --accent-soft:     #FFF5F3;   /* tinted background behind accent content */
    /* Accent as a translucent chart fill. A separate token because a canvas
     * or Chart.js colour string cannot compute alpha from another token. */
    --accent-fill:     rgba(255, 92, 57, .25);
    --brand:           #3B1D4E;
    --brand-soft:      #A993B8;
    /* Brand violet is used as a heading colour as often as it is used as a
     * dark fill (109 text uses vs 80 backgrounds). One value cannot serve both
     * once the surface goes dark, so the two roles get separate names.
     * --brand-text is brand-coloured TYPE; --text-on-brand is type sitting ON
     * a brand fill, which is distinct from --text-on-accent because the accent
     * fill is bright and the brand fill is dark. */
    --brand-text:      #3B1D4E;
    --text-on-brand:   #FFFFFF;

    /* Status. Each has a fill, a tinted background and a text-safe shade. */
    --ok:              #2E7D32;
    --ok-bg:           #E8F5E9;
    --ok-text:         #166534;
    --warn:            #E65100;
    --warn-bg:         #FEF3C7;
    --warn-text:       #B45309;
    --danger:          #C62828;
    --danger-bg:       #FEE2E2;
    --danger-text:     #B91C1C;
    --info:            #3A687E;
    --info-bg:         #E8F1F5;
    --info-text:       #2C5070;

    /* Categorical series colours, for charts. Identity, not magnitude.
     *
     * Eight fixed slots, assigned in order and NEVER cycled — a ninth series
     * folds into --series-other rather than inventing a hue, because a
     * generated ninth colour is not separable from the first eight.
     *
     * These are NOT the brand palette, deliberately. The previous chart colours
     * were the Fusion5 brand hues, and they fail three of five palette checks:
     * green #4CAF50 against amber #E8A838 is ΔE 4.5 under protanopia, which is
     * indistinguishable to a red-green colourblind reader. Series colour encodes
     * identity for the reader, which is a different job from brand expression —
     * the brand accent still owns the buttons, tabs and chrome. Validated as a
     * set against this theme's surface; re-run
     * scripts/validate_palette.js in the dataviz skill before changing any of
     * them, and re-validate the whole set rather than one slot, because the
     * checks are on adjacent pairs.
     *
     * Three light slots (aqua, yellow, magenta) sit below 3:1 on white, so
     * charts using them owe the reader visible labels or a table view. */
    --series-1:        #2a78d6;   /* blue */
    --series-2:        #eb6834;   /* orange */
    --series-3:        #1baf7a;   /* aqua */
    --series-4:        #eda100;   /* yellow */
    --series-5:        #e87ba4;   /* magenta */
    --series-6:        #008300;   /* green */
    --series-7:        #4a3aa7;   /* violet */
    --series-8:        #e34948;   /* red */
    --series-other:    #6B6B75;   /* the ninth and beyond, folded */

    /* Chrome. These are the levers a theme pulls to change character rather
     * than just hue. Inert in the default theme. */
    --font-ui:         'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --radius:          10px;
    --radius-sm:       6px;
    --panel-shadow:    0 2px 8px rgba(0, 0, 0, .06);
    --panel-glow:      none;
    --label-transform: none;
    --label-tracking:  normal;
    --focus-ring:      0 0 0 3px rgba(255, 92, 57, .35);
    --page-canvas:     linear-gradient(135deg, #3B1D4E 0%, #3A687E 100%);
}