/* ==========================================================================
   type.css  --  THE TYPE SYSTEM  (loaded AFTER style.css on every page)

   Fonts   : Inter (body/UI)  +  Plus Jakarta Sans (headings, brand, big money)
   Scale   : fluid on marketing pages (clamp), fixed and compact in the app
   Rules   : never go below 12px; form fields are 16px on phones so iOS does
             not zoom; money and table digits are tabular so columns line up.
   Change a size here once and the whole site follows.
   ========================================================================== */
:root {
  /* app (dashboard/admin) sizes */
  --fs-2xs: .75rem;      /* 12px  smallest allowed: badges, captions        */
  --fs-xs: .8125rem;     /* 13px  helper text, table headers, nav labels    */
  --fs-sm: .875rem;      /* 14px  table cells, secondary text               */
  --fs-md: .9375rem;     /* 15px  default app text                          */
  --fs-lg: 1.0625rem;    /* 17px  card titles                               */
  --fs-xl: 1.25rem;      /* 20px  page titles in the app                    */
  /* marketing */
  --fs-body: 1.0625rem;  /* 17px                                            */
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --fs-h1: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --track-display: -.035em;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss03", "calt";   /* Inter: single-storey a, round punctuation */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- the app shells use a tighter, calmer size ---- */
.dash-shell, .admin-shell, .auth-card { font-size: var(--fs-md); line-height: 1.5; }

/* ---- headings ---- */
h1, h2, h3, h4, h5, h6, .brand, .navbar-brand-ap {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.12; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.015em; }
h5 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
h6 { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; }

/* inside the apps, headings are smaller than on the marketing site */
.dash-shell h1, .admin-shell h1 { font-size: var(--fs-xl); letter-spacing: -.025em; }
.dash-shell h2, .admin-shell h2 { font-size: 1.125rem; letter-spacing: -.02em; font-weight: 700; }
.dash-shell h3, .admin-shell h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
.dash-shell h4, .admin-shell h4 { font-size: var(--fs-md); }

p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.6; font-weight: 400; color: var(--ap-muted); }
.dash-shell .lead, .admin-shell .lead { font-size: var(--fs-sm); }
small, .small { font-size: var(--fs-xs); }
strong, b { font-weight: 650; }

.eyebrow {
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---- buttons ---- */
.btn-ap, .btn, button, .abtn {
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em;
}
.btn-ap { padding: .8rem 1.4rem; line-height: 1.2; }
.btn-sm, .btn-sm.btn-ap { font-size: var(--fs-xs); }

/* ---- forms (16px on phones stops iOS zooming into the field) ---- */
label, .form-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .005em; }
input, select, textarea, .form-control-ap, .ainput { font-family: var(--font-body); font-size: 1rem; }
@media (min-width: 768px) {
  .dash-shell input, .dash-shell select, .dash-shell textarea { font-size: var(--fs-md); }
}
::placeholder { font-weight: 400; opacity: .6; }

/* ---- tables ---- */
table { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
th { font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }

/* ---- money and big numbers: tabular figures, slightly tighter ---- */
.bal, .wallet-card .bal, .stat-num, .stat-tile h3, .akpi .val, .av, .tt-val,
.t-amt, .pp-sum .total b, .num, [data-money], #ptTotal {
  font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em;
}
.wallet-card .bal { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); line-height: 1.1; }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-size: .9em; }

/* ---- navigation text ---- */
.navbar-ap .nav-link { font-size: var(--fs-md); font-weight: 550; }
.dash-sidebar a.menu { font-size: var(--fs-md); font-weight: 550; }
.dash-sidebar .nav-group { font-size: var(--fs-2xs); letter-spacing: .12em; }
.bottom-nav a, .bottom-nav button, .bn-item { font-size: var(--fs-2xs); font-weight: 600; }
.amenu { font-size: var(--fs-md); font-weight: 550; }
.badge, .abadge { font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .01em; }

/* ---- floor: nothing smaller than 12px anywhere in the app chrome ---- */
.dash-shell [style*="font-size:.6"], .dash-shell [style*="font-size:.7rem"] { font-size: var(--fs-2xs) !important; }

/* ---- footer ---- */
.footer h5 { font-size: var(--fs-sm); letter-spacing: .02em; }
.footer a { font-size: var(--fs-sm); }

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .btn-ap { padding: .85rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- brand mark: the same logo as the app icon, everywhere ---- */
.brand-mark { font-size: 0; color: transparent; background: url("../images/logo-mark.svg") center / cover no-repeat !important; box-shadow: 0 6px 16px -6px rgba(14,159,110,.55); }