/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

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

    --primary:#6750A4;
    --primary-dark:#56428E;
    --primary-light:#EADDFF;

    --secondary:#8B5CF6;

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    --background:#F7F8FC;
    --surface:#FFFFFF;

    --text:#1F2937;
    --text-light:#6B7280;

    --border:#E5E7EB;

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

    --shadow-sm:
        0 2px 8px rgba(15,23,42,.05);

    --shadow-md:
        0 10px 25px rgba(15,23,42,.08);

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

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

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

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;

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

    --transition:.25s ease;

}

/* ==========================================================
   BODY
========================================================== */

body{

    background:var(--background);

    color:var(--text);

    font-family:

        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    line-height:1.6;

    font-size:16px;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text);

    font-weight:700;

    line-height:1.2;

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

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.6rem;

}

h3{

    font-size:1.3rem;

}

p{

    color:var(--text-light);

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

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* ==========================================================
   LISTAS
========================================================== */

ul,
ol{

    list-style:none;

}

/* ==========================================================
   IMAGENS
========================================================== */

img{

    max-width:100%;

    display:block;

}

/* ==========================================================
   BOTÕES
========================================================== */

button{

    font-family:inherit;

    cursor:pointer;

}

/* ==========================================================
   FORMULÁRIOS
========================================================== */

input,
textarea,
select{

    font:inherit;

}

/* ==========================================================
   TABELAS
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

/* ==========================================================
   UTILITÁRIOS
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.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);

}