/* ============================================================================
   AL-MANARA - ONE TYPE SCALE for the whole system   (generated 2026-10-07)
   ----------------------------------------------------------------------------
   Eight sizes with fixed roles, in three responsive tiers (phone < 640px, tablet 640-1023px, desktop >= 1024px):
       label    UPPERCASE captions, column headers, badges
       caption  secondary text, dates, hints
       body     default UI text, table cells
       value    emphasised values, inputs, card titles
       title    section titles          heading  screen headings
       display  large headings          kpi      KPI numbers
   NEW code uses the utility classes  .t-label .t-caption .t-body .t-value .t-title .t-heading .t-display .t-kpi  (and
   .t-num for tabular digits) or the variables  var(--fs-body)  etc. - never a hand-picked pixel size.
   The rules below map every Tailwind size class the markup already uses onto the scale, so old markup follows it too.
   Sizes only - colours stay with the theme (light / dark), so both themes get the same sizes.
   ========================================================================== */
:root {
  --fs-label: 10px;
  --fs-caption: 11px;
  --fs-body: 12px;
  --fs-value: 13px;
  --fs-title: 14px;
  --fs-heading: 16px;
  --fs-display: 20px;
  --fs-kpi: 26px;
  --fs-lh: 1.45;
}
@media (max-width: 1023px) {
  :root {
    --fs-label: 10.5px;
    --fs-caption: 11.5px;
    --fs-body: 12.5px;
    --fs-value: 13.5px;
    --fs-title: 15px;
    --fs-heading: 17px;
    --fs-display: 20px;
    --fs-kpi: 26px;
  }
}
@media (max-width: 639px) {
  :root {
    --fs-label: 10.5px;
    --fs-caption: 11.5px;
    --fs-body: 13px;
    --fs-value: 14px;
    --fs-title: 15px;
    --fs-heading: 17px;
    --fs-display: 20px;
    --fs-kpi: 24px;
  }
}

.t-label { font-size: var(--fs-label); }
.t-caption { font-size: var(--fs-caption); }
.t-body { font-size: var(--fs-body); }
.t-value { font-size: var(--fs-value); }
.t-title { font-size: var(--fs-title); }
.t-heading { font-size: var(--fs-heading); }
.t-display { font-size: var(--fs-display); }
.t-kpi { font-size: var(--fs-kpi); }
.t-num, .tabular-nums { font-variant-numeric: tabular-nums; }   /* .tabular-nums: used by existing markup but missing from the compiled Tailwind CSS */

/* defaults for text without a size class */
body { font-size: var(--fs-body); line-height: var(--fs-lh); }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-heading); }
h3 { font-size: var(--fs-title); }
h4, h5, h6 { font-size: var(--fs-value); }
button, input, select, textarea, option { font-size: var(--fs-body); }

/* existing Tailwind size classes -> the scale (same cascade order as styles-compiled.css) */
.text-\[18px\] { font-size: var(--fs-heading); }
.text-2xl { font-size: var(--fs-kpi); }
.text-\[10px\] { font-size: var(--fs-label); }
.text-\[11px\] { font-size: var(--fs-caption); }
.text-\[12px\] { font-size: var(--fs-body); }
.text-\[13px\] { font-size: var(--fs-value); }
.text-\[9px\] { font-size: var(--fs-label); }
.text-base { font-size: var(--fs-title); }
.text-lg { font-size: var(--fs-heading); }
.text-sm { font-size: var(--fs-value); }
.text-xl { font-size: var(--fs-display); }
.text-xs { font-size: var(--fs-body); }
@media (min-width: 768px) {
  .md\:text-\[9px\] { font-size: var(--fs-label); }
  .md\:text-\[12px\] { font-size: var(--fs-body); }
  .md\:text-\[13px\] { font-size: var(--fs-value); }
  .md\:text-\[18px\] { font-size: var(--fs-heading); }
  .md\:text-2xl { font-size: var(--fs-kpi); }
  .md\:text-\[10px\] { font-size: var(--fs-label); }
  .md\:text-\[11px\] { font-size: var(--fs-caption); }
  .md\:text-base { font-size: var(--fs-title); }
  .md\:text-lg { font-size: var(--fs-heading); }
  .md\:text-sm { font-size: var(--fs-value); }
  .md\:text-xl { font-size: var(--fs-display); }
  .md\:text-xs { font-size: var(--fs-body); }
}