/* ===== FONTS ===== */
:root {
    --font-title: 'Kalnia', serif;
    --font-body: 'Raleway', sans-serif;
}

/* ===== COLORS ===== */
:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-off-white: rgba(255, 255, 255, 0.85);
    --color-overlay: rgba(255, 255, 255, 0.8);
    --color-accent1: #fec590;
    --color-accent2: #e9b8ef;
    --color-accent3: #a1e2e7;

    --color-project-pink: #FE477F;
    --color-project-purple: #9432F5;
    --color-project-blue: #2CB9FF;
    --color-project-orange: #F58332;
}

/* ===== TYPOGRAPHY UTILITIES ===== */
.title {
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: bold;
    color: var(--color-black);
}

.text {
    font-family: var(--font-body);
    color: var(--color-black);
}

.navfont {
    font-family: var(--font-body);
    color: var(--color-white);
}

.intro-heading {
    font-family: var(--font-body);
    color: var(--color-white);
    font-weight: bold;
    font-size: 1.75rem;
}

.intro-subheading {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
}

.body-paragraph {
    font-family: var(--font-body);
    color: var(--color-black);
    font-size: 1rem;
    line-height: 1.6;
}

.body-subtext {
    font-family: var(--font-body);
    color: var(--color-black);
    font-size: 0.9rem;
    font-weight: 600;
}

.footer-link {
    font-family: var(--font-body);
    color: var(--color-black);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 1;
    /* text-decoration: underline; */
}

.footer-logo-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-black);
    opacity: 0.6;
}



/* ===== PROJECT COLORS (OPTIONAL) ===== */
/* .project-purple {
    --project-color: var(--color-project-1);
}

.project-blue {
    --project-color: var(--color-project-2);
}

.project-orange {
    --project-color: var(--color-project-3);
} */

.theme-pink {
    color: var(--color-project-pink);
}

.theme-purple {
    color: var(--color-project-purple);
}

.theme-blue {
    color: var(--color-project-blue);
}

.theme-orange {
    color: var(--color-project-orange);
}


/* You can use these with inline style: color: var(--project-color); */