/*
 * OutaStory blog theme override
 * ------------------------------
 * The Postnomic SDK (Semantic mode) ships postnomic-blog.css, which styles
 * every `pn-*` class from `--pn-*` custom properties it declares on
 * `.pn-blog` (see _content/Postnomic.Client.Blazor/postnomic-blog.css).
 * This file re-points every one of those variables at the matching
 * OutaStory `--os-*` token (src/OutaStory.App/OutaStory.App.Shared/wwwroot/css/theme.css)
 * so the blog inherits OutaStory's light/dark theme instead of the SDK's
 * hardcoded light-mode defaults.
 *
 * Load order matters: both this file and the SDK stylesheet declare
 * `.pn-blog { --pn-*: ... }` at equal specificity, so this file MUST be
 * linked AFTER postnomic-blog.css on every blog page for the override to
 * win (see <HeadContent> in Components/Pages/Blog/{Index,Post,Author}.razor).
 *
 * `--pn-max-width` (the SDK's 1200px content-width constant) is mapped to
 * 100% rather than an --os-* token (there's no --os-* content-width
 * analog) — the blog renders inside OutaStory's AppLayout content column,
 * which already constrains width, so letting OutaStory's layout own the
 * width avoids double-constraining at 1200px.
 */

.pn-blog {
    --pn-font: inherit;
    --pn-font-heading: inherit;
    --pn-max-width: 100%;

    --pn-surface: var(--os-surface);
    --pn-surface-variant: var(--os-surface-variant);
    --pn-text: var(--os-text-primary);
    --pn-text-muted: var(--os-text-secondary);
    --pn-primary: var(--os-primary);
    --pn-on-primary: var(--os-text-on-primary);
    --pn-border: var(--os-border);
    --pn-link: var(--os-primary);

    --pn-radius: var(--os-radius-md);
    --pn-radius-lg: var(--os-radius-lg);

    --pn-space-xs: var(--os-space-xs);
    --pn-space-sm: var(--os-space-sm);
    --pn-space-md: var(--os-space-md);
    --pn-space-lg: var(--os-space-lg);
    --pn-space-xl: var(--os-space-2xl);
}