/*
 * Base styles and the type scale of Valere CRM.
 * The scale is the set of text styles the app's code uses (web/packages/crm/src,
 * web/shared/components); each class names the Tailwind utilities behind it.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-700);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* ── Type scale ── */

/* Page title: text-2xl font-medium */
.t-page-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

/* Section title: text-xl font-medium */
.t-section-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

/* Card title: text-base font-medium */
.t-card-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

/* Body: text-sm */
.t-body {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Body strong: text-sm font-semibold */
.t-body-strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Label: text-[13px] leading-5 text-gray-500, in sentence case (the design concept, POC-UI-1) */
.t-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-gray-500);
}

/* Caption: text-xs text-gray-500 */
.t-caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-gray-500);
}

/* Figure: text-[26px] leading-8 font-medium tabular-nums */
.t-figure {
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Small figure: text-lg font-semibold tabular-nums (deal clock dates, stage counts) */
.t-figure-sm {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}