:root{
   --font-light: hsl(211, 82%, 18%);
   --font-dark: hsl(218, 100%, 95%);
   --bg-light:hsl(0, 0%, 100%);
   --bg-dark:hsl(218, 58%, 20%);
   --font-size-xsm: 1rem;
   --font-size-sm: 1.3rem;
   --font-size-md: 1.6rem;
   --font-size-lg: 2.5rem;
   --font-size-xl: 4rem;
   --font-size-xxl: 7rem;
   --gap: 2rem;
   --margin-sm: 2rem;
   --margin-md: 3rem;
   --font-family: 'Syne', verdana, geneva, tahoma, sans-serif;
   --header-bg: #ffffff;
   --header-border: #e0e0e0;
   --hero-gradient-start: #000000;
   --hero-gradient-end: #002f80;
   --h2-gradient-start: #000818;
   --h2-gradient-end: #999999;
   --like-gradient-start: #150f3f;
   --like-gradient-end: #3a2db3;
   --footer-text: #000000;
   --link-color: #002f80;
   --color-primary-light: hsl(218, 100%, 20%);
   --color-primary-dark: #b0c0ff;
   --color-border-light: #e0e0e0;
   --color-text-muted: #c0c0c0;
}

[data-theme="dark"] {
  --font-light: hsl(218, 100%, 95%);
  --font-dark: hsl(211, 82%, 18%);
  --bg-light: hsl(218, 58%, 20%);
  --bg-dark: hsl(0, 0%, 100%);
  --header-bg: #1f1f2e;
  --header-border: #2a2a3a;
  --hero-gradient-start: #ffffff;
  --hero-gradient-end: #8ab4ff;
  --h2-gradient-start: #f0f0ff;
  --h2-gradient-end: #a0a0b0;
  --like-gradient-start: #b0a0ff;
  --like-gradient-end: #d0c0ff;
  --footer-text: #c0c0c0;
  --link-color: #6a8fff;
}



/* Skip navigation link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--link-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
    font-size: var(--font-size-xsm);
    font-weight: bold;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

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

/* Add transitions only to elements that need them */
a, button {
   transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Visible focus indicators for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible {
    outline-color: #8ab4ff;
}

html{
   font-size: 62.5%;
   scroll-behavior: smooth;
}

/* Page transition animations handled by GSAP */
body {
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   background-color: var(--bg-light);
   color: var(--font-light);
   line-height: 1.5;
   overflow-x: hidden;
   transition: background-color 0.25s;
   margin: auto;
   max-width: 1024px;
   word-break: break-word;
   display:flex;
   flex-direction:column;
   justify-content:center;
   line-height: 2.8rem;
}

[data-theme="dark"] body {
   background-color: var(--bg-light);
   color: var(--font-light);
}

a{
    color: hsl(218, 100%, 20%);
    text-decoration: none;
}

[data-theme="dark"] a {
    color: #b0c0ff;
}



section {
    display: flexbox;
}

/* custom styles */

.ds-header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-block: 2rem;
}

.menu{
    display: flex;
    justify-content: end;
    align-items: center;
    text-transform: uppercase;
}

.nav-links{
    list-style-type: none;
    display: flex;
    position: relative;
}

/* Sliding indicator for magnetic hover effect */
.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    background: hsl(195, 53%, 79%);
    pointer-events: none;
    z-index: -1;
    transition: background 0.3s ease;
}

[data-theme="dark"] .nav-indicator {
    background: hsl(218, 60%, 40%);
}

.list-item{
    display: inline-block;
    padding: 0rem;
    font-size: var(--font-size-md);
}

.list-item a{
    padding: 1rem;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(218, 100%, 20%);
    transition: transform 0.3s ease-in-out;
    position: relative;
}

[data-theme="dark"] .theme-toggle {
    color: #e0e0e0;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle svg {
    display: block;
}

/* Sun spinning animation */
.theme-toggle:hover .sun-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Moon stars effect */
.theme-toggle .moon-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}

/* Star elements */
.theme-toggle .star {
    position: absolute;
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    color: #e0e0e0;
    z-index: 10;
}

.theme-toggle .star-1 {
    top: -2px;
    right: -2px;
}

/* Show star in dark mode and continuously rotate */
[data-theme="dark"] .theme-toggle .star-1 {
    opacity: 1;
    animation: rotate-star 1s linear infinite;
}

@keyframes rotate-star {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Logo contrast in dark mode */
.logo-header {
    width: 100%;
    max-width: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: filter 0.3s ease;
}

[data-theme="dark"] .logo-header {
    filter: brightness(0) invert(1);
}

#back-to-top {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    z-index: 99;
    font-size: var(--font-size-md);
    background-color: hsla(0, 0%, 100%, 0.37);
    color: var(--font-light);
    border: none;
    box-shadow: 0.3rem 0.3rem 0.6rem #bec8d68e, -0.2rem -0.2rem 0.5rem rgba(190, 202, 236, 0.589);
    cursor: pointer;
    padding: 1rem 2rem;
    backdrop-filter: blur(16.5px);
     -webkit-backdrop-filter: blur(16.5px);
    transition: .3s ease-in-out;
}

#back-to-top:hover {
    background-color: rgba(193, 199, 228, 0.582);
}

[data-theme="dark"] #back-to-top {
    background-color: hsla(218, 58%, 20%, 0.37);
    color: var(--font-light);
}

[data-theme="dark"] #back-to-top:hover {
    background-color: hsla(218, 58%, 30%, 0.5);
}

.footer{
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 5rem 0rem;
}

.active-link{
    padding: 1rem;
}


img.refresh-icon{
    height: 1.5rem;
    width: 1.5rem;
    background: url("/assets/img/refresh.svg");
    vertical-align: -0.25rem;
    animation: rotate 5000ms 5 linear;
    cursor: pointer;
}

/* media queries */
@media screen and (min-width: 1024px) {
    body{
        padding: 5rem;
    }
    #back-to-top{
        right: 20%;
    }
}

@media screen and (max-width: 768px) {
    body{
        padding: 1rem;
    }
    .ds-header{
        padding-right: 1rem;
    }
}

@media screen and (min-width: 767px) and (max-width: 1023px) {
    body{
        padding: 2rem;
    }
}