/* ==============================================================================
   RIKA type scale
   ------------------------------------------------------------------------------
   One knob for the size of every piece of text in the system.

   The app is built on Skote/Bootstrap 5, whose base text is 0.8125rem (13px) — small
   on the screens this runs on. Rather than restate a few hundred new absolute sizes,
   every font-size in RIKA's own stylesheets and views was rewritten to keep the value
   it was designed at and add the shared bump below:

       font-size: calc(.8125rem + var(--rk-type-bump));

   So the design intent stays readable in the source, and the whole system moves
   together from this one declaration. Set --rk-type-bump to 0 to return to stock.

   This file covers what that sweep could NOT touch: the vendor stylesheets
   (bootstrap.min.css, app.min.css), which are upgradeable and must not be edited.
   Their sizes are restated here with the same bump applied.

   MUST BE LOADED IN EVERY LAYOUT. The swept rules reference --rk-type-bump; where the
   variable is undefined the whole calc() is invalid and the element falls back to
   inherited size. It is linked from _Layout, _Auth_Layout and _Blank_Layout.

   NOT INCLUDED, deliberately:
     · The sidebar — already bumped separately at --rk-menu-bump (see rika-ui.css).
       Adding it here too would move it 4px, not 2px.
     · em / % sizes (select2, DataTables, .small, .badge) — relative to a parent that
       has already grown, so they scale on their own. Bumping them would compound.
     · Icon sizes — font-size on an <i> is an icon dimension, not text.
     · h1–h3 — Bootstrap sizes them fluidly with calc(rem + vw), which a fixed size
       would destroy. They are 26–32px already, where 2px is imperceptible.
   ============================================================================== */

:root {
    --rk-type-bump: 2px;

    /* The base every inheriting element reads: body copy, tables, cards, list text,
       and both plugins that size themselves in em. The single highest-value line here. */
    --bs-body-font-size: calc(0.8125rem + var(--rk-type-bump));
}

/* ── Skote utility classes ──────────────────────────────────────────────────────
   Used directly in the markup (topbar, cards, badges), so they win over inherited
   size and have to be restated. !important matches the theme's own declaration. */
.font-size-10 { font-size: calc(10px + var(--rk-type-bump)) !important; }
.font-size-11 { font-size: calc(11px + var(--rk-type-bump)) !important; }
.font-size-12 { font-size: calc(12px + var(--rk-type-bump)) !important; }
.font-size-13 { font-size: calc(13px + var(--rk-type-bump)) !important; }
.font-size-14 { font-size: calc(14px + var(--rk-type-bump)) !important; }
.font-size-15 { font-size: calc(15px + var(--rk-type-bump)) !important; }
.font-size-16 { font-size: calc(16px + var(--rk-type-bump)) !important; }
.font-size-17 { font-size: calc(17px + var(--rk-type-bump)) !important; }
.font-size-18 { font-size: calc(18px + var(--rk-type-bump)) !important; }
.font-size-20 { font-size: calc(20px + var(--rk-type-bump)) !important; }
.font-size-22 { font-size: calc(22px + var(--rk-type-bump)) !important; }
.font-size-24 { font-size: calc(24px + var(--rk-type-bump)) !important; }

/* ── Headings ───────────────────────────────────────────────────────────────────
   h4–h6 carry card titles, modal titles and section headers throughout RIKA. */
h4, .h4 { font-size: calc(1.21875rem + var(--rk-type-bump)); }
h5, .h5 { font-size: calc(1.015625rem + var(--rk-type-bump)); }
h6, .h6 { font-size: calc(0.8125rem + var(--rk-type-bump)); }

/* The page title, which the theme pins with !important. */
.page-title-box h4 { font-size: calc(16px + var(--rk-type-bump)) !important; }

/* ── Bootstrap components ───────────────────────────────────────────────────────
   BS5 drives these from per-component custom properties, so the bump goes on the
   variable and every size derived from it follows. */
.btn { --bs-btn-font-size: calc(0.8125rem + var(--rk-type-bump)); }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: calc(0.7109375rem + var(--rk-type-bump)); }
.btn-lg, .btn-group-lg > .btn { --bs-btn-font-size: calc(1.015625rem + var(--rk-type-bump)); }

.dropdown-menu { --bs-dropdown-font-size: calc(0.8125rem + var(--rk-type-bump)); }

.pagination { --bs-pagination-font-size: calc(0.8125rem + var(--rk-type-bump)); }
.pagination-sm { --bs-pagination-font-size: calc(0.7109375rem + var(--rk-type-bump)); }
.pagination-lg { --bs-pagination-font-size: calc(1.015625rem + var(--rk-type-bump)); }

.tooltip { --bs-tooltip-font-size: calc(0.7109375rem + var(--rk-type-bump)); }
.popover {
    --bs-popover-font-size: calc(0.7109375rem + var(--rk-type-bump));
    --bs-popover-header-font-size: calc(0.8125rem + var(--rk-type-bump));
}

/* Form controls state their size literally rather than through a variable. */
.form-control,
.form-select,
.input-group-text { font-size: calc(0.8125rem + var(--rk-type-bump)); }

/* ── Plugins RIKA actually uses ─────────────────────────────────────────────────
   Everything else in the theme's plugin CSS belongs to Skote demo pages this app
   never renders, and is left alone. */
.swal2-modal { font-size: calc(14px + var(--rk-type-bump)); }
.swal2-container .swal2-title { font-size: calc(20px + var(--rk-type-bump)); }

.fc-event { font-size: calc(0.8125rem + var(--rk-type-bump)); }
.fc .fc-toolbar h2 { font-size: calc(16px + var(--rk-type-bump)); }
.fc .fc-daygrid-more-link { font-size: calc(11px + var(--rk-type-bump)); }

.parsley-errors-list > li { font-size: calc(12px + var(--rk-type-bump)); }
.apexcharts-legend-text { font-size: calc(13px + var(--rk-type-bump)) !important; }
