/* -------------------------------------------------
  TYPOGRAPHY CONFIGURATION
  Fonte: Google Fonts Montserrat e Roboto
  Tokens globais de fonte, tamanho e espaçamento
------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  /* FONT FAMILIES */
  --font-title: 'Roboto', sans-serif;
  --font-default: 'Montserrat', sans-serif;
  --font-ui: 'Roboto', Arial, sans-serif;

  /* FONT SIZES */
  --font-size-xxs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.75rem;     /* 28px */
  --font-size-xxl: 2.5rem;     /* 40px */

  /* UI FONT DEFAULTS */
  --font-ui-size-default: var(--font-size-sm);
  --font-ui-size-small: var(--font-size-xs);

  /* HEADINGS */
  --font-heading-h1: var(--font-size-xxl);
  --font-heading-h2: var(--font-size-xl);
  --font-heading-h3: var(--font-size-lg);
  
  /* LINE HEIGHTS */
  --line-height-tight: 110%;
  --line-height-normal: 120%;
  --line-height-loose: 150%;
}

/* TITLES */
.page-title {
  font-family: var(--font-default);
  font-size: var(--font-heading-h1);
  line-height: var(--line-height-normal);
}

.page-subtitle {
  font-family: var(--font-default);
  font-size: var(--font-ui-size-default);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-md);
}

/* PARAGRAPH */
p {
  font-family: var(--font-ui);
  font-size: var(--font-ui-size-default);
  line-height: var(--line-height-loose);
  margin-bottom: var(--spacing-sm);
}