/* CSS Variables for Ryan Hannebaum Site */

:root {
  /* Primary Colors */
  --color-primary-dark: #343939;
  --color-primary-light: #f6f8f7;
  --color-secondary: #5a6269;
  --color-accent: #e0e6e7;
  /* Dark Mode Colors */
  --color-dark-bg: #343939;
  --color-dark-text: #e6eae8;
  /* Typography */
  --font-family-primary: "Spartan", sans-serif;
  --font-size-base: 17px;
  --font-weight-normal: 300;
  --font-weight-medium: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;
  --font-weight-extrabold: 800;
  --font-weight-black: 850;
  --line-height-base: 1.95;
  --letter-spacing-base: -0.2px;
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 14px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;
  --spacing-3xl: 60px;
  --spacing-4xl: 100px;
  --spacing-5xl: 120px;
  --spacing-6xl: 160px;
  /* Border Radius */
  --border-radius-sm: 40px;
  --border-radius-md: 2px;
  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-normal: 600ms ease;
  /* Z-index */
  --z-index-nav: 9999;
  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1111px;
}

body {
  background: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}

body.dark-mode {
  --color-primary-light: #d6dcd9;
  --color-secondary: #a0a6ad;
  --color-accent: #2a2f33;
  --color-dark-bg: #343939;
  --color-dark-text: #e6eae8;
  background: var(--color-primary-dark) !important;
  color: var(--color-primary-light) !important;
}

#globalNav {
  background: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}

#globalNav.dark-mode {
  background: var(--color-primary-dark) !important;
  color: var(--color-primary-light) !important;
}

/* Portfolio Category Pills Dark Mode */
body.dark-mode .filters .category {
  border-color: var(--color-dark-text) !important;
}

body.dark-mode .filters .category .name {
  color: var(--color-dark-text) !important;
}

body.dark-mode .filters .category .indicator {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-dark-text) !important;
}

body.dark-mode .filters .category.active {
  background: #87F9BC !important;
}

body.dark-mode .filters .category.active .name {
  color: var(--color-primary-dark) !important;
}

body.dark-mode .filters .category.active .indicator {
  border-color: var(--color-primary-dark) !important;
}

/* Portfolio Entry Cards Dark Mode */
body.dark-mode #portfolio .entryCard .info .projectTitle::before {
  border-bottom-color: var(--color-dark-text) !important;
}

body.dark-mode #portfolio .entryCard .featureImage::before {
  border-color: var(--color-dark-text) !important;
}

/* Project Details Page Dark Mode */
body.dark-mode .projectHeader .categories {
  background-color: var(--color-primary-dark) !important;
}

body.dark-mode .projectHeader .featureImage::after {
  border-color: var(--color-secondary) !important;
}

/* Project Details Page ::before Elements Dark Mode */
body.dark-mode .overview .highlights ul li::before {
  border-color: var(--color-dark-text) !important;
}

body.dark-mode .overview .highlights ul::before {
  border-color: var(--color-dark-text) !important;
}

/* Ensure light mode bullet points are visible */
.overview .highlights ul li::before {
  border-color: #5a6269 !important;
}

.overview .highlights ul::before {
  border-color: #5a6269 !important;
}

body.dark-mode .samples .sampleAsset .connector {
  background: var(--color-dark-text) !important;
  border-color: var(--color-dark-text) !important;
}

body.dark-mode .samples .sampleAsset .connector::before {
  background: var(--color-dark-text) !important;
}

body.dark-mode .samples .sampleAsset .asset {
  border-color: var(--color-dark-text) !important;
}

/* Footer Dark Mode */
body.dark-mode #globalFooter .copyright {
  color: var(--color-dark-text) !important;
}

body.dark-mode #globalFooter .footerLine {
  background: var(--color-dark-text) !important;
}

body.dark-mode #globalFooter .socialIcons .socialLink img {
  filter: brightness(0) invert(1) !important;
}

/* Standard Hero Dark Mode */
body.dark-mode .standardHero {
  border-bottom-color: var(--color-dark-text) !important;
}

/* CTA Button Dark Mode */
body.dark-mode .ctaButton {
  border-color: var(--color-dark-text) !important;
}

/* Menu Dark Mode */
body.dark-mode #globalMenu {
  background: var(--color-primary-dark) !important;
  color: var(--color-primary-light) !important;
}

/* Menu Light Mode (default) */
#globalMenu {
  background: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}

/* Strike class for strikethrough text */
.strike {
  text-decoration: line-through;
}

/* Menu Button Animation Dark Mode */
body.dark-mode #menuBtn g,
body.dark-mode #menuBtn path {
  fill: var(--color-primary-light) !important;
  stroke: var(--color-primary-light) !important;
}

/* Menu Button Animation Light Mode */
#menuBtn g,
#menuBtn path {
  fill: var(--color-primary-dark) !important;
  stroke: var(--color-primary-dark) !important;
}