@import url('_variables.css');
@import url('_typography.css');
@import url('_helpers.css');
@import url('_layout.css');
@import url('_components.css');
@import url('layout/header.css');
@import url('layout/hero.css');
@import url('layout/footer.css');
@import url('layout/page-intro.css');
@import url('targeta-horizontal.css');
@import url('targeta-vertical.css');
@import url('grid8.css');
@import url('llista-20.css');
@import url('equip.css');
@import url('homepage.css');
@import url('families.css');
@import url('single.css');





:root {
  /* Base i text */
  --color-text: #021a1a; /* Negre per a textos normals */
  --color-text-inverted: #fdf7eb; /* Text invertit sobre fons fosc */
  --color-text-soft: #92d4c8;
  --color-text-medium: #46aea3; 
  --color-text-strong: #025c59;

  /* Fons */
  --color-bg: #fdf7eb; /* Beige clar: fons general */
  --color-bg-soft: #92d4c8; /* Aqua clar: fons suau, seccions diferenciades */
  --color-bg-medium: #46aea3; /* Aqua mig: per blocs destacats */
  --color-bg-strong: #025c59; /* Aqua fort: fons potents, seccions especials */
  --color-bg-dark: #002a30; /* Aqua extra fort: fons foscos o headers */

  /* Accent (interacció, links, botons actius...) */
  --color-accent: #025c59; /* Accent principal */
  --color-accent-alt: #46aea3; /* Accent alternatiu més fosc */

  /* Estats */
  --color-focus: #127e79;
  --color-error: #c0392b;
  --color-success: #2ecc71;

  /* Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Altres */
  --border-radius: 0.5rem;
  --transition: 0.3s ease-in-out;


  /* Dimensions */
  --max-width: 1900px;
  --border-radius: 0.5rem;

}

main{
  padding-bottom: 100px;
}


body {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: 'Rubik';
  margin:0;
  padding: 0;
}


/* Aquí pots afegir també regles globals */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
  }
  


  a {
    color: var(--color-accent);
    text-decoration: underline;
    transition: color 0.2s ease;
  }
  
  a:hover {
    color: var(--color-accent-alt);
  }
  
  strong {
    font-weight: 500;
}

/* =====================
   Tipografia base LFDM (responsive)
   ===================== */

/* Display (titulars grans per portades) */
.display-xl{
  /* 36 → 50 px */
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.125rem);
  font-weight: 600;
  line-height: 1.1;
}
.display-m{
  /* 32 → 40 px */
  font-size: clamp(2rem, 3.5vw + 0.25rem, 2.5rem);
  font-weight: 300; /* abans 200 */
  line-height: 1.2;
}

/* Headings (jerarquia de títols) */
.heading-xl{
  /* 26 → 32 px */
  font-size: clamp(1.625rem, 2.2vw + 0.5rem, 2rem);
  font-weight: 400;
  line-height: 1.3;
}
.heading-l{
  /* 24 → 28 px */
  font-size: clamp(1.5rem, 2vw + 0.4rem, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
}
.heading-m{
  /* 20 → 24 px */
  font-size: clamp(1.25rem, 1.6vw + 0.3rem, 1.5rem);
  font-weight: 300; /* abans 200 */
  line-height: 1.4;
}
.heading-s{
  /* 18 → 22 px */
  font-size: clamp(1.125rem, 1.2vw + 0.4rem, 1.375rem);
  font-weight: 400;
  line-height: 1.4;
}

/* Body text (cos de text) */
.body-l{
  /* 17 → 20 px */
  font-size: clamp(1.0625rem, 0.8vw + 0.6rem, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
}
.body-m{
  /* 16 → 18 px */
  font-size: clamp(1rem, 0.6vw + 0.5rem, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
}
.body-s{
  /* fix 16 px (escala base) */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.body-xs{
  /* fix 14 px */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Labels (botons, formularis, elements UI) */
.label-l{
  /* fix 18 px */
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
}
.label-m{
  /* fix 16 px (abans 0.95rem) */
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
}
.label-s{
  /* fix 14 px */
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.label-xs{
  /* fix 12 px */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

  /* =====================
   Tipografia Colors LFDM
   ===================== */


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

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

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

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

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


    /* =====================
   Tipografia Weight LFDM
   ===================== */

   .weight-light {
    font-weight: var(--font-weight-light);
  }
  
  .weight-regular {
    font-weight: var(--font-weight-regular);
  }
  
  .weight-medium {
    font-weight: var(--font-weight-medium);
  }
  
  .weight-semibold {
    font-weight: var(--font-weight-semibold);
  }
  
  .weight-bold {
    font-weight: var(--font-weight-bold);
  }
  
  .weight-black {
    font-weight: var(--font-weight-black);
  }