/* Canonical typography and interaction roles for every non-lesson page. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-cyrillic-ext-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-cyrillic-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-latin-ext-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-display: swap;
    font-weight: 400 700;
    src: url("../../fonts/site/inter-latin-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root[data-typography-scope="site"] {
    color-scheme: light;

    /* Preserve the original editorial face seen in the existing headings. */
    --site-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --site-font-body: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --site-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

    --site-weight-regular: 400;
    --site-weight-medium: 500;
    --site-weight-semibold: 600;
    --site-weight-bold: 700;
    --site-tracking-display: -.02em;
    --site-tracking-label: .06em;
    --site-link-weight: var(--site-weight-semibold);

    --site-accent-rgb: 49, 95, 159;
    --site-accent: #315f9f;
    --site-accent-hover: #234e85;
    --site-accent-soft: #edf3fa;
    --site-accent-border: #9ab8d2;
    --site-accent-focus: rgba(var(--site-accent-rgb), .32);
    --site-on-accent: #ffffff;

    /* Compatibility roles shared by the remaining non-lesson features. */
    --focus: var(--site-accent);
    --focus-rgb: var(--site-accent-rgb);
    --focus-ring: 0 0 0 3px var(--site-accent-focus);
    --text-on-accent: var(--site-on-accent);

    /* Legacy application and Bootstrap roles remain site-scoped so lesson
       pages keep their independent palette and typography. */
    --cl-primary: var(--site-accent);
    --cl-primary-dark: var(--site-accent-hover);
    --cl-primary-light: var(--site-accent-soft);
    --cl-primary-mid: var(--site-accent-border);
    --cl-primary-rgb: var(--site-accent-rgb);
    --cl-accent: var(--site-accent);
    --cl-accent-rgb: var(--site-accent-rgb);
    --reader-font-family: var(--site-font-body);
    --reader-link: var(--site-accent);
    --reader-link-hover: var(--site-accent-hover);
    --bs-primary: var(--site-accent);
    --bs-primary-rgb: var(--site-accent-rgb);
    --bs-link-color: var(--site-accent);
    --bs-link-hover-color: var(--site-accent-hover);
    --bs-focus-ring-color: var(--site-accent-focus);

    --site-accent-on-dark-rgb: 145, 185, 248;
    --site-accent-on-dark: #91b9f8;
    --site-accent-on-dark-soft: rgba(var(--site-accent-on-dark-rgb), .12);
    --site-accent-on-dark-border: rgba(var(--site-accent-on-dark-rgb), .38);
    --site-accent-on-dark-focus: rgba(var(--site-accent-on-dark-rgb), .70);

    /* Compatibility aliases. Feature-specific aliases are migrated separately. */
    --cl-font-display: var(--site-font-display);
    --cl-font-body: var(--site-font-body);
    --praxis-font-editorial: var(--site-font-display);
    --praxis-font-sans: var(--site-font-body);

    /* Shared shell interaction roles. Gold remains available for achievements. */
    --app-topbar-shell-gold: var(--site-accent-on-dark);
    --app-topbar-shell-active: var(--site-accent-on-dark-soft);
    --app-topbar-shell-active-border: var(--site-accent-on-dark-border);
    --app-topbar-shell-focus: var(--site-accent-on-dark-focus);
    --app-topbar-blue: var(--site-accent);
    --app-topbar-blue-soft: var(--site-accent-soft);
    --app-topbar-blue-border: var(--site-accent-border);
    --app-topbar-sand: var(--site-accent-soft);
    --app-topbar-focus: var(--site-accent-focus);
    --app-topbar-control-border-active: var(--site-accent-border);
    --app-topbar-profile-border-active: var(--site-accent-border);
    --app-topbar-notification-blue-soft: var(--site-accent-soft);

    /* Auth pages consume these existing semantic roles. */
    --auth-warm-blue: var(--site-accent);
    --auth-warm-blue-deep: var(--site-accent-hover);
    --auth-warm-blue-hover: var(--site-accent-hover);
    --auth-warm-action-start: var(--site-accent);
    --auth-warm-action-end: var(--site-accent-hover);
    --auth-warm-blue-soft: var(--site-accent-soft);
    --auth-warm-focus-ring: 0 0 0 3px var(--site-accent-focus);
}

:root[data-typography-scope="site"][data-theme="dark"] {
    color-scheme: dark;

    --site-accent-rgb: 145, 185, 248;
    --site-accent: #91b9f8;
    --site-accent-hover: #c1d8ff;
    --site-accent-soft: rgba(var(--site-accent-rgb), .16);
    --site-accent-border: rgba(var(--site-accent-rgb), .32);
    --site-accent-focus: rgba(var(--site-accent-rgb), .38);
    --site-on-accent: #172033;

    /* app-shell-theme.css is imported later and also defines dark aliases. */
    --app-topbar-shell-gold: var(--site-accent-on-dark);
    --app-topbar-shell-active: var(--site-accent-on-dark-soft);
    --app-topbar-shell-active-border: var(--site-accent-on-dark-border);
    --app-topbar-shell-focus: var(--site-accent-on-dark-focus);
    --app-topbar-blue: var(--site-accent);
    --app-topbar-blue-soft: var(--site-accent-soft);
    --app-topbar-blue-border: var(--site-accent-border);
    --app-topbar-sand: var(--site-accent-soft);
    --app-topbar-focus: var(--site-accent-focus);
    --app-topbar-control-border-active: var(--site-accent-border);
    --app-topbar-profile-border-active: var(--site-accent-border);
    --app-topbar-notification-blue-soft: var(--site-accent-soft);
}

:root[data-typography-scope="site"] body,
:root[data-typography-scope="site"] button,
:root[data-typography-scope="site"] input,
:root[data-typography-scope="site"] select,
:root[data-typography-scope="site"] textarea {
    font-family: var(--site-font-body);
}

:root[data-typography-scope="site"] :where(.fw-bold, .fw-semibold) {
    font-family: var(--site-font-body);
}

:root[data-typography-scope="site"] :where(h1, h2, h3, h4, h5, h6, .site-heading),
:root[data-typography-scope="site"] :where(h1, h2, h3, h4, h5, h6).fw-bold {
    font-family: var(--site-font-display);
    letter-spacing: var(--site-tracking-display);
}

:root[data-typography-scope="site"] .site-copy {
    font-family: var(--site-font-body);
}

:root[data-typography-scope="site"] :where(a[href]) {
    font-family: var(--site-font-body);
}

:root[data-typography-scope="site"] :where(a[href]:not([class])) {
    color: var(--site-accent);
    font-weight: var(--site-link-weight);
}

:root[data-typography-scope="site"] :where(a[href]:not([class])):hover,
:root[data-typography-scope="site"] :where(a[href]:not([class])):focus-visible {
    color: var(--site-accent-hover);
}

:root[data-typography-scope="site"] .site-link {
    color: var(--site-accent);
    font-family: var(--site-font-body);
    font-weight: var(--site-link-weight);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

:root[data-typography-scope="site"] .site-link:hover,
:root[data-typography-scope="site"] .site-link:focus-visible {
    color: var(--site-accent-hover);
}

:root[data-typography-scope="site"] .site-link:focus-visible {
    outline: 3px solid var(--site-accent-focus);
    outline-offset: 3px;
}

:root[data-typography-scope="site"] .site-quote {
    font-family: var(--site-font-display);
    font-style: italic;
    font-weight: var(--site-weight-regular);
}

:root[data-typography-scope="site"] blockquote {
    font-family: var(--site-font-display);
    font-style: italic;
    font-weight: var(--site-weight-regular);
}

:root[data-typography-scope="site"] blockquote :where(cite, footer) {
    font-family: var(--site-font-body);
    font-style: normal;
}

:root[data-typography-scope="site"] :where(code, pre, kbd, samp, .site-mono) {
    font-family: var(--site-font-mono);
}

:root[data-typography-scope="site"] .btn-primary {
    --bs-btn-color: var(--site-on-accent);
    --bs-btn-bg: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-on-accent);
    --bs-btn-hover-bg: var(--site-accent-hover);
    --bs-btn-hover-border-color: var(--site-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
    --bs-btn-active-color: var(--site-on-accent);
    --bs-btn-active-bg: var(--site-accent-hover);
    --bs-btn-active-border-color: var(--site-accent-hover);
}

:root[data-typography-scope="site"] .btn-outline-primary {
    --bs-btn-color: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-on-accent);
    --bs-btn-hover-bg: var(--site-accent);
    --bs-btn-hover-border-color: var(--site-accent);
    --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
    --bs-btn-active-color: var(--site-on-accent);
    --bs-btn-active-bg: var(--site-accent-hover);
    --bs-btn-active-border-color: var(--site-accent-hover);
}

:root[data-typography-scope="site"] :where(.nav-link, .link-primary) {
    --bs-nav-link-color: var(--site-accent);
    --bs-nav-link-hover-color: var(--site-accent-hover);
    color: var(--site-accent);
}

:root[data-typography-scope="site"] :where(.nav-tabs, .nav-pills) .nav-link.active {
    color: var(--site-accent-hover);
}

:root[data-typography-scope="site"] :where(.form-control, .form-select):focus {
    border-color: var(--site-accent-border);
    box-shadow: 0 0 0 .25rem var(--site-accent-focus);
}

:root[data-typography-scope="site"] .form-check-input:checked {
    border-color: var(--site-accent);
    background-color: var(--site-accent);
}

:root[data-typography-scope="site"] :where(.text-primary, .link-primary) {
    color: var(--site-accent) !important;
}

:root[data-typography-scope="site"] .bg-primary {
    background-color: var(--site-accent) !important;
    color: var(--site-on-accent);
}

:root[data-typography-scope="site"] .border-primary {
    border-color: var(--site-accent) !important;
}

:root[data-typography-scope="site"] :where(
    .app-topnav__link,
    .prototype-user-menu__theme-label,
    .prototype-user-menu__item,
    .app-mobile-menu__item
) {
    font-weight: var(--site-weight-semibold);
}

:root[data-typography-scope="site"] :where(
    .nav-search-dropdown .ns-group,
    .nav-search-dropdown .ns-item-icon,
    .nav-search-dropdown .ns-logo,
    .prototype-userbox__text strong,
    .notification-center__count,
    .notification-center__panel > header strong,
    .notification-center__panel > header button,
    .notification-item strong,
    .notification-center__achievements,
    .achievement-toast__eyebrow,
    .achievement-toast__reward
) {
    font-weight: var(--site-weight-bold);
}

:root[data-typography-scope="site"] .notification-item.is-unread {
    box-shadow: inset 3px 0 0 var(--site-accent);
}

:root[data-typography-scope="site"] .auth-required-toast__inner {
    border-color: var(--site-accent-border);
    background: color-mix(in srgb, var(--cl-card) 94%, var(--site-accent) 6%);
}

:root[data-typography-scope="site"] .auth-required-toast__icon {
    color: var(--site-accent);
    background: var(--site-accent-soft);
}

:root[data-typography-scope="site"] .auth-required-toast__title {
    font-weight: var(--site-weight-bold);
}

:root[data-typography-scope="site"] .auth-required-toast__btn {
    font-family: var(--site-font-body);
    font-weight: var(--site-link-weight);
}

:root[data-typography-scope="site"] .auth-required-toast__btn:hover {
    border-color: var(--site-accent-border);
}

:root[data-typography-scope="site"] .auth-required-toast__btn--primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--site-accent), var(--site-accent-hover));
    color: var(--site-on-accent);
}

:root[data-typography-scope="site"] .auth-required-toast__btn--primary:hover {
    color: var(--site-on-accent);
}

:root[data-typography-scope="site"] .editorial-dialog {
    --editorial-dialog-accent: var(--site-accent);
    --editorial-dialog-accent-soft: var(--site-accent-soft);
    --editorial-dialog-line-strong: var(--site-accent-border);
    --editorial-dialog-icon-border: var(--site-accent-border);
    --editorial-dialog-input-border: var(--site-accent-border);
    --editorial-dialog-on-accent: var(--site-on-accent);
}

:root[data-typography-scope="site"][data-theme="dark"] .editorial-dialog {
    --editorial-dialog-accent: var(--site-accent);
    --editorial-dialog-accent-soft: var(--site-accent-soft);
    --editorial-dialog-line-strong: var(--site-accent-border);
    --editorial-dialog-icon-border: var(--site-accent-border);
    --editorial-dialog-input-border: var(--site-accent-border);
    --editorial-dialog-on-accent: var(--site-on-accent);
}

:root[data-typography-scope="site"] .editorial-dialog__panel {
    font-family: var(--site-font-body);
}

:root[data-typography-scope="site"] .editorial-dialog__title {
    font-family: var(--site-font-display);
}

:root[data-typography-scope="site"] :where(
    .editorial-dialog__kicker,
    .editorial-dialog__field,
    .editorial-dialog__button
) {
    font-weight: var(--site-weight-bold);
}

:root[data-typography-scope="site"] .editorial-dialog__status {
    font-weight: var(--site-weight-semibold);
}

:root[data-typography-scope="site"] .editorial-dialog__field input:focus {
    box-shadow: 0 0 0 4px var(--site-accent-focus);
}

:root[data-typography-scope="site"] .editorial-dialog:not(.editorial-dialog--danger) .editorial-dialog__button--primary {
    border-color: var(--site-accent);
    background: linear-gradient(180deg, var(--site-accent), var(--site-accent-hover));
    color: var(--site-on-accent);
    box-shadow: 0 11px 25px var(--site-accent-focus);
}