/* IT360 Public / Auth Typography V2
   Shared readable type scale for login, employee portal and public support. */

:root {
  --public-ui-font:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --public-ui-body: 14px;
  --public-ui-copy: 13px;
  --public-ui-caption: 11.5px;
  --public-ui-label: 12px;
  --public-ui-control: 13px;
  --public-ui-button: 12px;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--public-ui-font) !important;
  font-size: var(--public-ui-body) !important;
  line-height: 1.5 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body p {
  font-size: var(--public-ui-copy) !important;
  line-height: 1.5 !important;
}

body small {
  font-size: var(--public-ui-caption) !important;
  line-height: 1.4 !important;
}

body label {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea
) {
  font-family: var(--public-ui-font) !important;
  font-size: var(--public-ui-control) !important;
  line-height: 1.4 !important;
}

body :is(button, .btn, [role="button"], summary) {
  font-family: var(--public-ui-font) !important;
  font-size: var(--public-ui-button) !important;
  line-height: 1.3 !important;
}

body table {
  font-size: 12.5px !important;
}

body table th {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

body table td {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

body :is(
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="badge"],
  [class*="pill"],
  [class*="chip"],
  [class*="tag"],
  [class*="hint"],
  [class*="help"],
  [class*="meta"],
  [class*="status"]
) {
  font-size: var(--public-ui-caption) !important;
  line-height: 1.35 !important;
}

body :is(
  [class*="field"],
  [class*="form"]
) :is(label, small) {
  font-size: var(--public-ui-label) !important;
}

body :is(
  [class*="card"],
  [class*="panel"],
  [class*="section"],
  [class*="summary"]
) > p,
body :is(
  [class*="card"],
  [class*="panel"],
  [class*="section"],
  [class*="summary"]
) small {
  font-size: 11.5px !important;
}

@media (max-width: 620px) {
  body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea
  ) {
    font-size: 16px !important;
  }
}