/* Color Palettes Definition */

:root {
    /* Light Theme Colors */
    --light-bg: #E9ECF4;
    --light-text: #525C76;
    --light-line: #D6DDEA;
    --light-primary-50: #C6D7FD;
    --light-primary-100: #6C91FE;
    --light-primary-200: #3C5FEF;
    --light-idle-100: #DAE2F4;
    --light-idle-200: #BDC3DA;
    --light-idle-300: #D7DDEB;
    --light-icon: #B7CAE8;
    --light-glow: radial-gradient(circle, #B5E0FFFF 0%, #B3DFFF00 100%);
    --light-logo-full-svg: url('/assets/svgs/roqore-logo-light-1.svg');
    --light-logo-footer-1-svg: url('/assets/svgs/roqore-logo-light-2.svg');
    --light-logo-footer-2-svg: url('/assets/svgs/roqore-logo-light-3.svg');
    --light-theme-icon: url('/assets/icons/moon.svg');
    --light-menu-tablet-icon: url('/assets/icons/menu-tablet-light.svg');
    --light-menu-mobile-icon: url('/assets/icons/menu-mobile-light.svg');


    /* Dark Theme Colors */
    --dark-bg: #16161D;
    --dark-text: #F4EDDF;
    --dark-line: #213150;
    --dark-primary-50: #372708;
    --dark-primary-100: #FFDBAC;
    --dark-primary-200: #FFCA00;
    --dark-idle-100: #22283B;
    --dark-idle-200: #191B28;
    --dark-idle-300: #252030;
    --dark-icon: #393030;
    --dark-glow: radial-gradient(circle, #FFCA00FF 0%, #FFCA0000 100%);
    --dark-logo-full-svg: url('/assets/svgs/roqore-logo-dark-1.svg');
    --dark-logo-footer-1-svg: url('/assets/svgs/roqore-logo-dark-2.svg');
    --dark-logo-footer-2-svg: url('/assets/svgs/roqore-logo-dark-3.svg');
    --dark-theme-icon: url('/assets/icons/sun.svg');
    --dark-menu-tablet-icon: url('/assets/icons/menu-tablet-dark.svg');
    --dark-menu-mobile-icon: url('/assets/icons/menu-mobile-dark.svg');
}

/* Apply colors by referencing defined palettes */
.light {
    --color-bg: var(--light-bg);
    --color-text: var(--light-text);
    --color-line: var(--light-line);
    --color-icon: var(--light-icon);
    --color-glow: var(--light-glow);
    --color-link-hover: var(--light-primary-200);

    --logo-full-svg: var(--light-logo-full-svg);
    --logo-footer-1-svg: var(--light-logo-footer-1-svg);
    --logo-footer-2-svg: var(--light-logo-footer-2-svg);
    --theme-icon: var(--light-theme-icon);
    --menu-tablet-icon: var(--light-menu-tablet-icon);
    --menu-mobile-icon: var(--light-menu-mobile-icon);

    --logo-footer-svg-opacity: 1;

    --glow-blend: plus-darker;
    --glow-opacity: 1;
    --glow-opacity-from: 0.8;
    --glow-opacity-to: 1;
}

.dark {
    --color-bg: var(--dark-bg);
    --color-text: var(--dark-text);
    --color-line: var(--dark-line);
    --color-icon: var(--dark-icon);
    --color-glow: var(--dark-glow);
    --color-link-hover: var(--dark-primary-200);

    --logo-full-svg: var(--dark-logo-full-svg);
    --logo-footer-1-svg: var(--dark-logo-footer-1-svg);
    --logo-footer-2-svg: var(--dark-logo-footer-2-svg);
    --theme-icon: var(--dark-theme-icon);
    --menu-tablet-icon: var(--dark-menu-tablet-icon);
    --menu-mobile-icon: var(--dark-menu-mobile-icon);

    --logo-footer-svg-opacity: 0.25;

    --glow-blend: plus-lighter;
    --glow-opacity: 0.2;
    --glow-opacity-from: 0.1;
    --glow-opacity-to: 0.2;
}

/* Use the current color variables in styles */
html,
body {
    height: 100%;
    width: 100dvw;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Monda', sans-serif;
    background-color: var(--color-bg);
    transition: all 0.3s ease-in-out;
}

/* Make sure box-sizing is inherited everywhere */
*,
*::before,
*::after {
    box-sizing: border-box;
}

main {
    height: 100%;
    width: 100dvw;
    display: flex;
    align-items: center;
}

section {
    position: relative;
    height: 100vh;
    width: 100%;
}

/* Lines start */
#lines {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
    z-index: 100;
}

.line {
    position: absolute;
    background-color: var(--color-line);
    transition: all 0.3s ease-in-out;
}

.vertical-line {
    width: 1px;
    height: 85dvh;
    position: absolute;
    bottom: 0;
    /* start from the bottom */
    background-color: var(--color-line);
}

.horizontal-line {
    height: 1px;
    width: calc(100dvw - 40px);
    right: 0;
    /* start from the right side */
    position: absolute;
}

/* Vertical lines (from bottom) */
.v1 {
    left: calc(100dvw - 40px);
}

.v2 {
    left: calc(100dvw - 500px);
}

/* Horizontal lines (from right) */
.h1 {
    bottom: calc(50% + 30dvh);
    /* 25% within the 90vh block */
}

.h2 {
    bottom: calc(50% - 15dvh);
    /* 75% within the 90vh block */
}

/* Lines end */

/* logos start */
#logo-full-svg {
    background-image: var(--logo-full-svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    width: 40dvw;
    height: 200px;
    transition: all 0.3s ease-in-out;
    margin-left: 40px;
}

#logo-footer-svg {
    background-image: var(--logo-footer-1-svg);
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 800px;
    height: 200px;
    z-index: 200;
    transition: all 0.3s ease-in-out;
    opacity: var(--logo-footer-svg-opacity);
}

/* logos end */

/* glow start */
#glow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    /* beneath everything */
    pointer-events: none;
    overflow: hidden;
}

.glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--color-glow);
    mix-blend-mode: var(--glow-blend);
    border-radius: 50%;
    opacity: var(--glow-opacity);
    filter: blur(80px);
    transition: background 0.3s ease-in-out, mix-blend-mode 0.3s ease-in-out;
    animation: glow 4s ease-in-out infinite alternate;
}

.glow-1 {
    top: -25%;
    left: -15%;
}

.glow-2 {
    bottom: 0%;
    right: -5%;
}

/* glow end */

/* navbar start */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 40px;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navbar ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

#navbar li {
    white-space: nowrap;
    /* Prevents links from breaking weirdly */
}

#navbar a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

#navbar a {
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.3s ease-in-out;
    font-size: larger;
    font-weight: 100;
}

#navbar a:hover {
    color: var(--color-link-hover);
}

#navbar #nav-header {
    display: flex;
    gap: 20px
}

#theme-toggle {
    all: unset;
    /* resets everything: padding, border, background, etc. */
    display: inline-block;
    cursor: pointer;
}


#navbar #menu-svg,
#navbar #theme-toggle {
    width: 24px;
    height: 24px;
    background-color: var(--color-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    transition: all 0.3s ease-in-out;
}

#navbar #menu-svg {
    -webkit-mask-image: var(--menu-mobile-icon);
    mask-image: var(--menu-mobile-icon);

    display: none;
}

#navbar #theme-toggle {
    -webkit-mask-image: var(--theme-icon);
    mask-image: var(--theme-icon);

    display: inline-block;
}

/* navbar end */

/* footer start */
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 200;
    color: var(--color-text);
    font-size: small;
    display: flex;
    padding-bottom: 20px;
    padding-right: 40px;
    justify-content: end;
}

/* footer end */