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

@layer components {
    .title {
        font-family: var(--title-font, var(--canon-font-figura));
        font-size: var(--title-size, var(--canon-size-title));
        font-weight: var(--title-weight, var(--canon-weight-title));
        line-height: var(--title-leading, var(--canon-leading-title));
        text-align: var(--title-align, inherit);
        text-transform: var(--title-case, inherit);
        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);
    }
    .title--size-body {
        font-size: var(--canon-size-body);
    }
    .title--size-control {
        font-size: var(--canon-size-control);
    }
}

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

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

@layer components {
    .link {
        padding: 0;
    }

    .link {
        border: 0;
        background: none;
    }

    .link {
        font: inherit;
        color: var(--canon-theme-action);
        text-decoration-line: var(--link-decoration, underline);
    }
    .link:hover {
        color: var(--canon-theme-action-hover);
        text-decoration-line: underline;
    }

    .link {
        cursor: pointer;
    }
}

@layer components {
    .link--style-subtle {
        color: inherit;
        text-decoration-line: none;
    }
    .link--style-subtle:is(:hover, [aria-expanded="true"]) {
        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;
    }
    .u-raw {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}