/* SelfieSign type system — single source of truth for fonts.
   Link this LAST in <head>, after Bootstrap/Tailwind, so the --bs-* overrides win. */
:root {
    /* Inter stays FIRST deliberately. CSS font fallback is per character, and Inter carries no
       CJK or Hangul glyphs at all, so Latin keeps Inter's metrics everywhere while only the
       characters it cannot draw fall through to the faces below. Putting a Noto family first
       would shift every Latin string in the application.

       System faces come before the Noto webfonts because they are already installed, already
       correct for the platform, and cost nothing to use — the webfont is the fallback, not the
       first choice. Note fonts.googleapis.com is blocked in mainland China, which makes
       'PingFang SC' / 'Microsoft YaHei' the ones that actually render there. */
    --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial,
                    /* zh-TW */ 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC',
                    /* zh-CN */ 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC',
                    /* ja    */ 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP',
                    /* ko    */ 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
                    sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                    'Liberation Mono', 'Courier New', monospace;

    /* Re-fonts every Bootstrap 5.3 component (buttons, form controls, modals,
       dropdowns, tables) without touching a single template rule. */
    --bs-font-sans-serif: var(--ds-font-sans);
    --bs-body-font-family: var(--ds-font-sans);
    --bs-font-monospace: var(--ds-font-mono);
}

/* html covers Tailwind preflight on the demo pages; body covers everything else. */
html, body {
    font-family: var(--ds-font-sans);
}

/* Form controls don't inherit font-family. login.html and error.html load no reset. */
button, input, select, optgroup, textarea {
    font-family: inherit;
}

code, kbd, pre, samp {
    font-family: var(--ds-font-mono);
}

/* ===== Layout stability =====
   Every page pins its header with `position: fixed; left:0; right:0`, so the header's width is
   the viewport width minus the scrollbar. Without a reserved gutter, any content-height change
   that crosses the viewport height (switching a settings section, filtering a table, an async
   chart loading) toggles the scrollbar, changes the header width by ~15px, and re-flows every
   `flex: 1` nav item. Reserving the track permanently makes the viewport width constant.
   Full-screen pages that set `body { overflow: hidden }` opt out with `scrollbar-gutter: auto`. */
html { scrollbar-gutter: stable; }

@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

/* The gutter is now always reserved, so Bootstrap's modal-open compensation (it assumes the
   scrollbar disappears and pads <body> by its width) would double-count and shove the page
   sideways. The header has no .fixed-top class, so Bootstrap never padded it to match. */
body.modal-open { padding-right: 0 !important; }

/* ---------------------------------------------------------------------------------------------
   Page heading pair — every page's title and the line under it.

   One definition, so the pages cannot drift apart again: they had grown to 1.4rem on Settings,
   1.65rem on Bulk Send, 1.85rem on Upgrade and 2.35rem on the Cost Estimator. A page tags its
   heading with .ds-page-title and the line under it with .ds-page-subtitle; spacing stays the
   page's own. The class is doubled so it outranks the page-local .section-title / .page-title
   rules (and their mobile overrides) without resorting to !important.
   --------------------------------------------------------------------------------------------- */
:root {
    --ds-page-title-size: 2rem;
    --ds-page-title-size-sm: 1.5rem;
    --ds-page-subtitle-size: 1rem;
}
.ds-page-title.ds-page-title {
    font-family: var(--ds-font-sans, Inter, sans-serif);
    font-size: var(--ds-page-title-size);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-primary);
}
.ds-page-subtitle.ds-page-subtitle {
    font-family: var(--ds-font-sans, Inter, sans-serif);
    font-size: var(--ds-page-subtitle-size);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--ds-primary-rgb), 0.72);
}
@media (max-width: 767.98px) {
    .ds-page-title.ds-page-title { font-size: var(--ds-page-title-size-sm); }
}