@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans+Khmer:wght@100..900&family=Noto+Sans+Thai:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap');

/* Shared refresh typography. Only the refresh layouts load this stylesheet.
   Keep the scope explicit so legacy templates retain their original fonts. */
html.rr-refresh-page {
    --uat-body-font: 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Khmer', 'Noto Sans Thai', 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
    --uat-heading-font: 'Archivo', var(--uat-body-font);
    --uat-accent: #6A59FD;
}

/* Low specificity lets component typography override these defaults.
   Name prose and controls explicitly because legacy CSS sets their fonts.
   Icon elements and pseudo-elements retain their own font faces. */
:where(html.rr-refresh-page) body,
:where(html.rr-refresh-page) input,
:where(html.rr-refresh-page) select,
:where(html.rr-refresh-page) textarea,
:where(html.rr-refresh-page) button,
:where(html.rr-refresh-page) p,
:where(html.rr-refresh-page) li,
:where(html.rr-refresh-page) dt,
:where(html.rr-refresh-page) dd,
:where(html.rr-refresh-page) blockquote,
:where(html.rr-refresh-page) figcaption,
:where(html.rr-refresh-page) label,
:where(html.rr-refresh-page) legend,
:where(html.rr-refresh-page) td,
:where(html.rr-refresh-page) th {
    font-family: 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Khmer', 'Noto Sans Thai', 'Noto Sans SC', 'Segoe UI', Arial, sans-serif !important;
}

:where(html.rr-refresh-page) h1,
:where(html.rr-refresh-page) h2,
:where(html.rr-refresh-page) h3,
:where(html.rr-refresh-page) h4,
:where(html.rr-refresh-page) h5,
:where(html.rr-refresh-page) h6 {
    font-family: var(--uat-heading-font) !important;
}