/* styles.css */
:root {
  /* Refined color palette for fine art photography - subtle neutrals */
  --color-black: #262626;
  --color-dark-gray: #4a4a4a;
  --color-medium-gray: #767676;
  --color-light-gray: #e0e0e0;
  --color-off-white: #f8f8f8;
  --color-white: #ffffff;
  --color-accent: #9a8a78; /* Subtle warm accent color */
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-dark-gray);
  background-color: var(--color-white);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Typography - subtle and elegant */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

p, span, div {
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Simplified button styles */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  transition: all 0.2s ease;
  border-radius: 0;
  font-weight: 400;
}

.btn-primary:hover {
  background-color: var(--color-dark-gray);
}

.btn-outline {
  border: 1px solid var(--color-medium-gray);
  color: var(--color-dark-gray);
  background-color: transparent;
  transition: all 0.2s ease;
  border-radius: 0;
  font-weight: 400;
}

.btn-outline:hover {
  background-color: var(--color-light-gray);
}

/* Header styling */
header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-light-gray);
}

/* Form elements */
input[type="range"] {
  accent-color: var(--color-accent);
  height: 2px;
}

/* Ensure select elements match the regular text size */
select {
  font-size: 14px;
  font-weight: 300;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-dark-gray);
  padding: 0.5rem;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1em;
  padding-right: 2rem;
}

select option {
  font-size: 14px;
  font-weight: 300;
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--color-accent);
  width: 12px;
  height: 12px;
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  background: var(--color-accent);
  width: 12px;
  height: 12px;
  border-radius: 0;
}

/* Active state for buttons */
.btn-active {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  border-radius: 0;
}

/* Clean minimalist styling - no rounded corners */
.rounded-lg, .rounded, .rounded-full {
  border-radius: 0 !important;
}

.shadow-sm {
  box-shadow: none !important;
}

.border {
  border: 1px solid var(--color-light-gray);
}

/* Consistent spacing */
.p-4 {
  padding: 1.5rem !important;
}

.py-6 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

.space-y-4 > * + * {
  margin-top: 1.5rem !important;
}

/* Render view - maintain aspect ratio with a clean style */
.aspect-\[2\/3\] {
  aspect-ratio: 2/3 !important;
  border: 1px solid var(--color-light-gray);
  background-color: var(--color-off-white);
}

/* Font weight overrides for subtlety */
.font-medium {
  font-weight: 400 !important;
}

.font-semibold {
  font-weight: 500 !important;
}

.font-bold {
  font-weight: 500 !important;
}

/* Consistent coloring for Tailwind classes */
.bg-dark-navy, .bg-navy, .bg-blue, .bg-light-blue, .text-dark-navy, .text-navy, .text-blue, .text-light-blue, .border-blue, .border-light-blue {
  /* Reset all Tailwind color classes to use our new scheme */
}

.bg-dark-navy, .bg-navy {
  background-color: var(--color-white) !important;
}

.text-dark-navy, .text-navy {
  color: var(--color-black) !important;
}

.text-blue, .text-light-blue {
  color: var(--color-accent) !important;
}

.border-blue, .border-light-blue {
  border-color: var(--color-light-gray) !important;
}

.bg-white, .bg-off-white {
  background-color: var(--color-white) !important;
}

/* Rendered view background */
.bg-navy {
  background-color: var(--color-off-white);
}

/* Focus states for accessibility */
.focus\:ring-2:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent) !important;
}

/* Transitions for smooth interactions */
.transition-colors {
  transition: all 0.2s ease;
}

/* Sensor size selection styling */
.sensor-option {
  transition: all 0.2s ease;
}

.sensor-option:hover {
  border-color: var(--color-accent) !important;
}

.sensor-option.active {
  border-color: var(--color-accent) !important;
  background-color: var(--color-off-white);
}

/* Ensure the sensor size icons display with proper proportions */
.sensor-option .relative {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 33px;
}