/*
  Sun Life typography regulation
  Converted from the reference table (fonts, sizes, leading, colours).
  Apply these utility classes to any element that needs the regulated type styles.
*/

:root {
  --sl-grey-900: #00263a;
  --sl-grey-800: #4b5b6a;
  --sl-tertiary-800: #005587;
}

/* Base helpers for the two brand faces */
.sl-type-text {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--sl-grey-900);
}

.sl-type-display {
  font-family: "SunLifeNewDisplay", Georgia, serif;
  font-weight: 400;
  color: var(--sl-grey-900);
}

/* Headings */
h1 {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 2rem;        /* 32px */
  line-height: 2.5rem;    /* 40px (1.25 ratio) */
  color: var(--sl-grey-900);
}

h1.display {
  font-family: "SunLifeNewDisplay", Georgia, serif;
  font-weight: 400;
  font-size: 2rem;        /* 32px */
  line-height: 2.5rem;    /* 40px */
  color: var(--sl-grey-900);
}

h2 {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.75rem;     /* 28px */
  line-height: 2.25rem;   /* 36px */
  color: var(--sl-grey-900);
}

h2.display {
  font-family: "SunLifeNewDisplay", Georgia, serif;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 2.25rem;
  color: var(--sl-grey-900);
}

h3 {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;      /* 24px */
  line-height: 2rem;      /* 32px */
  color: var(--sl-grey-900);
}

h4 {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;     /* 20px */
  line-height: 1.75rem;   /* 28px */
  color: var(--sl-grey-900);
}

/* Navigation */
.sl-navigation {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.688rem;  /* 27px */
  color: var(--sl-grey-800);
}

/* Body copy */
body {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
  color: var(--sl-grey-900);
}

.small {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.313rem;  /* 21px */
  color: var(--sl-grey-900);
}

.sl-body-xs {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
  color: var(--sl-grey-900);
}

/* Links */
a,
a:visited {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
  color: var(--sl-tertiary-800);
  text-decoration: underline;
}

.sl-link-small,
.sl-link-small:visited {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.313rem;  /* 21px */
  color: var(--sl-tertiary-800);
  text-decoration: underline;
}

.sl-link-xs,
.sl-link-xs:visited {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
  color: var(--sl-tertiary-800);
  text-decoration: underline;
}

a:hover {
  color: color-mix(in srgb, var(--sl-tertiary-800), #ffffff 20%);
}

/* Labels */
.sl-label-small {
  font-family: "SunLifeNewText", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.688rem;    /* 11px */
  line-height: 1rem;      /* 16px */
  color: var(--sl-grey-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}