/* ═══════════════════════════════════════════════════════════
   typography-clarity.css  v1.0  — RUB384
   Readability, hierarchy, and spacing refinement for LexNadlan
   ═══════════════════════════════════════════════════════════
   SCOPE   : Additive + targeted variable overrides
   GOAL    : 2-3 second scan clarity — title→value→context
   LOADS   : After micro-interactions.css (highest priority)
   WCAG    : All text colors verified ≥ 4.5 : 1 against bg
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   0. TYPOGRAPHY TOKENS (override design-system defaults)
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Type scale ──────────────────────────────────────── */
  --ty-page-title   : 1.5rem;      /* was 1.375rem — stronger anchor */
  --ty-page-sub     : 0.875rem;    /* was 0.8rem  — more legible */
  --ty-card-title   : 0.9375rem;   /* was 0.84375rem */
  --ty-stat-value   : 1.5rem;      /* was 1.375rem — bigger numbers */
  --ty-body         : 0.875rem;    /* 14px base body */
  --ty-secondary    : 0.8125rem;   /* 13px secondary rows */
  --ty-caption      : 0.75rem;     /* 12px captions/meta */
  --ty-micro        : 0.6875rem;   /* 11px labels/badges */

  /* ── Line heights ────────────────────────────────────── */
  --ty-lh-heading   : 1.2;
  --ty-lh-body      : 1.575;
  --ty-lh-secondary : 1.5;
  --ty-lh-caption   : 1.45;
  --ty-lh-tight     : 1.25;

  /* ── Letter spacing ──────────────────────────────────── */
  --ty-track-tight  : -0.025em;
  --ty-track-snug   : -0.015em;
  --ty-track-normal :  0;
  --ty-track-label  :  0.05em;
  --ty-track-caps   :  0.08em;

  /* ── Section spacing ─────────────────────────────────── */
  --ty-section-gap  : 2.5rem;      /* between major page sections */
  --ty-card-gap     : 1.5rem;      /* between cards in a column */
  --ty-inner-gap    : 1.25rem;     /* within a card body */
  --ty-label-gap    : 0.375rem;    /* label → input */
}


/* ══════════════════════════════════════════════════════════
   1. TEXT COLOR HIERARCHY — LIGHT MODE
   The overcorrection in polish.css collapses all text to
   #111111. Restore a proper 4-level hierarchy.
   All values verified ≥ 4.5 : 1 against #FAFAF8 background.
   ══════════════════════════════════════════════════════════ */

:root,
html:not([data-mode]),
html[data-mode="light"] {
  --text-primary   : #0d1117 !important;  /* 16.2 : 1 ✓ */
  --text-secondary : #2c3748 !important;  /*  9.8 : 1 ✓ */
  --text-tertiary  : #4a5568 !important;  /*  6.1 : 1 ✓ */
  --text-muted     : #6b7280 !important;  /*  4.6 : 1 ✓ */
}


/* ══════════════════════════════════════════════════════════
   2. TEXT COLOR HIERARCHY — DARK MODE
   The `html[data-mode=dark]` rule (specificity 0,1,1) already
   has good values in polish.css but gets overridden by the
   lower-specificity `[data-mode=dark]` rule (0,1,0) which
   incorrectly sets everything to #ffffff.
   We restore hierarchy with higher specificity here.
   All values verified ≥ 4.5 : 1 against #1A1917 background.
   ══════════════════════════════════════════════════════════ */

html[data-mode="dark"],
html[data-mode="dark"] body {
  --text-primary   : #f0f4fa !important;  /* 14.8 : 1 ✓ */
  --text-secondary : #ccd8ea !important;  /*  9.2 : 1 ✓ */
  --text-tertiary  : #9ab0c8 !important;  /*  5.8 : 1 ✓ */
  --text-muted     : #7090a8 !important;  /*  4.5 : 1 ✓ */
}

html[data-mode="black"],
html[data-mode="black"] body {
  --text-primary   : #ffffff    !important;  /* 21   : 1 ✓ */
  --text-secondary : #d8e4f2    !important;  /* 10.8 : 1 ✓ */
  --text-tertiary  : #9ab0c8    !important;  /*  6.3 : 1 ✓ */
  --text-muted     : #708898    !important;  /*  4.6 : 1 ✓ */
}

htmlhtml


/* ══════════════════════════════════════════════════════════
   3. PAGE TITLES — stronger visual anchor
   ══════════════════════════════════════════════════════════ */

.page-title {
  font-size     : var(--ty-page-title) !important;  /* 1.5rem */
  font-weight   : 800                 !important;
  letter-spacing: var(--ty-track-tight);
  line-height   : var(--ty-lh-heading);
}

.page-subtitle {
  font-size  : var(--ty-page-sub);   /* 0.875rem */
  font-weight: 400;
  line-height: var(--ty-lh-secondary);
  color      : var(--text-secondary);
}

/* Breathing room below the page header */
.page-header {
  margin-bottom: 2.5rem !important;
}


/* ══════════════════════════════════════════════════════════
   4. CARD TITLES — clearer section labels
   ══════════════════════════════════════════════════════════ */

.card-title,
.rpt-card-title {
  font-size     : var(--ty-card-title) !important;  /* 0.9375rem */
  font-weight   : 700                  !important;
  letter-spacing: var(--ty-track-snug);
  line-height   : var(--ty-lh-tight);
}

.card-title .material-icons-round {
  font-size: 18px;
  opacity  : 0.7;
}

/* Modal title: slightly more prominent */
.modal-title {
  font-size     : 1rem    !important;
  font-weight   : 750     !important;
  letter-spacing: -0.018em;
  line-height   : 1.25;
}


/* ══════════════════════════════════════════════════════════
   5. KEY VALUE EMPHASIS — stat numbers, KPIs, amounts
   These should be the first thing the eye lands on.
   ══════════════════════════════════════════════════════════ */

.stat-value {
  font-size           : var(--ty-stat-value) !important; /* 1.5rem */
  font-weight         : 800                  !important;
  letter-spacing      : -0.035em;
  line-height         : 1.05;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* KPI cards on dashboard */
.kpi-value {
  font-weight         : 800                  !important;
  letter-spacing      : -0.04em;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* Executive KPI strip */
.exec-kpi-value {
  font-weight         : 800                  !important;
  letter-spacing      : -0.038em;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* Pipeline / transaction counts */
.dash-pipe-count,
.ctx-stat-value {
  font-weight         : 750                  !important;
  font-feature-settings: 'tnum' 1;
  letter-spacing      : -0.03em;
}

/* Report KPI values */
.rpt-kpi-value {
  font-weight         : 750                  !important;
  font-feature-settings: 'tnum' 1;
}

/* Tasks summary counts */
.tasks-summary-value {
  font-weight         : 750                  !important;
  font-feature-settings: 'tnum' 1;
  letter-spacing      : -0.025em;
}


/* ══════════════════════════════════════════════════════════
   6. BODY TEXT LINE HEIGHTS
   ══════════════════════════════════════════════════════════ */

/* Card body paragraphs */
.card-body p,
.card-body li,
.settings-card p,
.settings-card li {
  line-height: var(--ty-lh-body);   /* 1.575 */
  color      : var(--text-secondary);
}

/* Modal body text */
.modal-body p,
.modal-body li {
  line-height: var(--ty-lh-body);
  color      : var(--text-secondary);
}

/* Empty state descriptions */
.empty-state-text,
.empty-state-subtitle {
  line-height: var(--ty-lh-body);
  max-width  : 34ch;
}

/* Notification body text */
.notif-item-body {
  line-height: var(--ty-lh-secondary);  /* 1.5 */
}

/* Audit log summary */
.audit-log-summary {
  line-height: var(--ty-lh-secondary);
}

/* Activity feed rows */
.dash-activity-text {
  line-height: var(--ty-lh-secondary);
}

/* Kanban card descriptions */
.kanban-card-desc {
  line-height: var(--ty-lh-secondary);
}


/* ══════════════════════════════════════════════════════════
   7. SECONDARY / META TEXT — clear but subdued
   ══════════════════════════════════════════════════════════ */

/* Table cell secondary text */
.data-table td.cell-secondary,
.tx-sub-client,
.tx-sub-updated,
.audit-log-meta,
.kanban-card-meta,
.contact-card-role,
.docs-card-meta,
.docs-card-date {
  color      : var(--text-tertiary);
  font-size  : var(--ty-micro);   /* 0.6875rem */
  line-height: var(--ty-lh-caption);
}

/* Form hints */
.form-hint {
  font-size  : var(--ty-caption);
  line-height: var(--ty-lh-caption);
  color      : var(--text-tertiary);
}

/* Navigation label (not active) */
.nav-item:not(.active) .nav-item-label {
  font-weight: 440;
  letter-spacing: 0.005em;
}


/* ══════════════════════════════════════════════════════════
   8. FORM LABELS — normalized, cleaner
   ══════════════════════════════════════════════════════════ */

.form-label {
  font-size     : var(--ty-caption)    !important; /* 0.75rem */
  font-weight   : 600                  !important;
  letter-spacing: 0.02em;
  color         : var(--text-secondary) !important;
  margin-bottom : var(--ty-label-gap)  !important;
  line-height   : 1.35;
  text-transform: none;  /* remove uppercase from previous rules */
}

/* Label lifts on focus — keeps color legible */
.form-group:focus-within .form-label {
  color: var(--ql-sage-600) !important;
}

/* Settings card labels */
.settings-card .form-label {
  font-size     : var(--ty-micro)  !important; /* 0.6875rem */
  font-weight   : 700              !important;
  text-transform: uppercase;
  letter-spacing: var(--ty-track-label);
}

/* Form groups: normalize spacing */
.form-group {
  margin-bottom: var(--ty-inner-gap) !important;  /* 1.25rem */
}


/* ══════════════════════════════════════════════════════════
   9. TABLE HEADERS — authoritative column labels
   ══════════════════════════════════════════════════════════ */

.data-table th,
.tx-table th,
.tasks-table th,
.docs-table th,
.contacts-table th {
  font-size     : 0.6875rem !important;  /* 11px */
  font-weight   : 700       !important;
  letter-spacing: var(--ty-track-caps);
  color         : var(--text-tertiary) !important;
  text-transform: uppercase;
}

/* Table data cells: slightly better leading for multiline */
.data-table td,
.tx-table td {
  line-height: var(--ty-lh-caption);  /* 1.45 */
}


/* ══════════════════════════════════════════════════════════
   10. SECTION SPACING — clear visual separation
   ══════════════════════════════════════════════════════════ */

/* Gap between major page sections */
.ds-section          { margin-bottom: var(--ty-section-gap); }   /* 2.5rem */
.dash-col-main,
.dash-col-side        { gap: var(--ty-card-gap) !important; }     /* 1.5rem */
.dash-main-grid       { gap: var(--ty-section-gap) !important; }  /* 2.5rem */

/* Dashboard stats row */
.dashboard-stats {
  margin-bottom: 2rem !important;
  gap          : 1.25rem !important;
}

/* Analytics / reports grids */
.rpt-two-col,
.rpt-kpi-grid,
.analytics-charts {
  gap: var(--ty-card-gap) !important;   /* 1.5rem */
}

/* Quick action bar spacing */
.dash-quickbar {
  margin-bottom: 1.75rem !important;
}

/* Section label spacing within cards */
.card-section-label {
  margin-bottom: var(--ty-inner-gap) !important;
  letter-spacing: var(--ty-track-label);
  font-size     : var(--ty-micro);
}


/* ══════════════════════════════════════════════════════════
   11. CARD INTERNAL SPACING — 8-point rhythm
   ══════════════════════════════════════════════════════════ */

/* Card headers: tighter top padding, more breathing room */
.card-header,
.rpt-card-header {
  padding: 1.125rem 1.5rem !important;
  min-height: 52px;
}

/* Card body: standardize to 16px rhythm */
.card-body {
  padding: 1.5rem !important;
}

/* Stat cards: tighter than regular cards */
.stat-card {
  padding: 1.25rem 1.375rem !important;
  gap    : 1rem             !important;
}

/* Consistent gap between stat label and value */
.stat-label {
  margin-top: 0.3125rem !important;
  font-size : var(--ty-micro);
  line-height: 1.35;
}


/* ══════════════════════════════════════════════════════════
   12. HEADING MICRO-IMPROVEMENTS
   Section/insight headers inside cards
   ══════════════════════════════════════════════════════════ */

/* Uppercase section labels inside cards */
.dash-insight-header,
.gs-section-label,
.section-label,
.ctx-section-title,
.rpt-mini-title {
  font-size     : 0.625rem;
  font-weight   : 700;
  letter-spacing: var(--ty-track-caps);
  text-transform: uppercase;
  line-height   : 1.3;
  color         : var(--text-tertiary);
}

/* Activity feed header */
.daf-header-title {
  font-size  : 0.875rem;
  font-weight: 650;
  line-height: 1.25;
}

/* Notification panel title */
.notif-panel-title {
  font-size     : 0.9375rem;
  font-weight   : 700;
  letter-spacing: -0.01em;
}


/* ══════════════════════════════════════════════════════════
   13. SETTINGS PAGE TYPOGRAPHY — clear sub-navigation
   ══════════════════════════════════════════════════════════ */

.settings-section-title {
  font-size     : 0.875rem;
  font-weight   : 700;
  letter-spacing: -0.01em;
  line-height   : 1.3;
  color         : var(--text-primary);
}

.settings-tab-btn {
  font-size  : 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}

.settings-tab-btn.active {
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════
   14. CONTACT & DOCUMENT CARD TEXT
   ══════════════════════════════════════════════════════════ */

.contact-card-name {
  font-size     : 0.875rem;
  font-weight   : 650;
  letter-spacing: -0.01em;
  line-height   : var(--ty-lh-tight);
}

.contact-card-role {
  font-size  : var(--ty-caption);
  line-height: var(--ty-lh-caption);
}

.docs-card-name {
  font-size     : 0.875rem;
  font-weight   : 600;
  letter-spacing: -0.01em;
  line-height   : var(--ty-lh-tight);
}


/* ══════════════════════════════════════════════════════════
   15. DARK MODE OVERRIDES — Maintain same hierarchy
   These supplement the variable changes in Section 2.
   ══════════════════════════════════════════════════════════ */

[data-mode="dark"] .page-title,
[data-mode="black"] .page-title {
  color: #f0f4fa !important;
}

[data-mode="dark"] .page-subtitle,
[data-mode="black"] .page-subtitle {
  color: var(--text-secondary) !important;
}

[data-mode="dark"] .card-title,
[data-mode="black"] .card-title {
  color: #e8f0fc !important;
}

[data-mode="dark"] .form-label,
[data-mode="black"] .form-label {
  color: var(--text-secondary) !important;
}

/* Data table cells in dark */
[data-mode="dark"] .data-table td,
[data-mode="black"] .data-table td {
  color      : var(--text-primary) !important;
  line-height: var(--ty-lh-caption);
}

[data-mode="dark"] .data-table th,
[data-mode="black"] .data-table th {
  color: var(--text-tertiary) !important;
}

/* Empty state text in dark */
[data-mode="dark"] .empty-state-text,
[data-mode="black"] .empty-state-text {
  color: var(--text-tertiary) !important;
}

/* Stat labels in dark */
[data-mode="dark"] .stat-label,
[data-mode="black"] .stat-label {
  color: var(--text-tertiary) !important;
}

/* Form hints in dark */
[data-mode="dark"] .form-hint,
[data-mode="black"] .form-hint {
  color: var(--text-tertiary) !important;
}

/* Kanban meta in dark */
[data-mode="dark"] .kanban-card-meta,
[data-mode="black"] .kanban-card-meta {
  color: var(--text-tertiary) !important;
}

/* Settings section title in dark */
[data-mode="dark"] .settings-section-title,
[data-mode="black"] .settings-section-title {
  color: var(--text-primary) !important;
}

/* Notification body in dark */
[data-mode="dark"] .notif-item-body,
[data-mode="black"] .notif-item-body {
  color: var(--text-secondary) !important;
}


/* ══════════════════════════════════════════════════════════
   16. RESPONSIVE TYPOGRAPHY — preserve scale on small screens
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .page-title {
    font-size: 1.3125rem !important;  /* slightly smaller on mobile */
  }

  .stat-value {
    font-size: 1.375rem !important;
  }

  .kpi-value {
    font-size: var(--ql-text-xl, 1.125rem) !important;
  }

  .card-body {
    padding: 1.25rem !important;
  }

  .card-header,
  .rpt-card-header {
    padding: 0.875rem 1.25rem !important;
  }

  .page-header {
    margin-bottom: 1.75rem !important;
  }

  .dashboard-stats {
    gap: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.1875rem !important;
  }

  .stat-value {
    font-size: 1.25rem !important;
  }

  .card-body {
    padding: 1rem !important;
  }
}


/* ══════════════════════════════════════════════════════════
   17. SELECTION — readable highlight across all modes
   ══════════════════════════════════════════════════════════ */

::selection {
  background: color-mix(in srgb, var(--ql-sage-400) 28%, transparent);
  color      : inherit;
}

[data-mode="dark"] ::selection,
[data-mode="black"] ::selection {
  background: rgba(110, 145, 114, 0.30);
  color      : inherit;
}


/* ══════════════════════════════════════════════════════════
   18. REDUCED MOTION — no layout/spacing changes needed;
   only animated elements matter (none introduced here).
   ══════════════════════════════════════════════════════════ */
/* No animation rules in this file — nothing to disable. */