/* =====================================================================
   CacaoFlow — Typography (one font, one type scale, every page)

   Plus Jakarta Sans everywhere (readable, friendly, modern). Loaded LAST
   on every page so it wins over the pages' own inline sizes and the
   shared light/dark theme sheets. Font and type only: no colours, no
   layout.

   Type scale
     Page title (topbar)        28px / 700 / 1.2 / -0.01em
     Section / card title       18px / 600
     Body                       15px / 400 / 1.6
     Labels + table headers     13px / 500, sentence/Title case (no caps)
     Helper / muted text        13px / 400
     KPI values                 28px / 700, tabular numbers
     Buttons                    14px / 600
     Nothing below 12px anywhere.

   The CacaoFlow wordmark keeps its own face (Playfair Display, loaded as
   a tiny "CacaoFlow"-only subset) — the logo is not part of this change.
   ===================================================================== */

:root {
  --cf-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf-font-wordmark: "Playfair Display", Georgia, serif;
}

/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */

html body {
  font-family: var(--cf-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body button,
html body input,
html body select,
html body textarea,
html body .playfair {
  font-family: var(--cf-font);
}

/* ---------------------------------------------------------------------
   WORDMARK — unchanged (sidebar, login, set-password, receipt)
   --------------------------------------------------------------------- */

html body .logo-text,
html body .logo-text *,
html body .brand-name,
html body .brand-name *,
html body #receipt-modal .receipt-brand {
  font-family: var(--cf-font-wordmark) !important;
}

/* ---------------------------------------------------------------------
   PAGE TITLE — the topbar title on every page (+ login / set-password)
   --------------------------------------------------------------------- */

html body .page-title,
html body .login-header h1,
html body .visual-brand h2,
html body .st-heading,
html body .pf-heading,
html body .nc-heading {
  font-family: var(--cf-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* A phone topbar also holds the menu, search and bell buttons. */
@media (max-width: 480px) {
  html body .page-title {
    font-size: 22px !important;
  }
}

/* ---------------------------------------------------------------------
   SECTION / CARD TITLES — 18px / 600
   (in-page headings such as "Analytics and Reporting" are section titles)
   --------------------------------------------------------------------- */

html body .an-title,
html body .content-heading h2,
html body .intro h2,
html body .dss-intro h2,
html body .page-header h2,
html body .page-intro h2,
html body .an-card-title,
html body .chart-title,
html body .card-title,
html body .section-title,
html body .subsection-title,
html body .panel-title,
html body .recommendation-title,
html body .storage-title,
html body .product-panel h3,
html body .order-title,
html body .recent-title,
html body .dk-title,
html body .modal-title,
html body .logout-title,
html body .cf-modal-title,
html body .cf-confirm-title,
html body .rec-modal-title,
html body #receipt-modal .rv-title,
html body .st-title,
html body .print-title {
  font-family: var(--cf-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
}

/* ---------------------------------------------------------------------
   LABELS + TABLE HEADERS — 13px / 500, no ALL CAPS
   --------------------------------------------------------------------- */

html body th,
html body thead th,
html body .table-head,
html body .history-head,
html body .sort-btn,
html body .kpi-label,
html body .stat-label,
html body .dk-kpi-label,
html body .summary-label,
html body .section-label,
html body .form-label,
html body .field-label,
html body .info-label,
html body .detail-label,
html body .recommendation-label,
html body .dss-label,
html body .metric-label,
html body .progress-label,
html body .pm-label,
html body .menu-label,
html body .period-field label,
html body .pf-label,
html body .nc-group-title,
html body .rec-modal-label,
html body .rec-modal-block-label,
html body #receipt-modal .receipt-table th {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------------------------------------------------------------------
   HELPER / MUTED TEXT — 13px / 400
   --------------------------------------------------------------------- */

html body .range-label,
html body .an-card-sub,
html body .chart-description,
html body .table-note,
html body .content-heading p,
html body .section-subtitle,
html body .dk-subtitle,
html body .empty-chart-text,
html body .empty-text,
html body .helper-text,
html body .muted {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------------
   KPI VALUES — 28px / 700, tabular numbers
   --------------------------------------------------------------------- */

html body .kpi-value,
html body .stat-value,
html body .dk-kpi-value,
html body .summary-value {
  font-family: var(--cf-font) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   BUTTONS — 14px / 600
   --------------------------------------------------------------------- */

html body .btn,
html body .btn-gold,
html body .btn-outline,
html body .btn-primary,
html body .btn-secondary,
html body .dk-btn,
html body .an-btn,
html body .login-button,
html body .primary-button,
html body .modal-button,
html body .mini-btn,
html body .pc-btn,
html body .cf-confirm-btn,
html body .pf-btn,
html body .st-btn,
html body .rec-modal-button,
html body #receipt-modal .rv-btn {
  font-family: var(--cf-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

/* ---------------------------------------------------------------------
   LONGER LABELS (Tagalog, wider font) — wrap to two lines, never cut
   --------------------------------------------------------------------- */

html body .dk-name,
html body .nc-name {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

html body .data-table th,
html body .data-table th .sort-btn {
  white-space: normal !important;
}

/* Wide tables: long product names may take two lines so the row fits */
html body .data-table.wide td.product-cell {
  white-space: normal !important;
  min-width: 100px;
}

/* ---------------------------------------------------------------------
   NUMBERS — equal-width digits in tables, prices, weights, receipts
   --------------------------------------------------------------------- */

html body td,
html body .num,
html body .tnum,
html body .product-price,
html body .qty-value,
html body .summary-total,
html body .dk-value,
html body .metric-value,
html body .activity-value,
html body .delta,
html body .kpi-delta,
html body .range-label,
html body #receipt-modal .receipt-table,
html body #receipt-modal .receipt-sums,
html body #receipt-modal .receipt-meta {
  font-variant-numeric: tabular-nums;
}