/* theme-redesign.css - Light Theme using provided color palette */

/* Color Palette Variables */
:root {
  --color-bg-light: #f5f3f4;
  --color-bg-section: #ffffff;
  --color-bg-accent: #d3d3d3;
  --color-text-primary: #161a1d;
  --color-text-secondary: #660708;
  --color-accent: #e5383b;
  --color-accent-dark: #a4161a;
  --color-border: #b1a7a6;
  --color-shadow: rgba(165, 167, 166, 0.2);

  --font-primary: "Roboto", sans-serif;
  --font-mono: "Source Code Pro", monospace;

  --transition-speed: 0.3s;
}

/* Body and Background */
body {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* Sections */
.section {
  background-color: var(--color-bg-section);
  color: var(--color-text-primary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary);
}

/* Links and Buttons */
a,
.btn {
  color: var(--color-accent);
  transition: color var(--transition-speed),
    background-color var(--transition-speed);
}

a:hover,
a:focus,
.btn:hover,
.btn:focus {
  color: var(--color-accent-dark);
  background-color: var(--color-bg-accent);
  outline: none;
}

/* Borders and Shadows */
.border,
hr {
  border-color: var(--color-border);
}

.box-shadow {
  box-shadow: 0 4px 15px var(--color-shadow);
}

/* Navigation Bar */
.navbar {
  background-color: var(--color-bg-section);
  box-shadow: 0 2px 8px var(--color-shadow);
  color: var(--color-text-primary);
}

/* Footer */
.footer {
  background-color: var(--color-bg-section);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* Inputs and Forms */
input,
textarea,
select {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Additional overrides for hero and about sections to use light theme colors */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-accent-dark)
  );
  color: var(--color-bg-section);
}

.about-section {
  background-color: var(--color-bg-section);
  color: var(--color-text-primary);
}

/* Services Section */
.services-section {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* Testimonials Section */
.testimonials-section {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* Contact Section */
.contact-section {
  background-color: var(--color-bg-section);
  color: var(--color-text-primary);
}