/* ---------------------------------------------------------------------------
   Material 3 type scale.

   SOURCE OF TRUTH: src/Hansell.UI/Resources/Styles/Styles.xaml, where these exist as
   StyleClasses on Label. Sizes are converted px -> rem at a 16px root so browser text
   scaling works; the mobile px value is kept in a comment on each line for diffing.

   Font families map to the MAUI aliases registered in MauiProgram/DependencyInjection:
     Regular / Medium / SemiBold / Bold  ->  Encode Sans at 400 / 500 / 600 / 700
   --------------------------------------------------------------------------- */

:root {
  --font-sans: "Encode Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-icons: "Material Symbols Rounded";

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

  --line-height-default: 1.2; /* Styles.xaml applies LineHeight 1.2 across the scale */
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--on-background);
  /* Implicit Label style: Regular, 12px */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-regular);
  line-height: var(--line-height-default);
  -webkit-font-smoothing: antialiased;
}

.display-medium   { font-size: 2.8125rem; font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 45 */
.display-small    { font-size: 2.25rem;   font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 36 */
.headline-large   { font-size: 2rem;      font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 32 */
.headline-medium  { font-size: 1.75rem;   font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 28 */
.headline-small   { font-size: 1.5rem;    font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 24 */
.title-large      { font-size: 1.375rem;  font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 22 */
.title-medium     { font-size: 1rem;      font-weight: var(--weight-medium);  line-height: var(--line-height-default); } /* 16 */
.title-small      { font-size: 0.875rem;  font-weight: var(--weight-medium);  line-height: var(--line-height-default); } /* 14 */
.body-large       { font-size: 1rem;      font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 16 */
.body-medium      { font-size: 0.875rem;  font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 14 */
.body-small       { font-size: 0.75rem;   font-weight: var(--weight-regular); line-height: var(--line-height-default); } /* 12 */
.label-large      { font-size: 0.875rem;  font-weight: var(--weight-medium);  line-height: var(--line-height-default); } /* 14 */
.label-large-prominent  { font-size: 0.875rem; font-weight: var(--weight-bold); line-height: var(--line-height-default); } /* 14 */
.label-medium     { font-size: 0.75rem;   font-weight: var(--weight-medium);  line-height: var(--line-height-default); } /* 12 */
.label-medium-prominent { font-size: 0.75rem; font-weight: var(--weight-bold); line-height: var(--line-height-default); } /* 12 */
.label-small      { font-size: 0.6875rem; font-weight: var(--weight-medium);  line-height: var(--line-height-default); } /* 11 */