:root {
  --color-primary-dark: #E65100;   /* Deep orange */
  --color-primary-medium: #F57C00; /* Medium orange */
  --color-primary-light: #FFF3E0;  /* Very light orange */
  --color-accent: #FF9800;        /* Bright orange accent */
}

/* Apply base font if needed, Tailwind usually handles this */
body {
  font-family: 'Inter', sans-serif; /* Example: Using Inter font - requires importing it in HTML */
}

/* Override Tailwind colors where needed or define custom classes */
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-accent { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.ring-accent { --tw-ring-color: var(--color-accent); }

/* Custom hover effects if desired */
header nav a:hover {
  color: var(--color-accent);
}

/* Style the header logo SVG */
header nav a img {
  fill: white; /* Set SVG fill color */
  /* You might need to adjust width/height here if the SVG dimensions cause issues */
}

/* Style the button */
#contact-form button[type="submit"] {
  background-color: var(--color-primary-dark);
  transition: background-color 0.3s ease;
}

#contact-form button[type="submit"]:hover {
  background-color: var(--color-primary-medium);
}

/* Style the form input focus */
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
  outline: none;
}

/* Hero section background image */
#home {
    position: relative; /* Needed for the overlay pseudo-element */
    background-image: url('images/hero.jpg');
    background-size: cover;       /* Cover the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

/* Add a semi-transparent overlay for text readability */
#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 0; /* Place overlay behind the content but above the background */
}

/* Ensure hero content is above the overlay */
#home > div { /* Target the direct child div containing the text */
    position: relative; /* Establish stacking context */
    z-index: 1; /* Ensure content is above the overlay */
}

/* Add styles for the actual hero animation if implemented */
#hero-animation-placeholder {
    /* Placeholder - styles for a potential particle animation or shape background */
    /* E.g., position: absolute; inset: 0; z-index: -1; */
}

/* Ensure fixed header doesn't overlap content */
/* body { padding-top: 64px; } */ /* Adjust based on actual header height - handled by pt-16 on hero for now */