/**
 * VEC Design System - Typography
 * @font-face declarations and typography baseline styles
 */

/* ========================================
   FONT FACE DECLARATIONS
   ======================================== */

/* Montserrat Regular (400) */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Medium (500) */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Semi Bold (600) */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Bold (700) */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ========================================
   BASE TYPOGRAPHY STYLES
   ======================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-dark-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   HEADINGS
   ======================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-heading);
  color: var(--color-dark-text);
  margin-top: 0;
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-tight);
}

h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h1);
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h2);
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h3);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h4);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h5);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h6);
}


/* ========================================
   BODY TEXT
   ======================================== */

p {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-large,
.paragraph-bigger {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.text-small,
.paragraph-smaller {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.text-caption,
.label-text {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ========================================
   LINKS
   ======================================== */

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

a:hover,
a:focus {
  color: var(--color-primary);
  opacity: 0.8;
}


/* ========================================
   FONT WEIGHT UTILITIES
   ======================================== */

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}


/* ========================================
   TEXT ALIGNMENT
   ======================================== */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}


/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */

.text-primary {
  color: var(--color-primary);
}

.text-dark {
  color: var(--color-dark-text);
}

.text-gray {
  color: var(--color-gray-text);
}

.text-light {
  color: var(--color-light-text);
}


/* ========================================
   LISTS
   ======================================== */

ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  padding-left: var(--space-m);
}

li {
  margin-bottom: calc(var(--space-xs) / 2);
}