/* AP OneFlow Preview 02 - Unified Typography Foundation
   One global typography layer for every page and module.
   No external CDN/API and no bundled font binaries. */

:root {
  --ap-font-ui: "Lato", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", Arial, sans-serif;

  --ap-weight-regular: 400;
  --ap-weight-medium: 500;
  --ap-weight-semibold: 600;
  --ap-weight-bold: 700;

  --ap-text-heading: #303846;
  --ap-text-primary: #465160;
  --ap-text-secondary: #667085;
  --ap-text-muted: #7a8493;
  --ap-text-disabled: #a3aab7;

  --ap-line-heading: 1.24;
  --ap-line-body: 1.55;
  --ap-line-compact: 1.35;
}

html,
body {
  font-family: var(--ap-font-ui) !important;
  font-synthesis: none;
  color: var(--ap-text-primary);
  line-height: var(--ap-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body :where(
  button,
  input,
  select,
  textarea,
  option,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  th,
  td,
  label,
  a,
  p,
  small,
  strong,
  b,
  em,
  i,
  code,
  kbd,
  samp,
  blockquote,
  summary,
  details
) {
  font-family: var(--ap-font-ui) !important;
}

/* Keep icon-font glyphs intact if a future module uses them. */
body :where(
  .material-icons,
  .material-symbols-outlined,
  .fa,
  .fas,
  .far,
  .fab,
  [class^="fa-"],
  [class*=" fa-"]
) {
  font-family: inherit;
}

body {
  font-size: 15px;
  font-weight: var(--ap-weight-regular);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.hero-title,
.section-title,
.module-title,
.card-title,
.panel-title,
.modal-title,
.dialog-title,
.admin-title,
.auth-title,
.welcome-title,
.kpi-title,
.metric-title {
  font-family: var(--ap-font-ui) !important;
  color: var(--ap-text-heading);
  font-weight: var(--ap-weight-semibold) !important;
  line-height: var(--ap-line-heading);
  letter-spacing: -0.012em;
}

h1,
.page-title,
.hero-title,
.welcome-title {
  font-size: clamp(2rem, 3.2vw, 2.45rem);
  letter-spacing: -0.022em;
}

h2,
.section-title,
.admin-title,
.auth-title {
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
}

h3,
.module-title,
.card-title,
.panel-title,
.modal-title,
.dialog-title {
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
}

p,
.description,
.subtitle,
.sub-title,
.helper-text,
.help-text,
.hint,
.caption,
.meta,
.text-muted,
.muted,
.breadcrumb,
.card-description,
.module-description,
.empty-description {
  font-weight: var(--ap-weight-regular) !important;
  color: var(--ap-text-secondary);
  line-height: var(--ap-line-body);
}

small,
.caption,
.meta,
.helper-text,
.help-text,
.hint,
.text-muted,
.muted,
.card-description,
.module-description {
  color: var(--ap-text-muted);
}

button,
.btn,
.button,
[role="button"],
.nav-link,
.nav-item,
.menu-item,
.tab,
.tab-button,
.badge,
.pill,
.chip,
label,
th,
.table-header,
.filter-label,
.form-label {
  font-weight: var(--ap-weight-medium) !important;
  letter-spacing: 0;
}

button,
.btn,
.button,
[role="button"] {
  line-height: var(--ap-line-compact);
}

input,
select,
textarea {
  font-size: 14px;
  font-weight: var(--ap-weight-regular) !important;
  color: var(--ap-text-primary);
  line-height: 1.4;
}

input::placeholder,
textarea::placeholder {
  color: var(--ap-text-disabled);
  opacity: 1;
}

th,
.table-header {
  color: #4b5665;
  font-weight: var(--ap-weight-semibold) !important;
}

td,
.table-cell {
  color: var(--ap-text-primary);
  font-weight: var(--ap-weight-regular) !important;
}

strong,
b {
  font-weight: var(--ap-weight-semibold) !important;
}

.kpi-value,
.metric-value,
.stat-value,
.summary-value,
.dashboard-number {
  font-family: var(--ap-font-ui) !important;
  color: var(--ap-text-heading);
  font-weight: var(--ap-weight-bold) !important;
  letter-spacing: -0.018em;
}

/* Remove overly heavy typography inherited from older previews. */
body :where(
  .font-black,
  .font-extrabold,
  .fw-800,
  .fw-900,
  [style*="font-weight: 800"],
  [style*="font-weight:800"],
  [style*="font-weight: 900"],
  [style*="font-weight:900"]
) {
  font-weight: var(--ap-weight-semibold) !important;
}

/* Avoid pure-black UI text while preserving semantic status colors. */
body :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .page-title,
  .hero-title,
  .section-title,
  .module-title,
  .card-title,
  .panel-title,
  .modal-title,
  .dialog-title,
  .admin-title,
  .auth-title,
  .welcome-title
) {
  color: var(--ap-text-heading) !important;
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  h1,
  .page-title,
  .hero-title,
  .welcome-title { font-size: 1.9rem; }
  h2,
  .section-title,
  .admin-title,
  .auth-title { font-size: 1.5rem; }
}

@media print {
  html,
  body,
  body * {
    font-family: var(--ap-font-ui) !important;
    text-shadow: none !important;
  }
}