/*
 * THEME: Graphite + Teal
 * MOOD: Premium charcoal theme with sophisticated teal accents
 * USE CASE: High-end consulting presentations, premium brand positioning, modern sophisticated appeal
 */

/* Graphite + Teal Color Variables */
:root {
  --bg-main: #0f0f0f;
  --bg-section: #161616;
  --text-main: #f3f4f6;
  --text-muted: #a1a1aa;
  --accent: #0f766e;
  --accent-soft: #14b8a6;
  --border-color: #262626;
}

/* Base Styles Override */
body {
  color: var(--text-main);
  background-color: var(--bg-main);
}

/* Header & Navigation */
header {
  background-color: whitesmoke;
  border-bottom: 1px solid var(--border-color);
}

.brand-name {
  color: var(--accent);
}

.lang-active {
  color: var(--accent);
}

.lang-link {
  color: var(--text-muted);
}

.lang-link:hover {
  color: var(--accent);
}

.lang-separator {
  color: var(--border-color);
}

/* Hero Section */
.hero {
  background-color: var(--bg-main);
}

.hero h1 {
  color: var(--text-main);
}

.hero-subtitle {
  color: var(--text-muted);
}

.cta-button {
  background-color: var(--accent);
  color: var(--bg-main);
  border: 2px solid var(--accent);
}

.cta-button:hover {
  background-color: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Main Sections */
section:nth-child(even) {
  background-color: var(--bg-section);
}

section h2 {
  color: var(--text-main);
}

.content-wrapper p {
  color: var(--text-muted);
}

/* Services Section */
.service-card {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
}

.service-card:hover {
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
  border-color: var(--accent);
}

.service-card h3 {
  color: var(--text-main);
}

.service-card p {
  color: var(--text-muted);
}

/* Why init.d Section */
.benefits-list li {
  color: var(--text-muted);
}

.benefits-list li::before {
  color: var(--accent);
}

/* Contact Section */
.email-link {
  color: var(--accent);
}

.email-link:hover {
  background-color: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.2);
}

/* Footer */
footer {
  background-color: var(--bg-section);
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}

/* Focus States for Accessibility */
.cta-button:focus,
.email-link:focus,
.lang-link:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --text-muted: #d4d4d8;
    --border-color: #404040;
  }
  
  .service-card {
    border-width: 2px;
  }
}