/* Jetons de Careevia — ses valeurs sur les rôles variables de la fondation canonique : le vert d'eau
   d'action de chaque thème, ses rayons, sa mesure de lecture, l'ombre de ce qui flotte ; les largeurs
   de ses gabarits, le voile de son en-tête, et les jetons des modèles qu'il règle. */

@layer tokens {
    :root {
        --canon-color-action-luxis: #007a6f;
        --canon-color-action-noxus: #2fe3c6;
        --canon-size-headline: 1.75rem;
        --canon-size-title: 1.25rem;
        --canon-size-control: 0.875rem;
        --canon-size-note: 0.75rem;
        --canon-radius-control: 10px;
        --canon-radius-card: 10px;
        --canon-width-reading: 70ch;
        --canon-shadow-overlay: 0 12px 32px rgb(23 25 22 / 0.16);
    }
    :root {
        --local-width-column: 32rem;
        --local-width-standard: 72rem;
        --local-width-wide: 80rem;
        --local-height-brand: 28px;
        --local-height-brand-signin: 32px;
        --local-radius-small: 6px;
        --local-radius-round: 50%;
        --local-opacity-overlay: 88%;
        --local-blur-overlay: 13px;
        --local-tint-overlay: 8%;
        --local-color-decor-overlay: color-mix(in srgb, var(--canon-theme-surface) var(--local-opacity-overlay), transparent);
        --local-color-decor-scrim: color-mix(in srgb, var(--canon-theme-canvas) var(--local-tint-overlay), transparent);
        --local-shadow-pressed: 0 0 0 4px var(--canon-theme-surface-selected);
        --local-shadow-current: inset 0 -2px 0 0 var(--canon-theme-action);
        --local-shadow-marker: inset 2px 0 0 var(--canon-theme-action);
    }
}

@layer components {
    .button {
        --button-weight: 600;
        --button-weight-quiet: 450;
    }
    .loader {
        --loader-height: 1.5rem;
    }
}