/* Jetons de Viraedies — ses valeurs sur les rôles variables de la fondation canonique : le bleu
   d'action, la hauteur de l'en-tête, les rayons, l'ombre de ce qui flotte, le focus — la bordure d'un
   champ qui s'allume, un trait d'un pixel sur le bord sous un halo bleu ; les verres qui laissent
   voir l'aura sous les outils, les couleurs de l'aura et du morphotype, le jaune d'une saisie
   manquante, et les jetons des modèles qu'il règle. */

@layer tokens {
    :root {
        --canon-color-action-luxis: #266eb5;
        --canon-color-danger-luxis: hsl(354 77% 45%);
        --canon-radius-card: 20px;
        --canon-height-header: 50px;
        --canon-shadow-overlay: 0 12px 40px rgb(0 0 0 / 0.25);
        --canon-focus-width: 1px;
        --canon-focus-offset: -1px;
        --canon-focus-halo: 0 0 5px 0 rgb(38 110 181 / 0.35);
    }
    :root {
        --local-height-toolbar: 75px;
        --local-height-dock: 150px;
        --local-height-logo: 35px;
        --local-radius-small: 3px;
        --local-radius-field: 7px;
        --local-radius-glass: 8px;
        --local-radius-round: 50%;
        --local-color-decor-glass: rgb(255 255 255 / 0.65);
        --local-color-decor-glass-bright: rgb(255 255 255 / 0.9);
        --local-color-decor-glass-soft: rgb(255 255 255 / 0.2);
        --local-color-decor-panel: rgb(245 245 247 / 0.65);
        --local-color-decor-panel-inner: rgb(249 249 252 / 0.65);
        --local-color-decor-separator: rgb(0 0 0 / 0.18);
        --local-color-decor-aura-white: rgb(255 255 255);
        --local-color-decor-aura-missing: rgb(255 193 7);
        --local-color-decor-aura-valid: rgb(40 167 69);
        --local-color-decor-aura-invalid: rgb(220 53 69);
        --local-color-decor-range-start: rgb(255 0 0 / 0.08);
        --local-color-decor-range-middle: rgb(255 0 255 / 0.08);
        --local-color-decor-range-end: rgb(0 0 255 / 0.08);
        --local-color-decor-morphotype-start: rgb(255 0 93);
        --local-color-decor-morphotype-middle: rgb(255 0 255);
        --local-color-decor-morphotype-end: rgb(60 0 255);
        --local-color-data-missing: rgb(255 193 7);
        --local-color-data-valid: rgb(40 167 69);
        --local-color-data-invalid: rgb(220 53 69);
        --local-color-decor-status-guest: rgb(245 166 35);
        --local-color-decor-status-member: rgb(76 175 80);
        --local-shadow-raised: 0 2px 8px rgb(0 0 0 / 0.15);
    }
    @media (max-width: 600px) {
        :root {
            --local-height-dock: 280px;
        }
    }
}