@layer tokens, base, layout, components, utilities, vendor;

@import './tokens/colors.css' layer(tokens);
@import './tokens/variables.css' layer(tokens);

@import './base/reset.css' layer(base);
@import './base/elements.css' layer(base);

@import './layout/primary.css' layer(layout);
@import './layout/content-grid.css' layer(layout);
@import './layout/columns-grid.css' layer(layout);
@import './layout/footer.css' layer(layout);

@import './components/callouts.css' layer(components);
@import './components/blockquotes.css' layer(components);
@import './components/cards.css' layer(components);
@import './components/details.css' layer(components);
@import './components/color-mode-toggle.css' layer(components);
@import './components/site-chrome.css' layer(components);
@import './components/video-embed.css' layer(components);

@import './utilities/utilities.css' layer(utilities);

@import './vendor/jamsedu/jamsedu.css' layer(vendor);

/* Inline `svg.icon`: unlayered so this beats `layer(vendor)`. Stroke icons set `stroke` on the root; filled logos omit it. */
svg.icon {
    &[stroke] {
        color: inherit;
        fill: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    &[stroke] :is(path, line, polyline, polygon) {
        fill: none;
        stroke: currentColor;
    }

    &:not([stroke]) {
        fill: currentColor;
    }

    &:not([stroke]) :is(path, circle, ellipse, rect, polygon, polyline) {
        fill: currentColor;
        stroke: currentColor;
    }
}

/* Icons inside anchors: keep body ink so icons are not painted like link text (`currentColor`). */
a svg.icon {
    color: var(--color-text);
}

.content-grid > header a svg.icon,
.content-grid > footer a svg.icon,
:where(footer) a svg.icon {
    color: color-mix(in srgb, var(--header-text) 92%, var(--header-bg));
}