:root {
  --theme-primary: var(--primary-color, #0f5f46);
  --theme-secondary: var(--secondary-color, #f5c84b);
  --theme-primary-deep: color-mix(
    in srgb,
    var(--theme-primary) 72%,
    #000000 28%
  );
  --theme-accent: color-mix(
    in srgb,
    var(--theme-primary) 62%,
    var(--theme-secondary) 38%
  );

  --gradient-brand: linear-gradient(
    135deg,
    var(--theme-secondary),
    var(--theme-accent)
  );
  --gradient-hero-overlay:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--theme-primary-deep) 72%, transparent 28%),
      color-mix(in srgb, var(--theme-primary-deep) 34%, transparent 66%),
      color-mix(in srgb, var(--theme-primary-deep) 12%, transparent 88%)
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--theme-primary-deep) 46%, transparent 54%),
      transparent 48%
    );
  --gradient-section-soft: radial-gradient(
    circle at top left,
    color-mix(in srgb, var(--theme-secondary) 18%, transparent 82%),
    transparent 34%
  );
  --gradient-section-deep:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary-deep) 98%, transparent 2%),
      color-mix(in srgb, var(--theme-primary) 96%, transparent 4%)
    ),
    radial-gradient(
      circle at 80% 15%,
      color-mix(in srgb, var(--theme-secondary) 25%, transparent 75%),
      transparent 30%
    );
  --gradient-placeholder:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-accent) 85%, transparent 15%),
      color-mix(in srgb, var(--theme-primary) 90%, transparent 10%)
    ),
    radial-gradient(
      circle at 25% 20%,
      color-mix(in srgb, var(--theme-secondary) 75%, transparent 25%),
      transparent 18%
    ),
    linear-gradient(45deg, var(--theme-primary-deep), var(--theme-accent));
  --gradient-cta:
    linear-gradient(
      color-mix(in srgb, var(--theme-primary-deep) 88%, transparent 12%),
      color-mix(in srgb, var(--theme-primary-deep) 88%, transparent 12%)
    ),
    linear-gradient(135deg, var(--theme-primary-deep), var(--theme-accent));
  --gradient-page-hero:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-primary-deep) 94%, transparent 6%),
      color-mix(in srgb, var(--theme-accent) 84%, transparent 16%)
    ),
    radial-gradient(
      circle at 85% 20%,
      color-mix(in srgb, var(--theme-secondary) 35%, transparent 65%),
      transparent 28%
    );
}

.brand-mark {
  background: var(--gradient-brand);
}

.hero-overlay {
  background: var(--gradient-hero-overlay);
}

.section-soft {
  background: var(--gradient-section-soft), var(--surface);
}

.section-deep {
  background: var(--gradient-section-deep);
}

.placeholder-image {
  background: var(--gradient-placeholder);
}

.cta-section {
  background: var(--gradient-cta);
}

.page-hero {
  background: var(--gradient-page-hero);
}