/* Import Stylesheets */
@import url("fonts.css");
@import url("navigation.css");
@import url("buttons.css");
@import url("./sections/home.css");
@import url("./sections/about.css");
@import url("./sections/projects.css");
@import url("./sections/contact.css");

/* CSS Custom Properties (Variables) */
:root {
  color-scheme: light dark;

  /* Layout */
  --desktop-padding: 16rem;
  --border-radius: 0.25rem;
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 1s ease;

  /* Colors - Dark Theme (Default) */
  --bg-color: hsl(210, 4%, 7%);
  --bg-color-panel: hsl(210, 4%, 9%);
  --bg-color-card: hsl(210, 4%, 11%);
  --border-color: hsl(210, 4%, 15%);
  --font-color: hsl(210, 3%, 92%);
  --font-color-rgb: 233, 234, 235;
  --hover-color: hsl(210, 3%, 92%);
  --hover-font-color: hsl(210, 4%, 7%);
  --tag-background-color: hsl(210, 4%, 19%);

  /* Technology Colors */
  --html-tag-color: hsl(14, 77%, 52%);
  --css-tag-color: hsl(207, 84%, 42%);
  --js-tag-color: hsl(53, 89%, 60%);
  --nodejs-tag-color: hsl(45, 12%, 19%);
  --react-tag-color: hsl(210, 17%, 19%);

  /* Typography */
  --font-primary: "Montserrat", system-ui, sans-serif;
  --font-secondary: "OpenSans", system-ui, sans-serif;
  --font-size-h1: clamp(2rem, 2.8vw, 4rem);
  --font-size-h1-mobile: clamp(2.5rem, 10vw, 6rem);
}

/* Light Theme Override */
[data-theme="light"] {
  --border-color: hsl(210, 15%, 82%);
  --bg-color: hsl(215, 25%, 96%);
  --bg-color-panel: hsl(215, 20%, 98%);
  --bg-color-card: hsl(215, 20%, 98%);
  --font-color: hsl(210, 4%, 9%);
  --font-color-rgb: 22, 23, 24;
  --hover-color: hsl(210, 4%, 9%);
  --hover-font-color: hsl(215, 20%, 98%);
  --tag-background-color: hsl(215, 25%, 96%);
  --html-tag-color: hsl(14, 80%, 55%);
  --css-tag-color: hsl(207, 75%, 48%);
  --js-tag-color: hsl(50, 90%, 58%);
  --nodejs-tag-color: hsl(120, 45%, 35%);
  --react-tag-color: hsl(195, 80%, 48%);
}

/* Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--desktop-padding);
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  transition: background-color var(--transition-fast);
  background-size: 90rem;
}

/* Typography */
h1 {
  color: var(--font-color);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-h1);
  margin: 0;
  line-height: 1.2;
}

p {
  color: var(--font-color);
  font-family: var(--font-secondary);
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

/* Link Styling */
.link--embedded {
  color: var(--font-color);
  text-decoration-color: var(--font-color);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.25rem;
  transition: var(--transition-fast);
}

.link--embedded:hover,
.link--embedded:focus {
  text-decoration-thickness: 0.2rem;
}

/* Utility Classes */
.copied-popup {
  position: absolute;
  background-color: hsla(0, 0%, 0%, 0.8);
  color: white;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(94, 94, 94);
  border-radius: var(--border-radius);
  font-size: 1.125rem;
  font-family: var(--font-primary);
  pointer-events: none;
  opacity: 1;
  z-index: 1000;
  transition: opacity var(--transition-medium),
    transform var(--transition-medium);
  transform: translateY(0);
}

.copied-popup--fade {
  opacity: 0;
  transform: translateY(-0.5rem);
}

/* Responsive Design */
@media (max-width: 62.5rem) {
  /* 1000px */
  body {
    padding-inline-start: 0;
  }

  h1 {
    font-size: var(--font-size-h1-mobile);
    text-align: center;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}