/* ============================================
   Brushwork Pro Painting — Warm Sage + Terracotta Light Theme
   ============================================ */

:root {
  /* --- Brand Colors --- */
  --color-primary:        #65a30d;
  --color-primary-light:  #84cc16;
  --color-primary-dark:   #4d7c0f;
  --color-secondary:      #1c1917;
  --color-secondary-light:#292524;
  --color-accent:         #c2410c;
  --color-accent-light:   #ea580c;

  /* --- Surfaces --- */
  --color-bg:             #fefefe;
  --color-surface:        #f5f5f0;
  --color-surface-light:  #eae9e2;
  --color-border:         rgba(0, 0, 0, 0.06);

  /* --- Text --- */
  --color-text:           #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted:     #a8a29e;

  /* --- Header (light theme, blur) --- */
  --color-header-bg:              rgba(254, 254, 254, 0.8);
  --color-header-border:          rgba(0, 0, 0, 0.06);
  --color-header-scrolled-bg:     rgba(254, 254, 254, 0.95);
  --color-header-scrolled-border: rgba(0, 0, 0, 0.1);
  --shadow-header-scrolled:       0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.06);

  /* --- Typography --- */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* --- Spacing --- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* --- Borders --- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;
}

/* --- Highlight uses terracotta accent --- */
.highlight {
  color: var(--color-accent);
}

/* --- Light theme: header nav link colors --- */
.header .nav__link {
  color: var(--color-text-secondary);
}
.header .nav__link:hover {
  color: var(--color-text);
}
.header .logo__short {
  color: var(--color-text);
}
.header .logo__highlight {
  color: var(--color-primary);
}

/* --- Dark sections on light theme: keep cards white --- */
.section--dark .card,
.section--dark [class*="-card"] {
  background: #fff;
}

/* --- Dark section text overrides for light theme --- */
.section--dark {
  background: var(--color-secondary);
  color: #fff;
}
.section--dark .label {
  color: var(--color-accent-light);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
}
.section--dark p,
.section--dark .card__text,
.section--dark .service-card__text {
  color: var(--color-text-secondary);
}
.section--dark .card__title,
.section--dark .service-card__title {
  color: var(--color-text);
}
.section--dark .btn--ghost {
  color: var(--color-primary);
}

/* --- Testimonials on light bg --- */
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.testimonial__stars {
  color: var(--color-accent);
}
.testimonial__quote {
  color: var(--color-text-secondary);
}
.testimonial__author {
  color: var(--color-text);
  font-weight: 600;
}
.testimonial__role {
  color: var(--color-text-muted);
}

/* --- Gallery grid item overlays --- */
.gallery-grid__overlay {
  background: linear-gradient(to top, rgba(28, 25, 23, 0.8) 0%, transparent 60%);
}

/* --- Footer dark --- */
.footer {
  background: var(--color-secondary);
  color: rgba(255, 255, 255, 0.75);
}
.footer a {
  color: rgba(255, 255, 255, 0.75);
}
.footer a:hover {
  color: #fff;
}
.footer h4 {
  color: #fff;
}

/* --- Stat numbers use primary --- */
.stat__number {
  color: var(--color-primary);
}

/* --- Team cards --- */
.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* --- Partner logo strip --- */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.partner-logo__text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.section--dark .partner-logo__text {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Image placeholder gradient for no-image state --- */
.img-placeholder {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-light) 100%);
}

/* --- Page banner uses secondary bg --- */
.page-banner {
  background: var(--color-secondary);
}
.page-banner__label {
  color: var(--color-accent-light);
}
.page-banner__title {
  color: #fff;
}

/* --- Accent section (CTA) --- */
.section--accent {
  background: var(--color-primary);
  color: #fff;
}
.section--accent .label {
  color: rgba(255, 255, 255, 0.7);
}
.section--accent .highlight {
  color: var(--color-accent-light);
}

/* --- Breadcrumb on dark banner --- */
.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb a:hover {
  color: #fff;
}
.breadcrumb span {
  color: rgba(255, 255, 255, 0.4);
}

/* --- Form inputs on light bg --- */
.form-input,
.form-textarea,
.form-select {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.1);
}

/* --- Accent section form inputs --- */
.section--accent .form-input,
.section--accent .form-textarea {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.section--accent .form-input::placeholder,
.section--accent .form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.section--accent .form-input:focus,
.section--accent .form-textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* --- Divider --- */
.divider {
  width: 48px;
  height: 2px;
  background: var(--color-primary);
  margin: 1rem 0 1.5rem;
}

/* --- Service card hover --- */
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* --- Ds-num (divider stats) uses primary --- */
.ds-num {
  color: var(--color-primary);
}