/* Texte — modèle canonique ; son emploi : canon_text.md. */

@layer components {
    .title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: var(--canon-weight-title);
        line-height: var(--canon-leading-title);
        color: var(--canon-theme-ink);
    }
}

@layer components {
    .title--size-headline {
        font-size: var(--canon-size-headline);
    }
    .title--size-subtitle {
        font-size: var(--canon-size-subtitle);
    }
}

@layer components {
    .reading {
        max-width: var(--canon-width-reading, none);
    }

    .reading {
        line-height: var(--canon-leading-reading);
    }
}

@layer components {
    .link {
        color: var(--canon-theme-action);
        text-decoration-line: underline;
    }
    .link:hover {
        color: var(--canon-theme-action-hover);
    }
}

@layer components {
    .link--style-subtle {
        color: inherit;
        text-decoration-line: none;
    }
    .link--style-subtle:hover {
        text-decoration-line: underline;
    }
}

@layer utilities {
    .u-muted {
        color: var(--canon-theme-muted);
    }
    .u-note {
        font-size: var(--canon-size-note);
    }
    .u-numeric {
        font-variant-numeric: tabular-nums;
    }
}