@import url('styles.css');

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --elevated: #eceef2;
  --panel: #ffffff;
  --border: #d4d8e0;
  --border-light: #bcc2cc;
  --text: #1c2128;
  --muted: #5a6270;
  --accent: #2f6faa;
  --accent-bright: #1e5f96;
  --signal: #1f7668;
  --warn: #a04838;
}

body::before {
  opacity: 0.1;
}

a:hover {
  color: #2563a8;
}

header {
  background: rgba(244, 245, 247, 0.94);
}

.menu-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.runtime-block::before {
  opacity: 0.25;
}

#hero-canvas {
  background: #e8eaef;
}

#torque-canvas {
  background: #eceef2;
}

.modal-backdrop {
  background: rgba(28, 33, 40, 0.45);
}

.phone-frame {
  background: linear-gradient(160deg, #e4e6eb 0%, #f8f9fb 55%, #d8dce4 100%);
  box-shadow:
    0 12px 28px rgba(28, 33, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.phone-frame::before {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.phone-screen {
  background: #1c2128;
}

.phone-status {
  background: #12161c;
}

.contact-email:hover {
  color: #2563a8;
}

.contact-form .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6270' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}