@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Rubik+One&family=Shantell+Sans:wght@700;800&display=swap');

:root {
    /* Text & Background */
    --np-dark: #252525;
    --np-white: #ffffff;
    --np-white-hot: #F6F6F6;
    --np-bg-light: #FEFCE9;
    --np-bg-green: #EEFDF7;
    --np-bg-pink: #FDF2F7;
    --np-bg-blue: #EEF7FF;
    --np-hover-bg: #FFEDD9;
    --np-error-color: #ff4d4d;
    --np-success-color: #28a745;
    /* Footer colors */
    --np-footer-text-desc: #AAAEB3;
    --np-footer-hover-bg: #85786ADD;
    --np-footer-bg-start: #1B2535;
    --np-footer-bg-end: #000102;
    --np-footer-gradient: linear-gradient(104.83deg, var(--np-footer-bg-start) 54.34%, var(--np-footer-bg-end) 111.1%);
    --np-subscribe-btn: #73C2BE;
    --np-footer-input-bg: #323B4A;
    --np-footer-input-active-bg: #3A4353;
    /* About page colors */
    --np-about-input-active: #EDEDED;
    --np-grey-hot-bg: #FFF7F6;
    --np-light-blue: #EEF7FF;
    --np-light-green: #EEFDF7;
    --np-light-pink: #FDF2F7;
    --np-light-yellow: #FEFCE9;
    --np-warm_beige: #F6CA8F;
    /* Accent Colors */
    --np-accent1: #8E201F;
    --np-accent2: #FB6107;
    --np-accent3: #FB9E00;
    --np-green: #417B5A;
    --np-blue: #00ACE5;
    --np-pink: #FD296D;
    --np-turquoise: #00BC9D;
    /* Typography */
    --font-body: 'Roboto', sans-serif;
    --font-header: 'Shantell Sans', sans-serif;
    --font-logo: 'Rubik One', sans-serif;
    /*Spacing*/
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    /*Font-size*/
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-xxl: 2rem;
    --fs-3xl: 3rem;
    --fs-5xl: 5rem;
    --fs-6xl: 6rem;
}

html, body {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--np-dark);
    background-color: var(--np-white);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-header);
    font-weight: 700;
    color: var(--np-dark);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

strong {
    font-weight: 700;
}

a {
    color: var(--np-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--np-accent2);
    }