/**
 * Freelancer dashboard type scale — app dashboard only (not Sites / marketing pages).
 * ee-association uses ee-association-lexend.css for Lexend + the same sizes.
 * Base type size: 16px (html root) so rem-based UI scales from that.
 */

html:has(body.app-dashboard:not([theme-color="ee-association"])) {
  font-size: 16px;
}

body.app-dashboard:not([theme-color="ee-association"]) {
  --bs-body-font-size: 1rem; /* 16px */
  /* Type scale tokens (relative to 16px root) */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2rem;      /* 32px */
  --fs-4xl: 2.25rem;   /* 36px */
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* Forms / buttons / small — inherit scale from 16px base */
body.app-dashboard:not([theme-color="ee-association"]) .form-control:not(.form-control-sm):not(.form-control-lg),
body.app-dashboard:not([theme-color="ee-association"]) .form-select:not(.form-select-sm):not(.form-select-lg) {
  font-size: var(--fs-base);
}

body.app-dashboard:not([theme-color="ee-association"]) .btn:not(.btn-sm):not(.btn-lg),
body.app-dashboard:not([theme-color="ee-association"]) button:not(.btn-sm):not(.btn-lg) {
  font-size: var(--fs-base);
}

body.app-dashboard:not([theme-color="ee-association"]) .btn-sm {
  font-size: var(--fs-sm);
}

body.app-dashboard:not([theme-color="ee-association"]) .btn-lg {
  font-size: var(--fs-lg);
}

body.app-dashboard:not([theme-color="ee-association"]) small,
body.app-dashboard:not([theme-color="ee-association"]) .small,
body.app-dashboard:not([theme-color="ee-association"]) .form-text {
  font-size: var(--fs-sm);
}

body.app-dashboard:not([theme-color="ee-association"]) .badge {
  font-size: var(--fs-xs);
}

/* Heading scale from 16px base */
body.app-dashboard:not([theme-color="ee-association"]) h1,
body.app-dashboard:not([theme-color="ee-association"]) .h1,
body.app-dashboard:not([theme-color="ee-association"]) .page-title {
  font-size: var(--fs-3xl);
  line-height: 1.25;
}

body.app-dashboard:not([theme-color="ee-association"]) h2,
body.app-dashboard:not([theme-color="ee-association"]) .h2 {
  font-size: var(--fs-2xl);
  line-height: 1.3;
}

body.app-dashboard:not([theme-color="ee-association"]) h3,
body.app-dashboard:not([theme-color="ee-association"]) .h3,
body.app-dashboard:not([theme-color="ee-association"]) .card-title {
  font-size: var(--fs-xl);
  line-height: 1.35;
}

body.app-dashboard:not([theme-color="ee-association"]) h4,
body.app-dashboard:not([theme-color="ee-association"]) .h4 {
  font-size: var(--fs-lg);
  line-height: 1.4;
}

body.app-dashboard:not([theme-color="ee-association"]) h5,
body.app-dashboard:not([theme-color="ee-association"]) .h5 {
  font-size: var(--fs-md);
  line-height: 1.4;
}

body.app-dashboard:not([theme-color="ee-association"]) h6,
body.app-dashboard:not([theme-color="ee-association"]) .h6 {
  font-size: var(--fs-base);
  line-height: 1.45;
}

body.app-dashboard:not([theme-color="ee-association"]) .display-1 { font-size: 3.2rem; }
body.app-dashboard:not([theme-color="ee-association"]) .display-2 { font-size: 2.8rem; }
body.app-dashboard:not([theme-color="ee-association"]) .display-3 { font-size: 2.4rem; }
body.app-dashboard:not([theme-color="ee-association"]) .display-4 { font-size: var(--fs-4xl); }
body.app-dashboard:not([theme-color="ee-association"]) .display-5 { font-size: var(--fs-3xl); }
body.app-dashboard:not([theme-color="ee-association"]) .display-6 { font-size: var(--fs-2xl); }