/* App design tokens — extracted VERBATIM from TemplateData/style.css (the unified UI scale
   :root block + its responsive overrides). model-library.css sizes everything with these.
   Re-extract whenever the library assets are re-synced from the WebView source. */
/* ==========================================================================
   UNIFIED UI SCALE — base + runtime offset.
   Every token = calc(<responsive base> + <--*-off offset>). The -off vars are
   set from C# (UIScaleOffsets) at runtime via window.SetUIScaleOffsets; default
   (unset) = 0 = the baseline sizing below. This is the SINGLE source of truth
   for ALL chrome sizing — components reference the effective var (e.g. --fs-label).
   Adjust a token here (or its C# offset) and every element using it follows.
   Corner-control (--ie-ctl-*) tokens are the Library/Export/part-selector scale.
   ========================================================================== */
:root {
    --ie-ctl-pad-y-base: 10px;
    --ie-ctl-pad-y: calc(var(--ie-ctl-pad-y-base) + var(--ie-ctl-pad-y-off, 0px));
    --ie-ctl-pad-x-base: 14px;
    --ie-ctl-pad-x: calc(var(--ie-ctl-pad-x-base) + var(--ie-ctl-pad-x-off, 0px));
    --ie-ctl-radius-base: 12px;
    --ie-ctl-radius: calc(var(--ie-ctl-radius-base) + var(--ie-ctl-radius-off, 0px));
    --ie-ctl-icon-base: 22px;
    --ie-ctl-icon: calc(var(--ie-ctl-icon-base) + var(--ie-ctl-icon-off, 0px));
    --ie-ctl-font-base: 11px;
    --ie-ctl-font: calc(var(--ie-ctl-font-base) + var(--ie-ctl-font-off, 0px));
    --ie-ctl-gap-base: 4px;
    --ie-ctl-gap: calc(var(--ie-ctl-gap-base) + var(--ie-ctl-gap-off, 0px));
    --ie-ctl-selector-minw-base: 104px;
    --ie-ctl-selector-minw: calc(var(--ie-ctl-selector-minw-base) + var(--ie-ctl-selector-minw-off, 0px));
    --fs-caption-base: 12px;
    --fs-caption: calc(var(--fs-caption-base) + var(--fs-caption-off, 0px));
    --fs-label-base: 13px;
    --fs-label: calc(var(--fs-label-base) + var(--fs-label-off, 0px));
    --fs-body-base: 14px;
    --fs-body: calc(var(--fs-body-base) + var(--fs-body-off, 0px));
    --fs-input-base: 15px;
    --fs-input: calc(var(--fs-input-base) + var(--fs-input-off, 0px));
    --fs-title-base: 16px;
    --fs-title: calc(var(--fs-title-base) + var(--fs-title-off, 0px));
    --fs-subtitle-base: 17px;
    --fs-subtitle: calc(var(--fs-subtitle-base) + var(--fs-subtitle-off, 0px));
    --fs-hero-base: 20px;
    --fs-hero: calc(var(--fs-hero-base) + var(--fs-hero-off, 0px));
    --sp-1-base: 4px;
    --sp-1: calc(var(--sp-1-base) + var(--sp-1-off, 0px));
    --sp-2-base: 6px;
    --sp-2: calc(var(--sp-2-base) + var(--sp-2-off, 0px));
    --sp-3-base: 8px;
    --sp-3: calc(var(--sp-3-base) + var(--sp-3-off, 0px));
    --sp-4-base: 10px;
    --sp-4: calc(var(--sp-4-base) + var(--sp-4-off, 0px));
    --sp-5-base: 12px;
    --sp-5: calc(var(--sp-5-base) + var(--sp-5-off, 0px));
    --sp-6-base: 14px;
    --sp-6: calc(var(--sp-6-base) + var(--sp-6-off, 0px));
    --sp-7-base: 16px;
    --sp-7: calc(var(--sp-7-base) + var(--sp-7-off, 0px));
    --sp-8-base: 18px;
    --sp-8: calc(var(--sp-8-base) + var(--sp-8-off, 0px));
    --sp-9-base: 24px;
    --sp-9: calc(var(--sp-9-base) + var(--sp-9-off, 0px));
    --r-sm-base: 8px;
    --r-sm: calc(var(--r-sm-base) + var(--r-sm-off, 0px));
    --r-md-base: 12px;
    --r-md: calc(var(--r-md-base) + var(--r-md-off, 0px));
    --r-lg-base: 14px;
    --r-lg: calc(var(--r-lg-base) + var(--r-lg-off, 0px));
    --r-panel-base: 16px;
    --r-panel: calc(var(--r-panel-base) + var(--r-panel-off, 0px));
    --r-xl-base: 20px;
    --r-xl: calc(var(--r-xl-base) + var(--r-xl-off, 0px));
    --icon-sm-base: 16px;
    --icon-sm: calc(var(--icon-sm-base) + var(--icon-sm-off, 0px));
    --icon-md-base: 22px;
    --icon-md: calc(var(--icon-md-base) + var(--icon-md-off, 0px));
    --icon-lg-base: 24px;
    --icon-lg: calc(var(--icon-lg-base) + var(--icon-lg-off, 0px));
    --icon-xl-base: 28px;
    --icon-xl: calc(var(--icon-xl-base) + var(--icon-xl-off, 0px));
    --ctl-h-base: 44px;
    --ctl-h: calc(var(--ctl-h-base) + var(--ctl-h-off, 0px));
    --ctl-h-sm-base: 36px;
    --ctl-h-sm: calc(var(--ctl-h-sm-base) + var(--ctl-h-sm-off, 0px));
    --ctl-h-lg-base: 48px;
    --ctl-h-lg: calc(var(--ctl-h-lg-base) + var(--ctl-h-lg-off, 0px));
    --r-pill: 999px; /* static — never offset */
}

@media (max-width: 600px) {
    :root {
        --ie-ctl-pad-y-base: 7px;
        --ie-ctl-pad-x-base: 11px;
        --ie-ctl-radius-base: 11px;
        --ie-ctl-icon-base: 20px;
        --ie-ctl-font-base: 10px;
        --ie-ctl-gap-base: 3px;
        --ie-ctl-selector-minw-base: 96px;
        --fs-caption-base: 11.5px;
        --fs-label-base: 12.5px;
        --fs-body-base: 13.5px;
        --fs-input-base: 14.5px;
        --fs-title-base: 15.5px;
        --fs-subtitle-base: 16px;
        --fs-hero-base: 19px;
        --sp-8-base: 16px;
        --sp-9-base: 20px;
        --icon-lg-base: 22px;
        --icon-xl-base: 24px;
        --ctl-h-lg-base: 46px;
    }
}
@media (max-width: 480px) {
    :root {
        --ie-ctl-pad-y-base: 6px;
        --ie-ctl-pad-x-base: 10px;
        --ie-ctl-icon-base: 18px;
        --ie-ctl-font-base: 9px;
        --ie-ctl-selector-minw-base: 88px;
        --fs-caption-base: 11px;
        --fs-label-base: 12px;
        --fs-body-base: 13px;
        --fs-input-base: 14px;
        --fs-title-base: 15px;
        --fs-hero-base: 18px;
        --icon-xl-base: 22px;
    }
}