:root {
  --color-background: #EBE7DC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F2ED;
  --color-border: rgba(31, 35, 42, 0.1);
  --color-text-primary: #1F232A;
  --color-text-secondary: #6B7280;
  --color-placeholder: #A3A3A3;
  --color-primary: #13A29C;
  --color-secondary: #F86456;
  --color-success: #3BB54A;
  --color-warning: #FFC42F;
  --color-error: #F86456;
  --font-family: 'Inter', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    system-ui, sans-serif;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-micro: 12px;
  --line-height-body: 1.5;
  --line-height-heading: 1.2;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --radius-default: 12px;
  --header-height: 56px;
}

[data-theme='dark'] {
  --color-background: #121212;
  --color-surface: #1E1E1E;
  --color-surface-alt: #222222;
  --color-border: rgba(240, 240, 240, 0.1);
  --color-text-primary: #F0F0F0;
  --color-text-secondary: #A3A3A3;
  --color-placeholder: #3A3A3A;
  --color-primary: #13A29C;
  --color-secondary: #F86456;
  --color-success: #3BB54A;
  --color-warning: #FFC42F;
  --color-error: #F86456;
}

html, body {
  padding: 0;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

a {
  color: var(--color-primary);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: var(--line-height-heading);
  margin: var(--spacing-2) 0;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: var(--line-height-heading);
  margin: var(--spacing-2) 0;
}

main {
  padding: var(--spacing-2);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  main {
    padding: var(--spacing-3);
  }
}

.site-header {
  height: var(--header-height);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

.site-header .logo {
  margin-right: auto;
  font-weight: 700;
  font-size: var(--font-size-h2);
}

.main-nav {
  display: flex;
  gap: var(--spacing-3);
  font-size: var(--font-size-caption);
  font-weight: 500;
}

.primary-button {
  margin-left: auto;
  background: var(--color-secondary);
  color: #fff;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 8px;
  text-decoration: none;
}

.primary-button:hover {
  background: #df5a4d;
}

.bottom-nav {
  height: var(--header-height);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-caption);
  font-weight: 500;
}

.bottom-nav .contact-link {
  color: var(--color-primary);
}

[data-theme='dark'] .bottom-nav .contact-link {
  color: var(--color-secondary);
}