/* =====================================================
   DESIGN SYSTEM - FPSS 2027
   Versão 1.0
   ===================================================== */

:root {

    /* ========= CORES ========= */

    --color-primary: #8B1111;
    --color-secondary: #F5C542;
    --color-success: #18B95A;

    --color-background: #FFFFFF;
    --color-surface: #F8F9FA;

    --color-text: #222222;
    --color-text-light: #666666;

    --color-border: #E5E7EB;

    /* ========= TIPOGRAFIA ========= */

    --font-family: 'Roboto', Arial, sans-serif;
    --font-family-display: 'Merriweather', Georgia, serif;

    --font-size-h1: 42px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;

    --font-size-base: 16px;
    --font-size-small: 14px;

    --font-size-button: 15px;

    /* ========= ESPAÇAMENTOS ========= */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 56px;

    /* ========= CONTAINER ========= */

    --container-max-width: 1280px;

    --container-padding: 20px;

    /* ========= BORDAS ========= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* ========= SOMBRAS ========= */

    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);

    --shadow-md: 0 4px 16px rgba(0,0,0,.10);

    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

    /* ========= TRANSIÇÕES ========= */

    --transition-default: .25s ease;

/* HEADER */

--header-height: 68px;

--logo-size: 42px;

--header-button-radius: 12px;

--header-button-font: 13px;

}
/* =====================================================
   COMPONENTES PADRÃO FPSS
===================================================== */

/* Container Oficial */

.container-fpss{

    width:100%;

    max-width:var(--container-max-width);

    margin:0 auto;

    padding-left:var(--container-padding);

    padding-right:var(--container-padding);

}


/* Seções */

.section{

    padding-top:var(--space-4);

    padding-bottom:var(--space-4);

}


/* Card padrão */

.card-fpss{

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    padding:24px;

}


/* Título de seção */

.section-title{

    font-family:var(--font-family);

    font-size:var(--font-size-h2);

    font-weight:700;

    color:var(--color-primary);

    line-height:1.2;

}


/* Texto auxiliar */

.text-muted{

    color:var(--color-text-light);

}

/* =====================================================
   BOTÕES PADRÃO
===================================================== */

.btn-fpss{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    border:none;

    border-radius:var(--radius-md);

    cursor:pointer;

    font-size:var(--font-size-button);

    font-family:var(--font-family);

    font-weight:600;

    transition:var(--transition-default);

}


/* Vermelho */

.btn-fpss-primary{

    background:var(--color-primary);

    color:#fff;

}


/* Verde */

.btn-fpss-success{

    background:var(--color-success);

    color:#fff;

}


/* Amarelo */

.btn-fpss-secondary{

    background:var(--color-secondary);

    color:#111;

}


.btn-fpss:hover{

    filter:brightness(1.05);

}