/*
    Theme tokens.

    Colours are stored as space-separated RGB channels rather than hex so that Tailwind can apply
    its own opacity to them: `bg-primary/20` compiles to `rgb(var(--primary) / 0.2)`, which only
    works if the variable holds `40 119 250` and not `#2877fa`. Hand-written CSS in site.css reads
    the same tokens through `rgb(var(--token))`, so both systems resolve to one source.

    :root is the default theme and holds exactly the values the site shipped with, so a visitor who
    never touches the switch sees no change at all.

    The Tailwind keys kept their original names (`dark-bg`, `dark-tertiary`) because they are spelled
    into ~650 utility classes across the views; renaming them would touch every file for no visual
    gain. Read them as roles, not as literal colours - in the colorful theme `dark-bg` holds a light
    value. New work should prefer the role-named tokens below.
*/

:root {
    color-scheme: dark;

    --ix-primary:          40 119 250;
    --ix-primary-hover:    91 147 251;
    --ix-primary-dark:     26 95 212;

    --ix-secondary:        188 212 27;
    --ix-secondary-light:  212 232 64;
    --ix-secondary-dark:   154 170 22;

    --ix-surface-base:     11 16 22;
    --ix-surface-raised:   29 38 55;

    --ix-content-primary:   248 250 252;
    --ix-content-secondary: 203 213 225;
    --ix-content-muted:     136 152 179;

    /*
        Browse/explore green. A separate role from the brand: it marks "go and look around" actions,
        and stays distinct from --primary so the two never read as the same control.
    */
    --ix-accent-explore:   127 170  58;

    /* Uppercase micro-labels, a step brighter than --content-secondary. */
    --ix-content-badge:    226 232 240;

    /* Two further greys the views already used inline, kept apart so the default look is unchanged. */
    --ix-content-subtle:   148 163 184;
    --ix-content-faint:    100 116 139;

    /* The deepest ground, behind --surface-base. */
    --ix-surface-deep:      10  15  30;

    /* Drop shadows. Pure black suits a dark ground; the light theme needs something softer. */
    --ix-shadow:             0   0   0;

    /* Text that sits on a filled --primary button. */
    --ix-on-primary:       255 255 255;

    /*
        One hue per audience: Athletes, Coaches, Clubs, Academies, Scouts, Agents. Tuned per theme
        because a tone that reads on the dark ground is not the tone that reads on the light one -
        these are the lighter set, for dark.
    */
    --ix-hue-indigo:   167 139 250;
    --ix-hue-coral:    251 113 133;
    --ix-hue-teal:      45 212 191;
    --ix-hue-amber:    251 191  36;
    --ix-hue-magenta:  232 121 201;
    --ix-hue-lime:     163 230  53;
}

/*
    Colorful: a light ground with a six-hue accent set. Every hue carrying text is the darker of its
    two tones and clears WCAG AA (4.5:1) on both white and the --surface-base paper; the lighter
    tones are reserved for fills and illustration, where no text sits on them.
*/
[data-theme="colorful"] {
    color-scheme: light;

    --ix-primary:          79  53 217;
    --ix-primary-hover:   107  82 232;
    --ix-primary-dark:     61  39 176;

    --ix-secondary:       197  50  45;
    --ix-secondary-light: 240  82  77;
    --ix-secondary-dark:  150  35  31;

    --ix-surface-base:    247 248 251;
    --ix-surface-raised:  255 255 255;

    --ix-content-primary:   18  21  28;
    --ix-content-secondary: 71  77  92;
    --ix-content-muted:    107 114 130;
    --ix-accent-explore:    74 122  12;
    --ix-content-badge:     71  77  92;
    --ix-content-subtle:    71  77  92;
    --ix-content-faint:    118 125 143;
    --ix-surface-deep:     247 248 251;
    --ix-shadow:            88  96 116;

    --ix-on-primary:      255 255 255;

    --ix-hue-indigo:    79  53 217;
    --ix-hue-coral:    197  50  45;
    --ix-hue-teal:      11 110 110;
    --ix-hue-amber:    138  90   0;
    --ix-hue-magenta:  168  31 135;
    --ix-hue-lime:      74 122  12;
}