:root {
  --black:  #000;
  --white:  #fff;
  --gray:   #969696;

  --light-brown: #8b7f77;
  --green-gray: #585856;
  --blue-gray: #32373b;
  --blue-dark: #161f26;

  --green-spotify: #1DB954;
  --red-youtube: #FF0000;
  
    /* Escala tipográfica fluida para utilitários */
    --font-size-tiny:   clamp(1.2rem, 1.2vw, 1.4rem);  /* 12px → 14px */
    --font-size-small:  clamp(1.4rem, 1.5vw, 1.6rem);  /* 14px → 16px */
    --font-size-base:   clamp(1.6rem, 2vw,   2rem);     /* 16px → 20px */
    --font-size-medium: clamp(1.8rem, 2.5vw, 2.4rem);  /* 18px → 24px */
    --font-size-big:    clamp(2rem,   3vw,   3.2rem);   /* 20px → 32px */
    --font-size-large:  clamp(2.4rem, 4vw,   4rem);     /* 24px → 40px */
    --font-size-giant:  clamp(3.2rem, 5vw,   6.4rem);   /* 32px → 64px */
    --font-size-huge:   clamp(4rem,   6vw,   8rem);     /* 40px → 80px */
}



.font-oswald {
  font-family: "Oswald", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: auto;
}

/* Classes utilitárias */
.font-size-tiny   { font-size: var(--font-size-tiny); }
.font-size-small  { font-size: var(--font-size-small); }
.font-size-base   { font-size: var(--font-size-base); }
.font-size-medium { font-size: var(--font-size-medium); }
.font-size-big    { font-size: var(--font-size-big); }
.font-size-large  { font-size: var(--font-size-large); }
.font-size-giant  { font-size: var(--font-size-giant); }
.font-size-huge   { font-size: var(--font-size-huge); }

.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }