/* 1. Register the font files you have in your public/fonts folder */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-Regular.ttf') format('truetype');
    font-weight: 400; /* Normal weight */
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold weight */
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic; /* Notice this change */
}

:root {
    /* Brand Colors */
    --cream-bg: #faf8f4;
    --light-red: #fbddda;
    --pastel-red: #f98c94;
    --light-green: #e8ede5;
    --grey-green: #5e8043;
    --dark-grey-brown: #2d241e;
    --dark-blue: #132344;
    --grey-azure: #435c74;
    --light-yellow: #fffffc;
    --light-grey: #d9d9d9;
    --dark-grey: #6f6f6f;

    /* Typography */
    --font-main: 'Nunito', sans-serif;
}

html {
    scroll-behavior: smooth;   /* Smooth scrolling when clicking nav links */
    scroll-padding-top: 80px;  /* Offsets scroll position by header height */
}

/* SCROLL SNAPPING: Only on the homepage (index) */
html.snap-enabled {
    scroll-snap-type: y proximity; /* 'proximity' snaps when close, 'mandatory' snaps always */
}

body {
    background-color: var(--cream-bg);
    color: var(--dark-grey-brown);
    font-family: var(--font-main), sans-serif;
    font-optical-sizing: auto; /* This helps the font look crisp at different sizes */
    -webkit-font-smoothing: antialiased; /* Makes text look smoother on Mac/iPhone */
    line-height: 1.6;
    overflow-x: hidden; /* Prevents weird side-scrolling on mobile */
}