/* 
---------------- Topography ----------------

FONT SIZES 
0.833rem / 1rem / 1.2rem / 1.44rem / 1.728rem / 2.074rem / 2.488rem / 2.986rem

FONT WEIGHTS
400 / 500

LINE HEIGHTS
1.2 / 1.5

LETTER SPACING
P / -2.5PX

FONT FAMILY 
Fira Sans
*/

:root {
    /* Primary — Botanical Green */
    --primary-tint: #8dbb99;
    --primary: #427f54;
    --primary-shade: #326743;
    --primary-700: #2a5238;

    /* Secondary — Muted Berry / Magenta */
    --secondary-300: #e7a5ba;
    --secondary-tint: #d97899;
    --secondary: #c45178;
    --secondary-600: #aa375f;
    --secondary-shade: #8d2d4e;

    /* Text  */
    --grey: #dedede;
    --grey-tint: #ebedee;
    --grey-shade: #bdc0c3;
    --dark-grey: #6c757d;
    --dark-grey-tint: #a6a9ad;
    --dark-grey-shade: #495057;

    /* Background - Cream */
    --cream-50:  #FFFDF8;
    --cream-100: #dbdad8;
    --cream-200: #EEE7D9;
    --cream-300: #DDD3C2;
    --cream-700: #665E52;
    --cream-900: #332E28;
}

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

html{
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background-color: var(--cream-50);
}

h1 {
    font-weight: 500;
    letter-spacing: -1.5px;
    text-align: right;
    letter-spacing: -2.5px;
    font-size: 2.986rem ;
}

h2 {
    font-weight: 500;
    font-size: 2.488rem ;
}

h3 {
    font-weight: 400;
    font-size: 2.074rem ;
}

p {
    font-weight: 400;
    font-size: 1rem ;
    text-align: justify;
}

a {
    font-weight: 400;
    text-decoration: none;
}

/* ul {
    list-style: none;
} */

/* ---------- UI COMPONENTS ---------- */

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.1s;
}

.btn-primary {
    background-color: var(--cream-50);
    color: var(--secondary-shade);
}

.btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--cream-50);
}

.btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 4px 10px #332E28;
}