/* ==============================
   TYPOGRAPHY.CSS
   Sito: Pimu Studio Design
   Ultimo aggiornamento: 2025-11-22
   Richiede: variables.css
   ============================== */

/* 🖋️ Base */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary, sans-serif);
  color: var(--color-text);
  background: var(--color-bg);
}

/* 🔗 Link */
a {
  color: inherit;
  text-decoration: none;
}

/* 🧩 Classi tipografiche (role-based) */

.text-1 {
  font-size: var(--fs-1); /* 4.75rem */
  letter-spacing: 0.095rem;
  line-height: 91px;
}

.text-2 {
  font-size: var(--fs-2); /* 2.25rem */
}

.text-3 {
  font-size: var(--fs-3); /* 1.75rem */
}

.text-3-alt {
  font-size: var(--fs-3-alt); /* 1.75rem */
}

.text-4 {
  font-size: var(--fs-4); /* 1.25rem */
  line-height: 24px;
}

.text-4-alt {
  font-size: var(--fs-4-alt); /* 1.25rem */
  line-height: 24px;
}

.text-5 {
  font-size: var(--fs-5); /* 1rem */
  line-height: 1.5rem;
}

.text-5-alt {
  font-size: var(--fs-5-alt); /* 1rem */
}

.text-6 {
  font-size: var(--fs-6); /* 0.875rem */
}

.text-6-alt {
  font-size: var(--fs-6); /* 0.875rem */
}

.text-7 {
  font-size: var(--fs-7);
}

/* 🎛️ Utilities testo */
.extrabold {
  font-weight: var(--fw-extrabold);
}

.bold {
  font-weight: var(--fw-bold); /* 700 */
}
.semibold {
  font-weight: var(--fw-semibold); /* 600 */
}
.medium {
  font-weight: var(--fw-medium); /* 500 */
}
.regular {
  font-weight: var(--fw-regular); /* 400 */
}

.light {
  font-weight: var(--fw-light); /* 300*/
}

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

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

/* 🎨 Testo */
.cl-primary {
  color: var(--color-primary);
}
.cl-secondary {
  color: var(--color-secondary);
}
.cl-bg {
  color: var(--color-bg);
}
.cl-dark {
  color: var(--color-text);
}

/* 🎨 Background */
.bg-primary {
  background-color: var(--color-primary); /* #f8b4c9 */
}
.bg-secondary {
  background-color: var(--color-secondary); /* #5d508b */
  border-radius: 1.25rem 1.25rem 0 0;
}