/* --------------------------------------------------
   1) Import das fontes
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* --------------------------------------------------
   2) Variáveis globais (Tipografia + Espaçamentos)
-------------------------------------------------- */
:root {
    /* Fonte base */
    --font-base: 'Montserrat', sans-serif;


    /* Fonte base */
    --font-size-base: 0.95rem;

    /* Títulos (proporcionais e mais confortáveis) */
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.85rem;
    --font-size-h3: 1.45rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.1rem;
    --font-size-h6: 1rem;

    /* Tamanhos adicionais */
    --font-size-small: 0.85rem;
    --font-size-smaller: 0.75rem;
    --font-size-large: 1.15rem;
    --font-size-xlarge: 1.3rem;

    /* Pesos (mantidos) */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Parágrafos especiais */
    --p-small-size: 0.85rem;
    --p-large-size: 1.15rem;
    --p-muted-size: 0.9rem;
    --p-lead-size: 1.25rem;
    --p-strong-size: 1rem;

    --p-small-line: 1.6;
    --p-large-line: 1.6;
    --p-muted-line: 1.6;
    --p-lead-line: 1.7;
    --p-strong-line: 1.6;

    --p-muted-color: #666;

    /* Navbar */
    --navbar-height: 70px;
    --navbar-bg: #ffffff;
    --navbar-text: #222;
    --navbar-hover: #007bff;
    --navbar-shadow: rgba(0,0,0,0.15);
	
	

    --font-size-base: 1rem;        /* 16px */
    --font-line-base: 1.5;         /* 24px / 16px = 1.5 */
    --font-color-base: rgb(0,0,0);
    --weight-normal: 400;

	
}



/* --------------------------------------------------
   3) Tipografia global
-------------------------------------------------- */
body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--weight-normal);
    line-height: var(--font-line-base);
    color: var(--font-color-base);
}

/* Títulos */
h1 { font-size: var(--font-size-h1); font-weight: var(--weight-bold); line-height: var(--font-line-base); }
h2 { font-size: var(--font-size-h2); font-weight: var(--weight-semibold); line-height: var(--font-line-base); }
h3 { font-size: var(--font-size-h3); font-weight: var(--weight-medium); line-height: var(--font-line-base); }
h4 { font-size: var(--font-size-h4); font-weight: var(--weight-medium); line-height: var(--font-line-base); }
h5 { font-size: var(--font-size-h5); font-weight: var(--weight-normal); line-height: var(--font-line-base); }
h6 { font-size: var(--font-size-h6); font-weight: var(--weight-normal); line-height: var(--font-line-base); }

/* Parágrafos */
p {
    font-size: var(--font-size-base);
    font-weight: var(--weight-normal);
    line-height: var(--font-line-base);
    margin-bottom: var(--space-4);
}

/* Texto utilitário */
.text-small   { font-size: var(--font-size-small); }
.text-smaller { font-size: var(--font-size-smaller); }
.text-large   { font-size: var(--font-size-large); }
.text-xlarge  { font-size: var(--font-size-xlarge); }

.text-light      { font-weight: var(--weight-light); }
.text-normal     { font-weight: var(--weight-normal); }
.text-medium     { font-weight: var(--weight-medium); }
.text-semibold   { font-weight: var(--weight-semibold); }
.text-bold       { font-weight: var(--weight-bold); }


/* --------------------------------------------------
   4) Sistema de Espaçamentos (Margens + Padding)
-------------------------------------------------- */

/* Margens */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }
.m-6  { margin: var(--space-6); }
.m-7  { margin: var(--space-7); }
.m-8  { margin: var(--space-8); }

/* Margens individuais */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }

.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }

/* Padding */
.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-7  { padding: var(--space-7); }
.p-8  { padding: var(--space-8); }

/* Padding individuais */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }

.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }

.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }

.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }


/* --------------------------------------------------
   5) Secções (útil para layout)
-------------------------------------------------- */
.section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.section-sm {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.section-md {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.section-lg {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.section-xl {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}



/* --------------------------------------------------
   6) Parágrafo 
-------------------------------------------------- */


/* Parágrafo pequeno */
.p-small {
    font-size: var(--p-small-size);
    line-height: var(--p-small-line);
}


.p-small-bold {
    font-size: var(--p-small-size);
    line-height: var(--p-small-line);
    font-weight: var(--weight-bold);
}


/* Parágrafo grande */
.p-large {
    font-size: var(--p-large-size);
    line-height: var(--p-large-line);
}

/* Parágrafo secundário (muted) */
.p-muted {
    font-size: var(--p-muted-size);
    line-height: var(--p-muted-line);
    color: var(--p-muted-color);
}

/* Parágrafo de destaque (lead) */
.p-lead {
    font-size: var(--p-lead-size);
    line-height: var(--p-lead-line);
    font-weight: var(--p-lead-weight);
}

/* Parágrafo forte */
.p-strong {
    font-size: var(--p-strong-size);
    line-height: var(--p-strong-line);
    font-weight: var(--p-strong-weight);
}