/* theme-integration.css - Applies aqua theme variables to existing elements */

/* CSS Reset for Theme */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Basic elements with !important to override custom CSS */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

a {
  color: var(--link-color) !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--link-hover-color) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color) !important;
}

/* Form elements */
input, select, textarea {
  background-color: var(--color-base-200) !important;
  border: var(--border) solid var(--border-color) !important;
  border-radius: var(--radius-field) !important;
  color: var(--text-color) !important;
  padding: var(--size-field) !important;
}

button, .button, input[type="submit"], input[type="button"], input[type="reset"] {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-radius: var(--button-border-radius) !important;
  border: var(--border) solid var(--border-color) !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
  background-color: var(--button-hover-bg) !important;
  color: var(--button-hover-text) !important;
}

/* Cards and containers */
.card, .box, .container {
  background-color: var(--color-base-200) !important;
  border-radius: var(--radius-box) !important;
  border: var(--border) solid var(--border-color) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, calc(0.1 * var(--depth))) !important;
}

/* Header and navigation */
header, nav, .header, .header-nav {
  background-color: var(--color-base-200) !important;
}

nav a, .header-nav-item {
  color: var(--text-color) !important;
}

nav a:hover, nav a.active, .header-nav-item:hover, .header-nav-item.active {
  color: var(--link-color) !important;
}

/* Alert and message boxes */
.alert {
  border-radius: var(--radius-box) !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

.alert-info {
  background-color: var(--color-info) !important;
  color: var(--color-info-content) !important;
}

.alert-success {
  background-color: var(--color-success) !important;
  color: var(--color-success-content) !important;
}

.alert-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-warning-content) !important;
}

.alert-error {
  background-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

/* Tables */
table {
  border-collapse: collapse !important;
}

th, td {
  border: var(--border) solid var(--border-color) !important;
  padding: 0.5rem !important;
}

thead {
  background-color: var(--color-base-200) !important;
}

tr:nth-child(even) {
  background-color: var(--color-base-200) !important;
}

/* Custom additions for your site */
.highlight {
  color: var(--color-accent) !important;
}

.emphasis {
  color: var(--color-secondary) !important;
}

/* Projects page styling */
.my-projects-body {
  background-color: var(--bg-color) !important;
}

.my-projects {
  background-color: var(--color-base-200) !important;
  border-radius: var(--radius-box) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, calc(0.1 * var(--depth))) !important;
}

.my-projects-header {
  background-color: var(--color-base-300) !important;
  border-bottom: var(--border) solid var(--border-color) !important;
}

.my-header {
  color: var(--heading-color) !important;
}

.my-projects-back-button {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-radius: var(--button-border-radius) !important;
}

.my-projects-back-button:hover {
  background-color: var(--button-hover-bg) !important;
  color: var(--button-hover-text) !important;
}

.my-project-item {
  border-bottom: var(--border) solid var(--border-color) !important;
}

.my-project-item a {
  color: var(--link-color) !important;
}

.my-project-item a:hover {
  color: var(--link-hover-color) !important;
}

.framework-name {
  color: var(--color-secondary) !important;
}

/* Additional element overrides */
.header {
  background-color: var(--color-base-100) !important;
  border-bottom: var(--border) solid var(--border-color) !important;
}

.projects-description {
  background-color: var(--color-base-100) !important;
  color: var(--text-color) !important;
  padding: 1rem !important;
  border-radius: var(--radius-box) !important;
}

/* Fix for inline styles */
[style*="background-color"] {
  background-color: var(--color-base-100) !important;
}

[style*="color"] {
  color: var(--text-color) !important;
}

/* Section group styling */
.section.group {
  background-color: var(--color-base-100) !important;
}

/* Resume styling */
.resume {
  background-color: var(--color-base-100) !important;
  color: var(--text-color) !important;
  padding: 2rem !important;
}

.notbold {
  color: var(--color-secondary) !important;
}

/* Contact styling */
.contact-me-outer {
  background-color: var(--color-base-100) !important;
}

/* Responsive adjustments */
@media (prefers-color-scheme: dark) {
  /* The theme is set to light mode, but we can add some subtle adjustments 
     for users with dark mode preference */
  :root {
    --depth: 0.8;  /* Reduce shadow intensity */
  }
}

/* Force the font styles */
* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}