@import './peach.css';

:root {
  --site-max-width: 1380px;

  --primary-color: #fcf8f1;
  --secondary-color: #dce8df;
  --accent-color: #d88d5b;
  --background-color: #f6f2ea;
  --dark-background-color: #345754;
  --text-color: color-mix(in srgb, var(--dark-background-color) 78%, var(--background-color) 22%);

  --nav-background-color: color-mix(in srgb, var(--background-color) 82%, transparent);
  --nav-text-color: color-mix(in srgb, var(--dark-background-color) 82%, var(--background-color) 18%);
  --nav-active-background: color-mix(in srgb, var(--accent-color) 14%, var(--background-color) 86%);
  --nav-active-text: color-mix(in srgb, var(--dark-background-color) 90%, var(--background-color) 10%);

  --dark-button-color: color-mix(in srgb, var(--dark-background-color) 92%, var(--accent-color) 8%);
  --button-color: color-mix(in srgb, var(--accent-color) 68%, var(--dark-background-color) 32%);
  --button-hover-color: color-mix(in srgb, var(--accent-color) 56%, var(--dark-background-color) 44%);
  --button-text-color: #fff9f3;

  --border-color: color-mix(in srgb, var(--dark-background-color) 12%, transparent);

  --theme-background-wash:
    radial-gradient(920px 520px at 0% 0%, color-mix(in srgb, var(--secondary-color) 58%, transparent), transparent 62%),
    radial-gradient(760px 460px at 100% 4%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 58%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--background-color) 92%, var(--primary-color) 8%) 0%,
      color-mix(in srgb, var(--background-color) 86%, var(--secondary-color) 14%) 54%,
      color-mix(in srgb, var(--background-color) 80%, var(--primary-color) 20%) 100%
    );

  --surface-color: color-mix(in srgb, var(--background-color) 84%, var(--primary-color) 16%);
  --surface-color-strong: color-mix(in srgb, white 76%, var(--primary-color) 24%);
  --surface-color-soft: color-mix(in srgb, var(--secondary-color) 54%, var(--background-color) 46%);
  --muted-text-color: color-mix(in srgb, var(--text-color) 72%, transparent);
  --soft-text-color: color-mix(in srgb, var(--text-color) 54%, transparent);
  --line-color: color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --line-strong-color: color-mix(in srgb, var(--accent-color) 24%, transparent);
  --accent-soft-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
  --accent-strong-color: color-mix(in srgb, var(--accent-color) 22%, transparent);

  --card-radius-lg: 28px;
  --card-radius-md: 20px;
  --card-radius-sm: 14px;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow-soft: 0 18px 48px color-mix(in srgb, var(--dark-background-color) 10%, transparent);
  --shadow-card: 0 14px 34px color-mix(in srgb, var(--dark-background-color) 11%, transparent);
  --panel-shadow: 0 22px 60px color-mix(in srgb, var(--dark-background-color) 12%, transparent);
  --panel-shadow-soft: 0 14px 30px color-mix(in srgb, var(--dark-background-color) 9%, transparent);
  --panel-shadow-inset: inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
  --orange-card-shadow: 0 20px 48px color-mix(in srgb, var(--dark-background-color) 10%, transparent);
  --orange-card-shadow-hover: 0 24px 56px color-mix(in srgb, var(--dark-background-color) 13%, transparent);

  --mango-surface-stroke: color-mix(in srgb, var(--dark-background-color) 10%, transparent);
  --mango-panel-background: color-mix(in srgb, white 62%, var(--primary-color) 38%);
  --mango-panel-background-soft: color-mix(in srgb, white 52%, var(--background-color) 48%);
  --mango-hero-overlay:
    linear-gradient(90deg, color-mix(in srgb, var(--background-color) 96%, transparent) 0%, color-mix(in srgb, var(--background-color) 84%, transparent) 34%, color-mix(in srgb, var(--background-color) 54%, transparent) 60%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--secondary-color) 24%, transparent), transparent 36%);
}

html,
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

body {
  background: var(--background-color);
  background-attachment: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-background-color);
  letter-spacing: -0.03em;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
  color: var(--dark-background-color);
}

.slider-section-title,
.section-title,
.pricing-title,
.contact-us-title,
.contact-us-main-container .headline,
.testimonials-shell h2,
.ae-testimonial-section-heading {
  color: var(--dark-background-color);
}

.slider-section-subtitle,
.section-subtitle,
.contact-us-subtitle,
.team-subtitle,
.ae-testimonial-subheading,
.slider-section-content,
.section-content,
.html-area,
.contact-us-description,
.team-content,
.intro-subtext,
.whisper-description {
  color: var(--muted-text-color);
}

.separator2,
.separator,
.apple-center-text-separator,
.clemo-separator {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--button-color) 86%, white 14%),
    transparent
  );
}

.btn,
.afhBtn,
.clemo-btn {
  border: 1px solid color-mix(in srgb, var(--button-color) 20%, white 80%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-color) 12%, transparent);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

.btn:hover,
.afhBtn:hover,
.clemo-btn:hover {
  box-shadow: 0 18px 36px color-mix(in srgb, var(--accent-color) 18%, transparent);
  transform: translateY(-2px);
}