/* ==========================================================================
   MAKAN STUDIO — Type Layer
   Part of the Makan design system. See MAKAN-DESIGN-SYSTEM.md.

   Purpose: make the whole app read bigger and bolder.

   Production shipped with no root font-size (so 16px), body at weight 400 with
   no line-height, table cells at 13px and a muted tier down at 0.70rem.

   Loaded LAST in <head> on every page, so at equal specificity it wins over each
   page's inline <style>. Touches type and the line-boxes type sits in — no
   colors, no layout.

   Weights are picked from what the two families actually ship:
   Cairo 400/600/700/800/900 and Tajawal 400/500/700/800. Tajawal has no 600,
   so body weights step 500 → 700 with nothing in between.
   ========================================================================== */

:root {
  /* Type scale — rem against a 18px root. */
  --mk-text-xs:   0.75rem;  /* ~13.5px — chips, badges, timestamps  */
  --mk-text-sm:   0.86rem;  /* ~15.5px — labels, filters, cells     */
  --mk-text-base: 0.90rem;  /* ~16px   — body                        */
  --mk-text-md:   1.06rem;  /* ~19px   — card + modal titles        */
  --mk-text-lg:   1.28rem;  /* ~23px   — section headings           */
  --mk-text-xl:   1.55rem;  /* ~28px   — page titles                */
  --mk-text-2xl:  1.95rem;  /* ~35px   — hero numerals              */

  --mk-weight-body:    700;
  --mk-weight-medium:  700;
  --mk-weight-strong:  800;
  --mk-weight-display: 800;

  --mk-leading-tight: 1.3;
  --mk-leading-body:  1.65;
  --mk-tracking-display: -0.03em;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

html { font-size: 18px; }

body {
  font-size: var(--mk-text-base);
  font-weight: var(--mk-weight-body);
  line-height: var(--mk-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
  font-weight: var(--mk-weight-display);
  line-height: var(--mk-leading-tight);
  letter-spacing: var(--mk-tracking-display);
}
h1 { font-size: var(--mk-text-xl); }
h2 { font-size: var(--mk-text-lg); }
h3 { font-size: var(--mk-text-md); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

thead th,
table th {
  font-family: 'Cairo', sans-serif;
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-strong);
  letter-spacing: 0;
}

table td {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-body);
}

/* ── Controls ────────────────────────────────────────────────────────────── */

.filter-select,
.filter-label,
.mini-select,
.search,
#search-input,
select,
input,
textarea {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-body);
}

.field label,
.form-label,
label {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-medium);
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.nav-btn,
.btn-logout,
.btn-add,
.btn-report,
.tab,
.tab-btn {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-strong);
}

/* ── Named chrome ────────────────────────────────────────────────────────── */

.nav-title,
.card-title,
.modal-title {
  font-family: 'Cairo', sans-serif;
  font-size: var(--mk-text-md);
  font-weight: var(--mk-weight-display);
  letter-spacing: var(--mk-tracking-display);
}

/* Status, priority and role pills. These carry meaning and were the least
   legible text in the product at 10-11px. */
.badge,
.chip,
.project-chip,
.fchip,
.card-badge,
.hidden-col-chip,
.emp-role,
.cb-badge {
  font-size: var(--mk-text-xs);
  font-weight: var(--mk-weight-strong);
}

.muted,
.hint,
.sub,
small {
  font-size: var(--mk-text-xs);
  font-weight: var(--mk-weight-body);
}

/* ── Workstation grid ────────────────────────────────────────────────────────
   The sheet was built around 13px text in a 40px row. Grow the line-box with
   the type or the taller text clips against the fixed row height. */

#sheet-table th {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-strong);
  height: 46px;
}

#sheet-table td {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-body);
  height: 50px;
}

.cell-inner,
.cell-input,
.cell-select {
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-body);
}

.cell-inner { min-height: 50px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

#ws-sidebar .ws-sb-item { font-size: var(--mk-text-md); font-weight: var(--mk-weight-strong); }
#ws-sidebar .ws-sb-item.active { font-weight: 900; }
#ws-sidebar .ws-sb-wordmark { font-size: var(--mk-text-md); }
#ws-sidebar .ws-sb-head { font-size: var(--mk-text-xs); }
#ws-sidebar .ws-sb-footer { font-size: var(--mk-text-sm); font-weight: var(--mk-weight-medium); }

/* ── Accessibility guards ────────────────────────────────────────────────────
   iOS zooms the page when a focused field is under 16px. Restated here so the
   type layer can never undercut it. */

@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
