@import "theme-toggle.css";

/* -------- Root variables -------- */
:root {
    /* --background-color-theme-light: #fffffa; */
    --background-color-theme-light: #F5F5F5;
    --background-color-theme-dark: #121212;
    --background-color-theme-dark-navbar: #333333;

    --text-color-theme-light: #141414;
    --text-color-theme-dark: #F5F5F5;
    
    --icon-fill-theme: hsl(210 10% 15%);
    --icon-fill-hover-theme: hsl(210 10% 30%);

    --color-ring-r1: goldenrod;
    --color-ring-r2: crimson;
    --color-ring-r3: royalblue;
    --color-ring-r4: green;
    --color-ring-r5: purple;

    --color-ring: var(--color-ring-r1);

    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;

    --header-font-size: 36px;
    --menu-font-size: 20px;
    --content-font-size: 16px;
}

[data-theme="dark"] {
    --color-ring-r1: gold;
    --color-ring-r2: lightcoral;
    --color-ring-r3: deepskyblue;
    --color-ring-r4: lightgreen;
    --color-ring-r5: plum;
    --color-ring: var(--color-ring-r1);
    
    --icon-fill-theme: hsl(201 10% 70%);
    --icon-fill-hover-theme: hsl(201 15% 90%);
}

@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}

/* -------- Global Dimensions -------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -------- CSS for Body -------- */
body {
    font-weight: 400;
    color: var(--text-color-theme-light); /* Light mode text color */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color-theme-light);
}

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

/* -------- CSS for Container -------- */
.container {
    display: flex;
    flex-direction: row;
    width: 90%; /* Responsive width */
    height: 80vh; /* Responsive height */
    max-width: 1200px; /* Limit on larger screen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color-theme-light); /* Light mode container background */
}

/* Dark Mode Container */
[data-theme="dark"] .container {
    background-color: var(--background-color-theme-dark); /* Dark mode container background */
}

/* -------- CSS for all Links -------- */

/* All links text color */
a {
    text-decoration: none;
    position: relative;
    color: var(--color-ring);
}

/* The link underline */
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-ring);
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out
}

/* Link animation visible on hover */
a:hover::after {
    visibility: visible;
    transform: scaleX(1);
}

/* -------- CSS for Navbar-------- */
/* Left nav bar */
.navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 30%; /* Occupy 30% of container */
    background-color: var(--background-color-theme-light); /* Light mode navbar */
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: var(--menu-font-size);
}

/* Dark Mode Navbar */
[data-theme="dark"] .navbar {
    background-color: var(--background-color-theme-dark-navbar); /* Dark mode navbar background */
}

.navbar ul {
    list-style-type: none;
}

.navbar ul li {
    margin-bottom: 1rem;
}

.navbar ul li a.active {
    font-weight: 700; 
}

.social-icons {
    display: flex;
    padding-top: 10px;
    gap: 20px;
    align-items: center;
}

.social-icons a {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--icon-fill-theme);
}

.social-icons a:hover {
    color: var(--icon-fill-hover-theme);
}

.color-picker {
    display: flex;
    margin-top: 10px;
    gap: 20px;
    align-items: center;
}

/* Each color ring */
.ring {
    width: 28px;
    height: 28px;
    border: 4px solid;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, give transform 0.3s ease;
    color: var(--color-ring);
	border-color: var(--color-ring);
}

.ring:hover {
    transform: scale(1.1); /* Slightly enlarge the ring when hovering */
    
}
[data-theme='dark'] .ring {
    color: var(--color-ring);
	border-color: var(--color-ring);
}

/* If a ring is picked, fill with current color */
.selected {
    background-color: currentColor;
    transition: background-color 0.5s ease;
}

/* If a ring is deselected, remove the color and go back to light theme */
.unselected {
    background-color: var(--background-color-theme-light);
}

/* If ring is deselected, remove color and go back to dark theme */
[data-theme='dark'] .unselected {
    background-color: var(--background-color-theme-dark-navbar);
}


/* -------- CSS for Content -------- */
.content {
    flex-basis: 70%; /* Occupy 70% of container */
    padding: 3rem;
    text-align: left;
    color: var(--text-color-theme-light);
}

[data-theme="dark"] .content {
    color: var(--text-color-theme-dark);
}

h1 {
    font-size: var(--header-font-size);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Dark Mode Heading */
[data-theme="dark"] h1 {
    color: var(--text-color-theme-dark); /* Dark mode heading color */
}

p {
    font-size: var(--content-font-size);
    line-height: 1.5;
}

/* Dark Mode Paragraph */
[data-theme="dark"] p {
    color: var(--text-color-theme-dark); /* Dark mode paragraph color */
}

.avatar {
    position: relative;
    top: 5%;              
    left: 80%;
    width: 125px;
    height: auto;
    border-radius: 10px;
}

/* Dark Mode Avatar */
[data-theme="dark"] .avatar {
    filter: brightness(1.0); /* Optional: Adjust avatar visibility in dark mode */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack navbar on top for small screens */
        height: auto; /* Adjust height */
    }

    .navbar {
        flex-basis: auto;
        text-align: center;
    }

    .content {
        flex-basis: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform 0.5s var(--ease-elastic-3);
  }

  .sun-and-moon > .sun-beams {
    transition: 
      transform 0.5s var(--ease-elastic-4),
      opacity 0.5s var(--ease-3);
  }

  .sun-and-moon .moon > circle {
    transition: transform 0.25s var(--ease-out-5);
  }

  @supports (cx: 1px) {
    .sun-and-moon .moon > circle {
      transition: cx 0.25s var(--ease-out-5);
    }
  }

  [data-theme="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
    transition-timing-function: var(--ease-3);
    transition-duration: 0.25s;
  }

  [data-theme="dark"] .sun-and-moon > .sun-beams {
    transform: rotateZ(-25deg);
    transition-duration: 0.15s;
  }

  [data-theme="dark"] .sun-and-moon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}