:root {
    --clr-primary:   #6a0dad;
    --clr-primary-dark: #4b0b88;
    --clr-primary-light: #9c40e3;

    --clr-bg:        #f5f3fa;
    --clr-bg-dark:   #e3e1eb;
    --clr-bg-light:  #ffffff;

    --clr-text:      #2c2c2c;
    --clr-text-light:#555555;

    --ff-base:       'Inter', system-ui, sans-serif;
    --ff-heading:    var(--ff-base);
    --fs-base:       1rem;
    --fs-lg:         1.125rem;
    --fs-xl:         1.25rem;
    --fs-xxl:        1.5rem;

    --gap-1:         0.5rem;
    --gap-2:         1rem;
    --gap-3:         1.5rem;
    --gap-4:         2rem;

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

    --shadow-sm:    0 1px 3px rgba(0,0,0,.12);
    --shadow-md:    0 4px 6px rgba(0,0,0,.15);
}

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-base);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--clr-text);
    background-color: var(--clr-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color .2s ease-in-out;
}
a:hover, a:focus {
    color: var(--clr-primary-dark);
    text-decoration: underline;
}

header,
footer,
main {
    max-width: 960px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

header, footer {
    padding: var(--gap-3) 0;
}

main {
    flex: 1 0 auto;
    padding: var(--gap-4) 0;
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--gap-1); }
.mt-2 { margin-top: var(--gap-2); }
.mt-3 { margin-top: var(--gap-3); }
.mb-1 { margin-bottom: var(--gap-1); }
.mb-2 { margin-bottom: var(--gap-2); }
.mb-3 { margin-bottom: var(--gap-3); }
.p-1 { padding: var(--gap-1); }
.p-2 { padding: var(--gap-2); }
.p-3 { padding: var(--gap-3); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

.btn {
    display: inline-block;
    font-weight: 600;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--clr-primary);
    background-color: var(--clr-primary);
    color: var(--clr-bg);
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.btn:hover,
.btn:focus {
    background-color: var(--clr-primary-light);
    border-color: var(--clr-primary-light);
    color: var(--clr-text);
}

.card {
    background-color: var(--clr-bg-light);
    padding: var(--gap-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    margin-bottom: var(--gap-2);
    color: var(--clr-primary-dark);
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

@media (min-width: 600px) {
    body { font-size: 1.05rem; }
}

@media (min-width: 900px) {
    body { font-size: 1.1rem; }
}